LayoutTests/fast/forms/fieldset-pseudo-valid-style.html - Issue 646273004: Implement :valid and :invalid pseudoclass for <fieldset>

Unified Diff: LayoutTests/fast/forms/fieldset-pseudo-valid-style.html

Issue 646273004: Implement :valid and :invalid pseudoclass for <fieldset> (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Pull Created 6 years, 2 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

« no previous file with comments | « LayoutTests/fast/css/pseudo-valid-unapplied-expected.txt ('k') | LayoutTests/fast/forms/fieldset-pseudo-valid-style-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: LayoutTests/fast/forms/fieldset-pseudo-valid-style.html

diff --git a/LayoutTests/fast/forms/fieldset-pseudo-valid-style.html b/LayoutTests/fast/forms/fieldset-pseudo-valid-style.html

new file mode 100644

index 0000000000000000000000000000000000000000..1edcadae742b87bb71a10d7c09c7073c1e035523

--- /dev/null

+++ b/LayoutTests/fast/forms/fieldset-pseudo-valid-style.html

@@ -0,0 +1,109 @@

+<!DOCTYPE html>

+<html>

+<head>

+<script src="../../resources/js-test.js"></script>

+<style>

+:invalid { background: rgb(255, 0, 0); }

+:valid { background: rgb(0, 255, 0); }

+fieldset:invalid input[type=submit] { background-color: rgb(127, 0, 0); }

+fieldset: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 fieldsets');

+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 = '<fieldset id=fieldset1><input type=text id=input1 required><input type=text id=input2 required value=a><input type=submit id=sub1></fieldset>';

+var fieldset1 = $('fieldset1');

+var input1 = $('input1');

+var input2 = $('input2');

+var sub1 = $('sub1');

+shouldBe('backgroundOf(fieldset1)', 'invalidColor');

+shouldBe('backgroundOf(sub1)', 'subInvalidColor');

+shouldBe('fieldset1.removeChild(input1); backgroundOf(fieldset1)', 'validColor');

+shouldBe('backgroundOf(sub1)', 'subValidColor');

+shouldBe('fieldset1.appendChild(input1); backgroundOf(fieldset1)', 'invalidColor');

+shouldBe('backgroundOf(sub1)', 'subInvalidColor');

+shouldBe('input1.setAttribute("value", "a"); backgroundOf(fieldset1)', 'validColor');

+shouldBe('backgroundOf(sub1)', 'subValidColor');

+shouldBe('input2.setAttribute("value", ""); backgroundOf(fieldset1)', 'invalidColor');

+shouldBe('backgroundOf(sub1)', 'subInvalidColor');

+debug('')

+debug('Adding a required text input that is not a direct child of the fieldset:');

+parent.innerHTML = '<fieldset id=fieldset1></fieldset>';

+var fieldset1 = $('fieldset1');

+shouldBe('backgroundOf(fieldset1)', 'validColor');

+var div1 = document.createElement('div');

+var input1 = document.createElement('input');

+input1.setAttribute('type', 'text');

+input1.setAttribute('required', '');

+fieldset1.appendChild(div1);

+shouldBe('div1.appendChild(input1); backgroundOf(fieldset1)', 'invalidColor');

+debug('');

+debug('Nested fieldsets:');

+parent.innerHTML = '<fieldset id=fieldset0>'

+ + '<fieldset id=fieldset1><input type=text id=input1 required></fieldset>'

+ + '<fieldset id=fieldset2><input type=text id=input2></fieldset>'

+ + '</fieldset>';

+shouldBe('backgroundOf($("fieldset0"))', 'invalidColor');

+shouldBe('backgroundOf($("fieldset1"))', 'invalidColor');

+shouldBe('backgroundOf($("fieldset2"))', 'validColor');

+var input1 = $('input1');

+shouldBe('input1.setAttribute("value", "v"); backgroundOf($("fieldset0"))', 'validColor');

+shouldBe('backgroundOf($("fieldset1"))', 'validColor');

+shouldBe('backgroundOf($("fieldset2"))', 'validColor');

+var input2 = $('input2');

+shouldBe('input2.setAttribute("required", ""); backgroundOf($("fieldset0"))', 'invalidColor');

+shouldBe('backgroundOf($("fieldset1"))', 'validColor');

+shouldBe('backgroundOf($("fieldset2"))', 'invalidColor');

+debug('');

+debug('Render multiple fieldsets and move an invalid input from one to another:');

+parent.innerHTML = '<fieldset id=fieldset1><input type=text id=input1 required><input type=text id=input2 required value="a"></fieldset>'

+ + '<fieldset id=fieldset2><input type=text id=input3><input type=text id=input4 required value="a"></fieldset>'

+ + '<fieldset id=fieldset3></fieldset>';

+shouldBe('backgroundOf($("fieldset1"))', 'invalidColor');

+shouldBe('backgroundOf($("fieldset2"))', 'validColor');

+shouldBe('backgroundOf($("fieldset3"))', 'validColor');

+var input1 = $('input1');

+var fieldset1 = $('fieldset1');

+var fieldset3 = $('fieldset3');

+fieldset1.removeChild(input1);

+fieldset3.appendChild(input1);

+shouldBe('backgroundOf($("fieldset1"))', 'validColor');

+shouldBe('backgroundOf($("fieldset3"))', 'invalidColor');

+debug('');

+debug('Ensure that invalid event was not triggered on style evaluation:');

+var val = '0';

+parent.innerHTML = '<fieldset id=fieldset1><input type=text id=input1 required oninvalid="val=\'1\';"></fieldset>';

+var fieldset1 = $('fieldset1');

+var input1 = $('input1');

+shouldBe('backgroundOf(fieldset1)', 'invalidColor');

+shouldBeEqualToString('val', '0');

+shouldBeEqualToString('input1.checkValidity(); val', '1');

+debug('');

+parent.innerHTML = '';

+</script>

+</body>

+</html>