updated test page

w3c · Jun 19, 2024 · 57f8129 · 57f8129
1 parent bb95302
commit 57f8129
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 19 deletions.
diff --git a/content/practices/high-contrast/test/index.html b/content/practices/high-contrast/test/index.html
@@ -10,9 +10,10 @@
 <main>
   <h1>High Contrast Testing Page</h1>
 
+  <h2>Media Query Settings</h2>
   <div>
     <code>
-      Prefers-contrast:
+      prefers-contrast:
       <span id="id-ic-custom">custom</span>
       <span id="id-ic-less">less</span>
       <span id="id-ic-more">more</span>
@@ -23,9 +24,9 @@ <h1>High Contrast Testing Page</h1>
   <div>
     <code>
       prefers-color-theme:
-      <span id="id-ct-light">light</span>
-      <span id="id-ct-dark">dark</span>
-      <span id="id-ct-undefined">undefined</span>
+      <span id="id-pcs-light">light</span>
+      <span id="id-pcs-dark">dark</span>
+      <span id="id-pcs-undefined">undefined</span>
     </code>
   </div>
 
@@ -37,7 +38,7 @@ <h1>High Contrast Testing Page</h1>
     </code>
   </div>
 
-  <h2>Links</h2>
+  <h2>Link Styling</h2>
 
   <h3>Browser Defaults</h3>
 
@@ -57,7 +58,7 @@ <h3>Author Set Colors</h3>
     <li class="link8">Follow <a href="#">Link 8</a> to a new page.</li>
   </ul>
 
-  <h2>Buttons</h2>
+  <h2>Button Styling</h2>
 
   <div>
     <input type="image" src="./green-arrow.jpg" style="height: 40px" alt="Next"/>
@@ -83,7 +84,7 @@ <h2>Buttons</h2>
     </label>
   </div>
 
-  <h2>Images</h2>
+  <h2>Image Styling</h2>
 
   <div><img src="./info-1.webp"/></div>
 

diff --git a/content/practices/high-contrast/test/test.css b/content/practices/high-contrast/test/test.css
@@ -102,8 +102,6 @@ li {
 }
 
 
-}
-
 div img {
   width: 50%;
 }
@@ -130,37 +128,37 @@ div img {
   }
 }
 
-/* prefers-color-theme */
+/* prefers-color-scheme */
 
-#id-ct-undefined {
+#id-pcs-undefined {
   display: inline;
 }
 
-#id-ct-light {
+#id-pcs-light {
   display: none;
 }
 
-@media (prefers-color-theme: light) {
-  #id-ct-light {
+@media (prefers-color-scheme: light) {
+  #id-pcs-light {
     display: inline;
   }
 
-  #id-ct-undefined {
+  #id-pcs-undefined {
     display: none;
   }
 
 }
 
-#id-ct-dark {
+#id-pcs-dark {
   display: none;
 }
 
-@media (prefers-color-theme: dark) {
-  #id-ct-dark {
+@media (prefers-color-scheme: dark) {
+  #id-pcs-dark {
     display: inline;
   }
 
-  #id-ct-undefined {
+  #id-pcs-undefined {
     display: none;
   }