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