layout/style/test/test_pseudoelement_state.html@7e26c7da4463
layout/style/test/test_pseudoelement_state.html
Wed, 31 Dec 2014 06:55:50 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:55:50 +0100
- changeset 2
- 7e26c7da4463
- permissions
- -rw-r--r--
Added tag UPSTREAM_283F7C6 for changeset ca08bd8f51b2
1 <!DOCTYPE html>
2 <title>Test for Bug 922669</title>
3 <script src="/MochiKit/MochiKit.js"></script>
4 <script src="/tests/SimpleTest/SimpleTest.js"></script>
5 <script src="/tests/SimpleTest/EventUtils.js"></script>
6 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
8 <iframe src="data:text/html,<!DOCTYPE html><style></style><div></div>"></iframe>
10 <script>
11 var gIsAndroid = navigator.appVersion.indexOf("Android") != -1;
13 var gTests = [
14 // Interact with the ::-moz-progress-bar.
15 { markup: '<progress value="75" max="100"></progress>',
16 pseudoelement: '::-moz-progress-bar',
17 common_style: 'progress { -moz-appearance: none; } progress::-moz-progress-bar { background: black; }',
18 hover_test_style: 'progress::-moz-progress-bar:hover { background: green; }',
19 hover_reference_style: 'progress::-moz-progress-bar { background: green; }',
20 active_test_style: 'progress::-moz-progress-bar:active { background: lime; }',
21 active_reference_style: 'progress::-moz-progress-bar { background: lime; }' },
23 // Interact with the part of the <progress> not covered by the ::-moz-progress-bar.
24 { markup: '<progress value="25" max="100"></progress>',
25 pseudoelement: '::-moz-progress-bar',
26 common_style: 'progress { -moz-appearance: none; } progress::-moz-progress-bar { background: black; }',
27 hover_test_style: 'progress::-moz-progress-bar { background: green; } progress::-moz-progress-bar:hover { background: red; }',
28 hover_reference_style: 'progress::-moz-progress-bar { background: green; }',
29 active_test_style: 'progress::-moz-progress-bar { background: lime; } progress::-moz-progress-bar:active { background: red; }',
30 active_reference_style: 'progress::-moz-progress-bar { background: lime; }' },
32 // Interact with the ::-moz-range-thumb.
33 { markup: '<input type="range" value="50" min="0" max="100">',
34 pseudoelement: '::-moz-range-thumb',
35 common_style: 'input { -moz-appearance: none; } input::-moz-range-thumb { background: black; }',
36 hover_test_style: 'input::-moz-range-thumb:hover { background: green; }',
37 hover_reference_style: 'input::-moz-range-thumb { background: green; }',
38 active_test_style: 'input::-moz-range-thumb:active { background: lime; }',
39 active_reference_style: 'input::-moz-range-thumb { background: lime; }' },
41 // Interact with the part of the <input type="range"> not covered by the ::-moz-range-thumb.
42 { markup: '<input type="range" value="25" min="0" max="100">',
43 pseudoelement: '::-moz-range-thumb',
44 common_style: 'input { -moz-appearance: none; } input::-moz-range-thumb { background: black; }',
45 hover_test_style: 'input::-moz-range-thumb { background: green; } input::-moz-range-thumb:hover { background: red; }',
46 hover_reference_style: 'input::-moz-range-thumb { background: green; }',
47 active_test_style: 'input::-moz-range-thumb { background: lime; } input::-moz-range-thumb:active { background: red; }',
48 active_reference_style: 'input::-moz-range-thumb { background: lime; }' },
50 // Interact with the ::-moz-meter-bar.
51 { markup: '<meter value="75" min="0" max="100"></meter>',
52 pseudoelement: '::-moz-meter-bar',
53 common_style: 'meter { -moz-appearance: none; } meter::-moz-meter-bar { background: black; }',
54 hover_test_style: 'meter::-moz-meter-bar:hover { background: green; }',
55 hover_reference_style: 'meter::-moz-meter-bar { background: green; }',
56 active_test_style: 'meter::-moz-meter-bar:active { background: lime; }',
57 active_reference_style: 'meter::-moz-meter-bar { background: lime; }' },
59 // Interact with the part of the <meter> not covered by the ::-moz-meter-bar.
60 { markup: '<meter value="25" min="0" max="100"></meter>',
61 pseudoelement: '::-moz-meter-bar',
62 common_style: 'meter { -moz-appearance: none; } meter::-moz-meter-bar { background: black; }',
63 hover_test_style: 'meter::-moz-meter-bar { background: green; } meter::-moz-meter-bar:hover { background: red; }',
64 hover_reference_style: 'meter::-moz-meter-bar { background: green; }',
65 active_test_style: 'meter::-moz-meter-bar { background: lime; } meter::-moz-meter-bar:active { background: red; }',
66 active_reference_style: 'meter::-moz-meter-bar { background: lime; }' },
68 // Do the same as the "Interact with the ::-moz-range-thumb" subtest above,
69 // but with selectors that include descendant operators.
70 { markup: '<input type="range" value="50" min="0" max="100">',
71 pseudoelement: '::-moz-range-thumb',
72 common_style: 'body input { -moz-appearance: none; } input::-moz-range-thumb { background: black; }',
73 hover_test_style: 'body input::-moz-range-thumb:hover { background: green; }',
74 hover_reference_style: 'body input::-moz-range-thumb { background: green; }',
75 active_test_style: 'body input::-moz-range-thumb:active { background: lime; }',
76 active_reference_style: 'body input::-moz-range-thumb { background: lime; }' },
78 // ::-moz-placeholder can't be tested, since the UA style sheet sets it to
79 // be pointer-events:none.
80 ];
82 function countPixelDifferences(aCanvas1, aCanvas2) {
83 var ctx1 = aCanvas1.getContext("2d");
84 var ctx2 = aCanvas2.getContext("2d");
85 var data1 = ctx1.getImageData(0, 0, aCanvas1.width, aCanvas1.height);
86 var data2 = ctx2.getImageData(0, 0, aCanvas2.width, aCanvas2.height);
87 var n = 0;
88 for (var i = 0; i < data1.width * data2.height * 4; i += 4) {
89 if (data1.data[i] != data2.data[i] ||
90 data1.data[i + 1] != data2.data[i + 1] ||
91 data1.data[i + 2] != data2.data[i + 2] ||
92 data1.data[i + 3] != data2.data[i + 3]) {
93 n++;
94 }
95 }
96 return n;
97 }
99 function runTests() {
100 var iframe = document.querySelector("iframe");
101 var style = iframe.contentDocument.querySelector("style");
102 var div = iframe.contentDocument.querySelector("div");
103 var canvas1, canvas2;
105 function runTestPart1(aIndex) {
106 var test = gTests[aIndex];
107 div.innerHTML = test.markup;
108 style.textContent = test.common_style;
109 is(getComputedStyle(div.firstChild, test.pseudoelement).backgroundColor, "rgb(0, 0, 0)", "subtest #" + aIndex + ", computed style");
110 style.textContent += test.hover_test_style;
111 synthesizeMouseAtCenter(div.lastChild, { type: 'mouseover' }, iframe.contentWindow);
112 }
114 function runTestPart2(aIndex) {
115 var test = gTests[aIndex];
116 canvas1 = SpecialPowers.snapshotWindow(iframe.contentWindow, false);
117 style.textContent = test.common_style + test.hover_reference_style;
118 }
120 function runTestPart3(aIndex) {
121 var test = gTests[aIndex];
122 canvas2 = SpecialPowers.snapshotWindow(iframe.contentWindow, false);
123 ok(canvas1.width == canvas2.width && canvas1.height == canvas2.height, "hover subtest #" + aIndex + ", canvas sizes equal");
124 is(countPixelDifferences(canvas1, canvas2), 0, "hover subtest #" + aIndex + ", number of different pixels");
125 is(getComputedStyle(div.firstChild, test.pseudoelement).backgroundColor, "rgb(0, 128, 0)", "hover subtest #" + aIndex + ", computed style");
127 if (!gIsAndroid) {
128 style.textContent = test.common_style + test.active_test_style;
129 synthesizeMouseAtCenter(div.lastChild, { type: 'mousedown' }, iframe.contentWindow);
130 }
131 }
133 function runTestPart4(aIndex) {
134 if (!gIsAndroid) {
135 var test = gTests[aIndex];
136 canvas1 = SpecialPowers.snapshotWindow(iframe.contentWindow, false);
137 synthesizeMouseAtCenter(div.lastChild, { type: 'mouseup' }, iframe.contentWindow);
138 style.textContent = test.common_style + test.active_reference_style;
139 }
140 }
142 function runTestPart5(aIndex) {
143 if (!gIsAndroid) {
144 var test = gTests[aIndex];
145 canvas2 = SpecialPowers.snapshotWindow(iframe.contentWindow, false);
146 ok(canvas1.width == canvas2.width && canvas1.height == canvas2.height, "active subtest #" + aIndex + ", canvas sizes equal");
147 is(countPixelDifferences(canvas1, canvas2), 0, "active subtest #" + aIndex + ", number of different pixels");
148 is(getComputedStyle(div.firstChild, test.pseudoelement).backgroundColor, "rgb(0, 255, 0)", "active subtest #" + aIndex + ", computed style");
149 }
150 }
152 for (var i = 0; i < gTests.length; i++) {
153 setTimeout(runTestPart1, 0, i);
154 setTimeout(runTestPart2, 0, i);
155 setTimeout(runTestPart3, 0, i);
156 setTimeout(runTestPart4, 0, i);
157 setTimeout(runTestPart5, 0, i);
158 }
159 setTimeout(function() { SimpleTest.finish(); }, 0);
160 }
162 SimpleTest.waitForExplicitFinish();
163 window.addEventListener("load", runTests);
164 </script>
