Fix: added viewport styles to img tag in RenderImage Dish (#2109)

Co-authored-by: GCHQ Developer 85297 <95289555+C85297@users.noreply.github.com>

src/web/stylesheets/layout/_io.css

@@ -24,6 +24,14 @@
     height: 100%;
     user-select: auto;
 }
+
+#output-html > img {
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+    margin: auto;
+}
+
 #output-text.html-output .cm-line .cm-widgetBuffer,
 #output-text.html-output .cm-line>br {
     display: none;

tests/browser/02_ops.js

@@ -492,7 +492,22 @@ function testOpImage(browser, opName, filename, args=[]) {
 
     browser
         .waitForElementVisible("#output-html img")
-        .expect.element("#output-html img").to.have.css("width").which.matches(/^[^0]\d*px/);
+        .expect.element("#output-html img").to.have.css("width").which.matches(/^(?!0+(?:\.0+)?px$)\d+(?:\.\d+)?px$/);
+
+    browser.execute(function() {
+        const output = document.getElementById("output-html");
+        const img = output.querySelector("img");
+        const outputRect = output.getBoundingClientRect();
+        const imgRect = img.getBoundingClientRect();
+
+        return {
+            imageFitsWidth: imgRect.width <= outputRect.width,
+            imageFitsHeight: imgRect.height <= outputRect.height,
+        };
+    }, [], function({value}) {
+        browser.expect(value.imageFitsWidth).to.be.equal(true);
+        browser.expect(value.imageFitsHeight).to.be.equal(true);
+    });
 }
 
 /** @function