blob: 9868814a841aa24676aa60a7e6b1033054008108 [file] [log] [blame]
benjamin@webkit.orgd77e9f82014-11-17 07:01:21 +00001<!DOCTYPE html>
2<html>
3<head>
4<script src="../../resources/js-test-pre.js"></script>
5<style>
6fieldset {
7 color: black;
8}
9fieldset:valid {
10 color: rgb(0, 1, 2);
11}
12</style>
13</head>
14<body>
15 <div>
16 <!-- With renderer -->
17 <fieldset id="with-renderer">
18 <input class="input1" required value="Valid">
19 <input class="input2" required value="Valid">
20 <input class="input3" required value="Valid">
21 <input class="input4" required value="Valid">
22 </fieldset>
23 </div>
24 <div style="display:none;">
25 <!-- Without renderer -->
26 <fieldset id="without-renderer">
27 <input class="input1" required value="Valid">
28 <input class="input2" required value="Valid">
29 <input class="input3" required value="Valid">
30 <input class="input4" required value="Valid">
31 </fieldset>
32 </div>
33</body>
34<script>
35
36description('Test that we do not invalidate the style of &lt;fieldset&gt; excessively when matching :valid based on the descendants.');
37
38function shouldNeedStyleRecalc(expected) {
39 var testFunction = expected ? shouldBeTrue : shouldBeFalse;
40 testFunction('window.internals.nodeNeedsStyleRecalc(document.getElementById("with-renderer"))');
41 testFunction('window.internals.nodeNeedsStyleRecalc(document.getElementById("without-renderer"))');
42}
43
44function checkStyle(expectedColor) {
45 shouldBeEqualToString('getComputedStyle(document.getElementById("with-renderer")).color', expectedColor);
46 shouldBeEqualToString('getComputedStyle(document.getElementById("without-renderer")).color', expectedColor);
47}
48
49// Force a layout to ensure we don't have dirty styles.
50var offsetTop = document.documentElement.offsetTop;
51
52// Initial state.
53shouldNeedStyleRecalc(false);
54checkStyle('rgb(0, 1, 2)');
55
56// Make input3 invalid, the fieldset should also become invalid.
57var inputs3 = document.querySelectorAll('.input3');
58inputs3[0].value = '';
59inputs3[1].value = '';
60
61shouldNeedStyleRecalc(true);
62checkStyle('rgb(0, 0, 0)');
63
64// Making more fields invalid should not invalidate the fieldset's style.
65var inputs = document.querySelectorAll(':matches(.input2, .input4)');
66for (var i = 0; i < inputs.length; ++i)
67 inputs[i].value = '';
68
69shouldNeedStyleRecalc(false);
70checkStyle('rgb(0, 0, 0)');
71
72// Removing valid fields should not invalidate the style.
73var inputs1 = document.querySelectorAll(':matches(.input1)');
74for (var i = 0; i < inputs1.length; ++i)
75 inputs1[i].parentNode.removeChild(inputs1[i]);
76
77// Making all fields valid but one, fieldset still does not need to be invalidated.
78var inputs = document.querySelectorAll(':matches(.input2, .input3)');
79for (var i = 0; i < inputs.length; ++i)
80 inputs[i].removeAttribute('required');
81
82shouldNeedStyleRecalc(false);
83checkStyle('rgb(0, 0, 0)');
84
85// Making the last input valid. The style must update, fieldset must be invalidated.
86var inputs = document.querySelectorAll(':matches(.input4)');
87for (var i = 0; i < inputs.length; ++i)
88 inputs[i].removeAttribute('required');
89
90shouldNeedStyleRecalc(true);
91checkStyle('rgb(0, 1, 2)');
92
93document.getElementById("with-renderer").style.display = 'none';
94</script>
95<script src="../../resources/js-test-post.js"></script>
96</html>