web: lab: adds draw-sample-background option

2 files changed, 15 insertions, 4 deletions

diff --git a/docs/lab/index.html b/docs/lab/index.html
index 8a9ad5c7d..f98b9d531 100644
--- a/docs/lab/index.html
+++ b/docs/lab/index.html
@@ -49,6 +49,10 @@ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
           <b>☀</b>
           <input type="checkbox" name="invert-colors">
         </label>
+        <label title="Draw background behind samples">
+          <b>■</b>
+          <input type="checkbox" name="draw-sample-bg">
+        </label>
       </div>
 
       <label class="label-and-value">
@@ -1095,12 +1099,15 @@ function main() {
   }, {passive:false,capture:true})
 
   vars.bind("invert-colors", (e, on) => {
-    if (defaultColorSceme == "dark") {
+    if (defaultColorSceme == "dark")
       on = !on
-    }
     document.documentElement.classList.toggle('color-scheme-dark', on)
   })
 
+  vars.bind("draw-sample-bg", (e, on) => {
+    document.documentElement.classList.toggle('draw-sample-background', on)
+  })
+
   let spaaSelect = vars.bind('antialias', (e, v) => {
     switch (v) {
       case 'subpixel': {
diff --git a/docs/lab/lab.css b/docs/lab/lab.css
index a4f603b11..bf1ff3a0b 100644
--- a/docs/lab/lab.css
+++ b/docs/lab/lab.css
@@ -653,9 +653,10 @@ body.italic samples {
 }
   sample {
     flex: 1 1 50%;
-    margin: 0;
+    /*margin: 0;*/
     /*white-space: pre;*/
-    padding: 2rem;
+    margin: calc(0.5em + 1rem);
+    padding: 0;
     min-width:100px;
     /*max-width:450px;*/
     white-space: pre-wrap;
@@ -663,6 +664,9 @@ body.italic samples {
     overflow-wrap: break-word;
     color: var(--fgColor);
   }
+  :root.draw-sample-background sample {
+    background: var(--surface2-color-bg-active);
+  }
   /*body.secondarySampleDisabled sample { flex-basis: auto; }*/
     sample p {
       white-space: pre-wrap;