| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../../resources/js-test-pre.js"></script> |
| <style> |
| :invalid { background: rgb(255, 0, 0); } |
| :valid { background: rgb(0, 0, 255); } |
| </style> |
| </head> |
| <body> |
| <script> |
| description('Check if :valid/:invalid CSS pseudo selectors are lively applied'); |
| |
| function $(id) { |
| return document.getElementById(id); |
| } |
| |
| function backgroundOf(element) { |
| return document.defaultView.getComputedStyle(element, null).getPropertyValue('background-color'); |
| } |
| |
| var invalidColor = 'rgb(255, 0, 0)'; |
| var validColor = 'rgb(0, 0, 255)'; |
| |
| var parent = document.createElement('div'); |
| document.body.appendChild(parent); |
| |
| debug('Removing a checked radio button from a required radio button group by a DOM tree mutation:'); |
| parent.innerHTML = '<input type=radio name=group1 required id=radio1>' + |
| '<input type=radio name=group1 checked id=radio2>'; |
| shouldBe('backgroundOf($("radio1"))', 'validColor'); |
| shouldBe('parent.removeChild($("radio2")); backgroundOf($("radio1"))', 'invalidColor'); |
| parent.innerHTML = '<input type=radio name=group1 required checked id=radio1>' + |
| '<input type=radio name=group1 required id=radio2>' + |
| '<input type=radio name=group1 required id=radio3>'; |
| var radio2 = $('radio2'); |
| shouldBeFalse('$("radio1").remove(); radio2.matches(":valid")'); |
| shouldBeFalse('radio2.remove(); radio2.matches(":valid")'); |
| debug(''); |
| |
| debug('Removing a checked radio button from a required radio button group by name attribute change:'); |
| parent.innerHTML = '<input type=radio name=group1 required id=radio1>' + |
| '<input type=radio name=group1 checked id=radio2>'; |
| shouldBe('$("radio2").name = "group2"; backgroundOf($("radio1"))', 'invalidColor'); |
| debug(''); |
| |
| debug('Removing a checked radio button from a required radio button group by type change:'); |
| parent.innerHTML = '<input type=radio name=group1 required id=radio1>' + |
| '<input type=radio name=group1 checked id=radio2>'; |
| shouldBe('$("radio2").type = "text"; backgroundOf($("radio1"))', 'invalidColor'); |
| debug(''); |
| |
| debug('Make a radio button group required by required attribute change:'); |
| parent.innerHTML = '<input type=radio name=group1 id=radio1>' + |
| '<input type=radio name=group1 id=radio2>'; |
| shouldBe('backgroundOf($("radio1"))', 'validColor'); |
| shouldBe('backgroundOf($("radio2"))', 'validColor'); |
| shouldBe('$("radio1").required = true; backgroundOf($("radio1"))', 'invalidColor'); |
| shouldBe('backgroundOf($("radio2"))', 'invalidColor'); |
| debug(''); |
| |
| debug('Make a radio button group not required by required attribute change:'); |
| parent.innerHTML = '<input type=radio required name=group1 id=radio1>' + |
| '<input type=radio name=group1 id=radio2>'; |
| shouldBe('backgroundOf($("radio1"))', 'invalidColor'); |
| shouldBe('backgroundOf($("radio2"))', 'invalidColor'); |
| shouldBe('$("radio1").required = false; backgroundOf($("radio1"))', 'validColor'); |
| shouldBe('backgroundOf($("radio2"))', 'validColor'); |
| debug(''); |
| |
| |
| debug('Removing one of multiple required attributes:'); |
| parent.innerHTML = '<input type=radio required name=group1 id=radio1>' + |
| '<input type=radio required name=group1 id=radio2>'; |
| shouldBe('backgroundOf($("radio1"))', 'invalidColor'); |
| shouldBe('backgroundOf($("radio2"))', 'invalidColor'); |
| shouldBe('$("radio1").required = false; backgroundOf($("radio1"))', 'invalidColor'); |
| shouldBe('backgroundOf($("radio2"))', 'invalidColor'); |
| debug(''); |
| |
| debug('Adding a radio button with the required attribute to a radio button group:'); |
| parent.innerHTML = '<input type=radio name=group1 id=radio1>'; |
| shouldBe('backgroundOf($("radio1"))', 'validColor'); |
| var requiredRadioButton = document.createElement('input'); |
| requiredRadioButton.type = 'radio'; |
| requiredRadioButton.name = 'group1'; |
| requiredRadioButton.required = true; |
| shouldBe('parent.appendChild(requiredRadioButton); backgroundOf($("radio1"))', 'invalidColor'); |
| shouldBe('backgroundOf(requiredRadioButton)', 'invalidColor'); |
| debug(''); |
| |
| debug('Removing a radio button with the required attribute from a radio button group:'); |
| shouldBe('parent.removeChild(requiredRadioButton); backgroundOf($("radio1"))', 'validColor'); |
| debug(''); |
| |
| parent.innerHTML = ''; |
| </script> |
| <script src="../../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
