From 3d378f9e9960191be6ccce7a22ada305feb7e09e Mon Sep 17 00:00:00 2001
From: Dale Whinham <daleyo@gmail.com>
Date: Fri, 6 Aug 2021 14:41:38 +0100
Subject: [PATCH] Fix GroupBox border for Firefox

Firefox's new WebRender engine seems to have a bug with fieldsets styled
with inset box-shadows
(https://bugzilla.mozilla.org/show_bug.cgi?id=1496538).

As a workaround, use a tiny .SVG as a sliced border-image to draw the border.

Fixes #42.
---
 icon/groupbox-border.svg | 4 ++++
 style.css                | 4 +---
 2 files changed, 5 insertions(+), 3 deletions(-)
 create mode 100644 icon/groupbox-border.svg

diff --git a/icon/groupbox-border.svg b/icon/groupbox-border.svg
new file mode 100644
index 0000000..38a6221
--- /dev/null
+++ b/icon/groupbox-border.svg
@@ -0,0 +1,4 @@
+<svg width="5" height="5" viewBox="0 0 5 5" fill="grey" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H5V5H0V2H2V3H3V2H0" fill="white" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H4V4H0V1H1V3H3V1H0" fill="#808080" />
+</svg>
diff --git a/style.css b/style.css
index 0f83f4d..cba0017 100644
--- a/style.css
+++ b/style.css
@@ -278,9 +278,7 @@ button:disabled,
 }
 
 fieldset {
-  border: none;
-  box-shadow: inset -1px -1px var(--button-highlight), inset -2px 1px var(--button-shadow),
-    inset 1px -2px var(--button-shadow), inset 2px 2px var(--button-highlight);
+  border-image: svg-load("./icon/groupbox-border.svg") 2;
   padding: calc(2 * var(--border-width) + var(--element-spacing));
   padding-block-start: var(--element-spacing);
   margin: 0;