third_party/WebKit/LayoutTests/fast/css/pseudo-required-optional-006.html

   1 <html>
   2 <head>
   3 <title>required/optional CSS pseudoclasses part 6</title>
   4 <style>
   5  input:optional { background: red; }
   6  input { background: red; }
   7  input:required { background: lime; }
   8 </style>
   9 <script language="JavaScript" type="text/javascript">
  10     function log(message) {
  11         document.getElementById("console").innerHTML += "<li>"+message+"</li>";
  12     }
  13
  14     function test() {
  15         if (window.testRunner)
  16             testRunner.dumpAsText();
  17
  18         v = document.getElementsByName("victim");
  19
  20         for (i = 0; i < v.length; i++)
  21             if (document.defaultView.getComputedStyle(v[i], null).getPropertyValue('background-color') == "rgb(0, 255, 0)")
  22                 log("SUCCESS");
  23             else
  24                 log("FAILURE");
  25     }
  26 </script>
  27 </head>
  28 <body onload="test()">
  29 <p>All controls should have a green background.</p>
  30 <input type="text" name="victim" required/>
  31 <input type="password" name="victim" required/>
  32 <input type="search" name="victim" required/>
  33 <input type="url" name="victim" required/>
  34 <input type="telephone" name="victim" required/>
  35 <input type="email" name="victim" required/>
  36 <input type="number" name="victim" required/>
  37 <input type="checkbox" name="victim" required/>
  38 <input type="radio" name="victim" required/>
  39 <input type="file" name="victim" required/>
  40
  41 <hr>
  42 <ol id="console"></ol>
  43 </body>
  44 </html>