From 4ceadefabeed3836880478ceb53630646e679664 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Piasecki?= Date: Thu, 21 May 2026 23:44:38 +0200 Subject: [PATCH] fix headings fucking up the infobox --- scss/westgate/_wiki-prose.scss | 7 ++++ tests/wiki-infobox-heading-layer.test.js | 53 ++++++++++++++++++++++++ 2 files changed, 60 insertions(+) create mode 100644 tests/wiki-infobox-heading-layer.test.js diff --git a/scss/westgate/_wiki-prose.scss b/scss/westgate/_wiki-prose.scss index 54e17e2..3d59e94 100644 --- a/scss/westgate/_wiki-prose.scss +++ b/scss/westgate/_wiki-prose.scss @@ -148,6 +148,7 @@ --wiki-fab-danger-bg: rgba(142, 52, 56, 0.16); --wiki-editor-table-handle-layer: 4; + --wiki-infobox-layer: 1; --wiki-editor-floating-toolbar-layer: 20; --wiki-editor-toolbar-layer: 30; @@ -252,6 +253,12 @@ -webkit-mask-mode: alpha; } +.westgate-wiki .wiki-article-prose .wiki-infobox, +.westgate-wiki-compose .wiki-editor__content .wiki-infobox { + position: relative; + z-index: var(--wiki-infobox-layer, 1); +} + .westgate-wiki .wiki-article-prose :where(h1, h2, h3, h4), .westgate-wiki-compose .wiki-article-prose .ck.ck-editor__editable_inline.ck-content :where(h1, h2, h3, h4), .westgate-wiki-compose .ck.ck-editor__editable_inline.wiki-article-prose.ck-content :where(h1, h2, h3, h4) { diff --git a/tests/wiki-infobox-heading-layer.test.js b/tests/wiki-infobox-heading-layer.test.js new file mode 100644 index 0000000..53f5fa5 --- /dev/null +++ b/tests/wiki-infobox-heading-layer.test.js @@ -0,0 +1,53 @@ +const assert = require("assert"); +const fs = require("fs"); +const path = require("path"); + +const stylesheet = fs.readFileSync( + path.join(__dirname, "..", "scss", "westgate", "_wiki-prose.scss"), + "utf8" +); + +function ruleHasDeclaration(selector, declaration) { + const rulePattern = /([^{}]+)\{([^{}]*)\}/g; + let match; + while ((match = rulePattern.exec(stylesheet)) !== null) { + const selectors = match[1].split(",").map(value => value.trim()); + const body = match[2]; + if (selectors.includes(selector) && body.includes(declaration)) { + return true; + } + } + return false; +} + +function matchingRuleHasDeclaration(selectorPattern, declaration) { + const rulePattern = /([^{}]+)\{([^{}]*)\}/g; + let match; + while ((match = rulePattern.exec(stylesheet)) !== null) { + const selectors = match[1].split(",").map(value => value.trim()); + const body = match[2]; + if (selectors.some(selector => selectorPattern.test(selector)) && body.includes(declaration)) { + return true; + } + } + return false; +} + +[ + ".westgate-wiki .wiki-article-prose .wiki-infobox", + ".westgate-wiki-compose .wiki-editor__content .wiki-infobox", +].forEach(selector => { + assert( + ruleHasDeclaration(selector, "position: relative"), + `${selector} should establish a positioned layer above overlapping prose headings` + ); + assert( + ruleHasDeclaration(selector, "z-index: var(--wiki-infobox-layer, 1)"), + `${selector} should stay selectable when a positioned heading's full block box overlaps it` + ); +}); + +assert( + !matchingRuleHasDeclaration(/\bh[1-6]\b/, "pointer-events: none"), + "Infobox/heading selection should not be fixed by disabling pointer events on prose content" +);