@schukai/monster 4.136.0 → 4.136.2

package/test/cases/components/content/viewer.mjs

@@ -0,0 +1,99 @@
+import * as chai from "chai";
+import { chaiDom } from "../../../util/chai-dom.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+chai.use(chaiDom);
+const expect = chai.expect;
+
+let Viewer;
+
+describe("Viewer", function () {
+	before(function (done) {
+		initJSDOM()
+			.then(() => import("../../../../source/components/content/viewer.mjs"))
+			.then((module) => {
+				Viewer = module.Viewer;
+				done();
+			})
+			.catch((error) => done(error));
+	});
+
+	afterEach(() => {
+		const mocks = document.getElementById("mocks");
+		mocks.innerHTML = "";
+	});
+
+	it("renders text/plain without interpreting html", function (done) {
+		const mocks = document.getElementById("mocks");
+		mocks.innerHTML = `<monster-viewer id="viewer"></monster-viewer>`;
+
+		setTimeout(() => {
+			try {
+				const viewer = document.getElementById("viewer");
+				expect(viewer).instanceof(Viewer);
+
+				viewer.setContent("<strong>raw</strong>\n<script>alert(1)</script>");
+
+				setTimeout(() => {
+					try {
+						const textNode = viewer.shadowRoot.querySelector('[part="text"]');
+						expect(textNode).to.not.equal(null);
+						expect(textNode.textContent).to.equal(
+							"<strong>raw</strong>\n<script>alert(1)</script>",
+						);
+						expect(textNode.innerHTML).to.contain("&lt;strong&gt;raw&lt;/strong&gt;");
+						done();
+					} catch (error) {
+						done(error);
+					}
+				}, 0);
+			} catch (error) {
+				done(error);
+			}
+		}, 0);
+	});
+
+	it("blocks cross-origin resources in html view", function (done) {
+		const mocks = document.getElementById("mocks");
+		mocks.innerHTML = `<monster-viewer id="viewer"></monster-viewer>`;
+
+		setTimeout(() => {
+			try {
+				const viewer = document.getElementById("viewer");
+				expect(viewer).instanceof(Viewer);
+
+				viewer.setContent(
+					`
+						<link rel="stylesheet" href="https://evil.example/tracker.css">
+						<script src="https://evil.example/tracker.js"></script>
+						<img id="external" src="https://evil.example/pixel.png">
+						<img id="local" src="/image.png">
+					`,
+					"text/html",
+				);
+
+				setTimeout(() => {
+					try {
+						const root = viewer.shadowRoot;
+						expect(root.querySelector("link")).to.equal(null);
+						expect(root.querySelector("script")).to.equal(null);
+
+						const externalImage = root.querySelector("#external");
+						expect(externalImage).to.not.equal(null);
+						expect(externalImage.classList.contains("privacyImage")).to.equal(true);
+						expect(externalImage.getAttribute("src")).to.match(/^data:image\/gif;base64,/);
+
+						const localImage = root.querySelector("#local");
+						expect(localImage).to.not.equal(null);
+						expect(localImage.getAttribute("src")).to.equal("/image.png");
+						done();
+					} catch (error) {
+						done(error);
+					}
+				}, 0);
+			} catch (error) {
+				done(error);
+			}
+		}, 0);
+	});
+});

package/test/cases/components/form/context-help.mjs

@@ -88,4 +88,30 @@ describe("ContextHelp", function () {
 			}
 		}, 0);
 	});
+
+	it("should switch to fixed positioning inside a clipping container", function (done) {
+		let mocks = document.getElementById("mocks");
+		const wrapper = document.createElement("div");
+		const help = document.createElement("monster-context-help");
+
+		wrapper.style.overflow = "hidden";
+		wrapper.appendChild(help);
+		mocks.appendChild(wrapper);
+		help.innerHTML = "<p>Inline help</p>";
+
+		setTimeout(() => {
+			try {
+				help.showDialog();
+
+				const popper = help.shadowRoot.querySelector(
+					'[data-monster-role="popper"]',
+				);
+				expect(popper).to.exist;
+				expect(popper.style.position).to.equal("fixed");
+				done();
+			} catch (e) {
+				done(e);
+			}
+		}, 0);
+	});
 });

package/test/web/import.js

@@ -3,6 +3,7 @@ import "./prepare.js";
 import "../cases/components/layout/tabs.mjs";
 import "../cases/components/layout/slit-panel.mjs";
 import "../cases/components/layout/panel.mjs";
+import "../cases/components/content/viewer.mjs";
 import "../cases/components/content/image-editor.mjs";
 import "../cases/components/form/buy-box.mjs";
 import "../cases/components/form/message-state-button.mjs";