third_party/WebKit/LayoutTests/fast/forms/fieldset-pseudo-valid-style.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../resources/js-test.js"></script>
   5 <style>
   6 :invalid { background: rgb(255, 0, 0); }
   7 :valid { background: rgb(0, 255, 0); }
   8 fieldset:invalid input[type=submit] { background-color: rgb(127, 0, 0); }
   9 fieldset:valid input[type=submit] { background-color: rgb(0, 127, 0); }
  10 </style>
  11 </head>
  12 <body>
  13 <script>
  14 description('Check if :valid/:invalid CSS pseudo selectors are lively applied for fieldsets');
  15
  16 function $(id) {
  17     return document.getElementById(id);
  18 }
  19
  20 function backgroundOf(element) {
  21     return document.defaultView.getComputedStyle(element, null).getPropertyValue('background-color');
  22 }
  23
  24 var invalidColor = 'rgb(255, 0, 0)';
  25 var validColor = 'rgb(0, 255, 0)';
  26 var subInvalidColor = 'rgb(127, 0, 0)';
  27 var subValidColor = 'rgb(0, 127, 0)';
  28
  29 var parent = document.createElement('div');
  30 document.body.appendChild(parent);
  31
  32 debug('Removing and adding required text inputs and modifying their value by a DOM tree mutation:');
  33 parent.innerHTML = '<fieldset id=fieldset1><input type=text id=input1 required><input type=text id=input2 required value=a><input type=submit id=sub1></fieldset>';
  34 var fieldset1 = $('fieldset1');
  35 var input1 = $('input1');
  36 var input2 = $('input2');
  37 var sub1 = $('sub1');
  38 shouldBe('backgroundOf(fieldset1)', 'invalidColor');
  39 shouldBe('backgroundOf(sub1)', 'subInvalidColor');
  40 shouldBe('fieldset1.removeChild(input1); backgroundOf(fieldset1)', 'validColor');
  41 shouldBe('backgroundOf(sub1)', 'subValidColor');
  42 shouldBe('fieldset1.appendChild(input1); backgroundOf(fieldset1)', 'invalidColor');
  43 shouldBe('backgroundOf(sub1)', 'subInvalidColor');
  44 shouldBe('input1.setAttribute("value", "a"); backgroundOf(fieldset1)', 'validColor');
  45 shouldBe('backgroundOf(sub1)', 'subValidColor');
  46 shouldBe('input2.setAttribute("value", ""); backgroundOf(fieldset1)', 'invalidColor');
  47 shouldBe('backgroundOf(sub1)', 'subInvalidColor');
  48 debug('')
  49
  50 debug('Disabling and marking inputs readonly by a DOM tree mutation:');
  51 parent.innerHTML = '<fieldset id=fieldset1><input type=text id=input1 required><input type=text id=input2 required value=a><input type=submit id=sub1></fieldset>';
  52 var fieldset1 = $('fieldset1');
  53 var input1 = $('input1');
  54 var sub1 = $('sub1');
  55 shouldBe('backgroundOf(fieldset1)', 'invalidColor');
  56 shouldBe('backgroundOf(sub1)', 'subInvalidColor');
  57 shouldBe('input1.disabled=1; backgroundOf(fieldset1)', 'validColor');
  58 shouldBe('backgroundOf(sub1)', 'subValidColor');
  59 shouldBe('input1.disabled=0; backgroundOf(fieldset1)', 'invalidColor');
  60 shouldBe('backgroundOf(sub1)', 'subInvalidColor');
  61 shouldBe('input1.setAttribute("readonly", "1"); backgroundOf(fieldset1)', 'validColor');
  62 shouldBe('backgroundOf(sub1)', 'subValidColor');
  63 debug('')
  64
  65 debug('Adding a required text input that is not a direct child of the fieldset:');
  66 parent.innerHTML = '<fieldset id=fieldset1></fieldset>';
  67 var fieldset1 = $('fieldset1');
  68 shouldBe('backgroundOf(fieldset1)', 'validColor');
  69 var div1 = document.createElement('div');
  70 var input1 = document.createElement('input');
  71 input1.setAttribute('type', 'text');
  72 input1.setAttribute('required', '');
  73 fieldset1.appendChild(div1);
  74 shouldBe('div1.appendChild(input1); backgroundOf(fieldset1)', 'invalidColor');
  75 debug('');
  76
  77 debug('Nested fieldsets:');
  78 parent.innerHTML = '<fieldset id=fieldset0>'
  79     + '<fieldset id=fieldset1><input type=text id=input1 required></fieldset>'
  80     + '<fieldset id=fieldset2><input type=text id=input2></fieldset>'
  81     + '</fieldset>';
  82 shouldBe('backgroundOf($("fieldset0"))', 'invalidColor');
  83 shouldBe('backgroundOf($("fieldset1"))', 'invalidColor');
  84 shouldBe('backgroundOf($("fieldset2"))', 'validColor');
  85 var input1 = $('input1');
  86 shouldBe('input1.setAttribute("value", "v"); backgroundOf($("fieldset0"))', 'validColor');
  87 shouldBe('backgroundOf($("fieldset1"))', 'validColor');
  88 shouldBe('backgroundOf($("fieldset2"))', 'validColor');
  89 var input2 = $('input2');
  90 shouldBe('input2.setAttribute("required", ""); backgroundOf($("fieldset0"))', 'invalidColor');
  91 shouldBe('backgroundOf($("fieldset1"))', 'validColor');
  92 shouldBe('backgroundOf($("fieldset2"))', 'invalidColor');
  93 debug('');
  94
  95 debug('Render multiple fieldsets and move an invalid input from one to another:');
  96 parent.innerHTML = '<fieldset id=fieldset1><input type=text id=input1 required><input type=text id=input2 required value="a"></fieldset>'
  97     + '<fieldset id=fieldset2><input type=text id=input3><input type=text id=input4 required value="a"></fieldset>'
  98     + '<fieldset id=fieldset3></fieldset>';
  99 shouldBe('backgroundOf($("fieldset1"))', 'invalidColor');
 100 shouldBe('backgroundOf($("fieldset2"))', 'validColor');
 101 shouldBe('backgroundOf($("fieldset3"))', 'validColor');
 102 var input1 = $('input1');
 103 var fieldset1 = $('fieldset1');
 104 var fieldset3 = $('fieldset3');
 105 fieldset1.removeChild(input1);
 106 fieldset3.appendChild(input1);
 107 shouldBe('backgroundOf($("fieldset1"))', 'validColor');
 108 shouldBe('backgroundOf($("fieldset3"))', 'invalidColor');
 109 debug('');
 110
 111 debug('Ensure that invalid event was not triggered on style evaluation:');
 112 var val = '0';
 113 parent.innerHTML = '<fieldset id=fieldset1><input type=text id=input1 required oninvalid="val=\'1\';"></fieldset>';
 114 var fieldset1 = $('fieldset1');
 115 var input1 = $('input1');
 116 shouldBe('backgroundOf(fieldset1)', 'invalidColor');
 117 shouldBeEqualToString('val', '0');
 118 shouldBeEqualToString('input1.checkValidity(); val', '1');
 119 debug('');
 120
 121 parent.innerHTML = '';
 122 </script>
 123 </body>
 124 </html>