The Tor Browser / file comparison
comparison: layout/style/test/test_pseudoelement_state.html
layout/style/test/test_pseudoelement_state.html
- branch
- TOR_BUG_9701
- changeset 11
- deefc01c0e14
equal
deleted
inserted
replaced
| -1:000000000000 | 0:a03c7221fb6a |
|---|---|
| 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"> | |
| 7 | |
| 8 <iframe src="data:text/html,<!DOCTYPE html><style></style><div></div>"></iframe> | |
| 9 | |
| 10 <script> | |
| 11 var gIsAndroid = navigator.appVersion.indexOf("Android") != -1; | |
| 12 | |
| 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; }' }, | |
| 22 | |
| 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; }' }, | |
| 31 | |
| 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; }' }, | |
| 40 | |
| 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; }' }, | |
| 49 | |
| 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; }' }, | |
| 58 | |
| 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; }' }, | |
| 67 | |
| 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; }' }, | |
| 77 | |
| 78 // ::-moz-placeholder can't be tested, since the UA style sheet sets it to | |
| 79 // be pointer-events:none. | |
| 80 ]; | |
| 81 | |
| 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 } | |
| 98 | |
| 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; | |
| 104 | |
| 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 } | |
| 113 | |
| 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 } | |
| 119 | |
| 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"); | |
| 126 | |
| 127 if (!gIsAndroid) { | |
| 128 style.textContent = test.common_style + test.active_test_style; | |
| 129 synthesizeMouseAtCenter(div.lastChild, { type: 'mousedown' }, iframe.contentWindow); | |
| 130 } | |
| 131 } | |
| 132 | |
| 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 } | |
| 141 | |
| 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 } | |
| 151 | |
| 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 } | |
| 161 | |
| 162 SimpleTest.waitForExplicitFinish(); | |
| 163 window.addEventListener("load", runTests); | |
| 164 </script> |
