| Index: LayoutTests/fast/forms/form-pseudo-valid-style.html
|
| diff --git a/LayoutTests/fast/forms/form-pseudo-valid-style.html b/LayoutTests/fast/forms/form-pseudo-valid-style.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..a62fddb3f03f1aa2e3cbdcb7d00b4f11f99d601f
|
| --- /dev/null
|
| +++ b/LayoutTests/fast/forms/form-pseudo-valid-style.html
|
| @@ -0,0 +1,80 @@
|
| +<!DOCTYPE html>
|
| +<html>
|
| +<head>
|
| +<script src="../../resources/js-test.js"></script>
|
| +<style>
|
| +:invalid { background: rgb(255, 0, 0); }
|
| +:valid { background: rgb(0, 255, 0); }
|
| +form:invalid input[type=submit] { background-color: rgb(127, 0, 0); }
|
| +form:valid input[type=submit] { background-color: rgb(0, 127, 0); }
|
| +</style>
|
| +</head>
|
| +<body>
|
| +<script>
|
| +description('Check if :valid/:invalid CSS pseudo selectors are lively applied for forms');
|
| +
|
| +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, 255, 0)';
|
| +var subInvalidColor = 'rgb(127, 0, 0)';
|
| +var subValidColor = 'rgb(0, 127, 0)';
|
| +
|
| +var parent = document.createElement('div');
|
| +document.body.appendChild(parent);
|
| +
|
| +debug('Removing and adding required text inputs and modifying ther value by a DOM tree mutation:');
|
| +parent.innerHTML = '<form id=form1><input type=text id=input1 required><input type=text id=input2 required value="a"><input type=submit id=sub1></form>';
|
| +var form1 = $('form1');
|
| +var input1 = $('input1');
|
| +var input2 = $('input2');
|
| +var sub1 = $('sub1');
|
| +shouldBe('backgroundOf(form1)', 'invalidColor');
|
| +shouldBe('backgroundOf(sub1)', 'subInvalidColor');
|
| +shouldBe('form1.removeChild(input1); backgroundOf(form1)', 'validColor');
|
| +shouldBe('backgroundOf(sub1)', 'subValidColor');
|
| +shouldBe('form1.appendChild(input1); backgroundOf(form1)', 'invalidColor');
|
| +shouldBe('backgroundOf(sub1)', 'subInvalidColor');
|
| +shouldBe('input1.setAttribute("value", "a"); backgroundOf(form1)', 'validColor');
|
| +shouldBe('backgroundOf(sub1)', 'subValidColor');
|
| +shouldBe('input2.setAttribute("value", ""); backgroundOf(form1)', 'invalidColor');
|
| +shouldBe('backgroundOf(sub1)', 'subInvalidColor');
|
| +debug('')
|
| +
|
| +debug('Adding a required text input that is not a direct child of the form:');
|
| +parent.innerHTML = '<form id=form1></form>';
|
| +var form1 = $('form1');
|
| +shouldBe('backgroundOf(form1)', 'validColor');
|
| +var div1 = document.createElement('div');
|
| +var input1 = document.createElement('input');
|
| +input1.setAttribute('type', 'text');
|
| +input1.setAttribute('required', '');
|
| +form1.appendChild(div1);
|
| +shouldBe('div1.appendChild(input1); backgroundOf(form1)', 'invalidColor');
|
| +debug('');
|
| +
|
| +debug('Render multiple forms and move an invalid input from one to another:');
|
| +parent.innerHTML = '<form id=form1><input type=text id=input1 required><input type=text id=input2 required value="a"></form>'
|
| + + '<form id=form2><input type=text id=input3><input type=text id=input4 required value="a"></form>'
|
| + + '<form id=form3></form>';
|
| +shouldBe('backgroundOf($("form1"))', 'invalidColor');
|
| +shouldBe('backgroundOf($("form2"))', 'validColor');
|
| +shouldBe('backgroundOf($("form3"))', 'validColor');
|
| +var input1 = $('input1');
|
| +var form1 = $('form1');
|
| +var form3 = $('form3');
|
| +input1.setAttribute("form", "form3");
|
| +shouldBe('backgroundOf($("form1"))', 'validColor');
|
| +shouldBe('backgroundOf($("form3"))', 'invalidColor');
|
| +debug('');
|
| +
|
| +parent.innerHTML = '';
|
| +</script>
|
| +</body>
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 646543004:
Implement :valid and :invalid pseudoclass for <form> (resubmitting) (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master