udpated sample styling

w3c · May 23, 2024 · 43c3089 · 43c3089
1 parent 11fa5aa
commit 43c3089
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/content/practices/high-contrast/high-contrast-practice.html b/content/practices/high-contrast/high-contrast-practice.html
@@ -16,6 +16,11 @@
       table.data img {
         border: 1px solid gray;
       }
+      #samples div.sample {
+        height: 30px;
+        width: 50px;
+        border: 1px solid gray;
+      }
     </style>
   </head>
   <body>
@@ -237,8 +242,10 @@ <h3 id="system-colors">System Colors</h3>
               tdv.textContent = v.value;
               tr.appendChild(tdv);
               const tds = document.createElement('td');
-              tds.style.backgroundColor = v.value;
-              tds.textContent = "  ";
+              const div = document.createElement('div');
+              div.classList.add('sample');
+              div.style.backgroundColor = v.value;
+              tds.appendChild(div);
               tr.appendChild(tds);
               const tdc = document.createElement('td');
               tdc.style.fontFamily = 'monospace';
@@ -248,7 +255,7 @@ <h3 id="system-colors">System Colors</h3>
               tdd.textContent = v.desc;
               tr.appendChild(tdd);
               tbodyNode.appendChild(tr);
-              const cStyle = window.getComputedStyle(tds);
+              const cStyle = window.getComputedStyle(div);
               const colorHex = rgb2Hex(cStyle.backgroundColor);
               tdc.textContent =colorHex;
             }