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

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