updated test page

w3c · Jun 18, 2024 · 0cd64aa · 0cd64aa
1 parent f50b91a
commit 0cd64aa
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 6 deletions.
diff --git a/content/practices/high-contrast/test/index.html b/content/practices/high-contrast/test/index.html
@@ -3,13 +3,83 @@
 <head>
   <title>High Contrast Testing Page</title>
   <style>
+
+    li {
+      padding: 0.125em;
+      max-width: 15em;
+    }
+
+    .link5 {
+      color: #cccccc;
+      background: #444444;
+    }
+
+    .link5 a,
+    .link5 a:visited {
+      display: inline-block;
+      padding-left: 0.125em;
+      padding-right: 0.125em;
+      color: #444444;
+      background: #cccccc;
+      text-decoration: none;
+    }
+
+    .link6 {
+      color: black;
+      background: DarkOrange;
+    }
+
+    .link6 a,
+    .link6 a:visited {
+      display: inline-block;
+      padding-left: 0.125em;
+      padding-right: 0.125em;
+      color: DarkOrange;
+      background: black;
+      text-decoration: none;
+    }
+
+    .link7 {
+      color: LemonChiffon;
+      background: DarkRed;
+    }
+
+    .link7 a,
+    .link7 a:visited {
+      display: inline-block;
+      padding-left: 0.125em;
+      padding-right: 0.125em;
+      color: DarkRed;
+      background: LemonChiffon;
+      text-decoration: none;
+    }
+
+    .link8 {
+      color: Gold;
+      background: Maroon;
+    }
+
+    .link8 a,
+    .link8 a:visited {
+      display: inline-block;
+      padding-left: 0.125em;
+      padding-right: 0.125em;
+      color: Maroon;
+      background: Gold;
+      text-decoration: none;
+    }
+
     .background {
       display: block;
-      height: 400px;
+      height: 150px;
       width: 400px;
       background-image: url('./green-arrow.jpg');
       background-position: center;
     }
+
+    div img {
+      width: 50%;
+    }
   </style>
 </head>
 <body>
@@ -18,15 +88,61 @@
 <main>
   <h1>High Contrast Testing Page</h1>
 
-  <input type="image" src="green-arrow.jpg" style="height: 40px" alt="Next"/>
+  <h2>Links</h2>
+
+  <h3>Browser Defaults</h3>
+
+  <ul>
+    <li>Follow <a href="#">Link 1</a> to a new page.</li>
+    <li>Follow <a href="#">Link 2</a> to a new page.</li>
+    <li>Follow <a href="#">Link 3</a> to a new page.</li>
+    <li>Follow <a href="#">Link 4</a> to a new page.</li>
+  </ul>
+
+  <h3>Author Set Colors</h3>
+
+  <ul>
+    <li class="link5">Follow <a href="#">Link 5</a> to a new page.</li>
+    <li class="link6">Follow <a href="#">Link 6</a> to a new page.</li>
+    <li class="link7">Follow <a href="#">Link 7</a> to a new page.</li>
+    <li class="link8">Follow <a href="#">Link 8</a> to a new page.</li>
+  </ul>
+
+  <h2>Buttons</h2>
+
+  <div>
+    <input type="image" src="green-arrow.jpg" style="height: 40px" alt="Next"/>
+  </div>
 
-  <button>
-    <img src="green-arrow.jpg" alt="Next" style="height: 40px" />
-  </button>
+  <div>
+    <button>
+      <img src="green-arrow.jpg" alt="Next" style="height: 40px; width: 40px" />
+    </button>
+  </div>
 
-  <div class="background">
+  <div>
+    <label>Name: <input type="text"></label>
   </div>
 
+  <div>
+    <label>Options:
+      <select>
+        <option>Option 1</option>
+        <option>Option 2</option>
+        <option>Option 3</option>
+      </select>
+    </label>
+  </div>
+
+  <h2>Images</h2>
+
+  <div><img src="info-1.webp"/></div>
+
+  <div><img src="info-2.webp"/></div>
+
+  <div class="background">Background Image</div>
+
+
 </main>
 
 </body>

diff --git a/content/practices/high-contrast/test/info-1.webp b/content/practices/high-contrast/test/info-1.webp
diff --git a/content/practices/high-contrast/test/info-2.webp b/content/practices/high-contrast/test/info-2.webp