Move CSS to stylesheet and add test

src/core/operations/RenderImage.mjs

@@ -104,8 +104,7 @@ class RenderImage extends Operation {
         // Add image data to URI
         dataURI += "base64," + toBase64(data);
 
-        // style tag for image responsiveness
+        return "<img src='" + dataURI + "' alt='Rendered image'>";
-        return "<img src='" + dataURI + "' style='max-width:100%;max-height:100vh;display:block;margin:auto;' alt='Rendered image'>";
     }
 
 }

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

@@ -473,6 +473,21 @@ 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/);
+
+    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