From 6f9cf214e4c1dc3708df8f520d28f07dcd8501bb Mon Sep 17 00:00:00 2001
From: C85297 <95289555+C85297@users.noreply.github.com>
Date: Mon, 15 Jun 2026 09:35:07 +0100
Subject: [PATCH] Move CSS to stylesheet and add test

---
 src/core/operations/RenderImage.mjs |  3 +--
 src/web/stylesheets/layout/_io.css  |  8 ++++++++
 tests/browser/02_ops.js             | 15 +++++++++++++++
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/core/operations/RenderImage.mjs b/src/core/operations/RenderImage.mjs
index 72a8de4b..2411f0c7 100644
--- a/src/core/operations/RenderImage.mjs
+++ b/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 + "' style='max-width:100%;max-height:100vh;display:block;margin:auto;' alt='Rendered image'>";
+        return "<img src='" + dataURI + "' alt='Rendered image'>";
     }
 
 }
diff --git a/src/web/stylesheets/layout/_io.css b/src/web/stylesheets/layout/_io.css
index 0146bf27..abca9d84 100755
--- a/src/web/stylesheets/layout/_io.css
+++ b/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;
diff --git a/tests/browser/02_ops.js b/tests/browser/02_ops.js
index 7fe7f538..6110af93 100644
--- a/tests/browser/02_ops.js
+++ b/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