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

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <script src="../../resources/js-test.js"></script>
   5 <style>
   6 :required {
   7     background-color: red;
   8 }
   9 :optional {
  10     background-color: red;
  11 }
  12 input, fieldset, legend, label, datalist, optgroup, option, keygen, output, meter, progress {
  13     background-color: lime;
  14 }
  15 </style>
  16 </head>
  17 <body>
  18 <p id="description"></p>
  19
  20 <div id=victims>
  21 <fieldset id=fieldset>
  22 <legend id=legend></legend>
  23 </fieldset>
  24 <label id=label></label>
  25 <datalist id=datalist></datalist>
  26 <select>
  27 <optgroup id=optgroup></optgroup>
  28 <option id=option></option>
  29 </select>
  30 <keygen id=keygen>
  31 <output id=output></output>
  32 <meter id=meter></meter>
  33 <progress id=progress></progress>
  34 </div>
  35
  36 <div id="console"></div>
  37 <script>
  38 description('Check cases that :required/:optional classes are not applied');
  39
  40 function getBackgroundColor(id) {
  41     var element = document.getElementById(id);
  42     return document.defaultView.getComputedStyle(element, null).getPropertyValue('background-color')
  43 }
  44
  45 var identifiers = [
  46     'fieldset',
  47     'legend',
  48     'label',
  49     'datalist',
  50     'optgroup',
  51     'option',
  52     'keygen',
  53     'output',
  54     'meter',
  55     'progress',
  56 ];
  57
  58 var normalColor = 'rgb(0, 255, 0)';
  59 for (var i = 0; i < identifiers.length; i++)
  60     shouldBe('getBackgroundColor("' + identifiers[i] + '")', 'normalColor');
  61
  62 document.getElementById('victims').innerHTML = '';
  63 </script>
  64 </body>
  65 </html>