1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/style/test/test_pseudoelement_state.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,164 @@
1.4 +<!DOCTYPE html>
1.5 +<title>Test for Bug 922669</title>
1.6 +<script src="/MochiKit/MochiKit.js"></script>
1.7 +<script src="/tests/SimpleTest/SimpleTest.js"></script>
1.8 +<script src="/tests/SimpleTest/EventUtils.js"></script>
1.9 +<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
1.10 +
1.11 +<iframe src="data:text/html,<!DOCTYPE html><style></style><div></div>"></iframe>
1.12 +
1.13 +<script>
1.14 +var gIsAndroid = navigator.appVersion.indexOf("Android") != -1;
1.15 +
1.16 +var gTests = [
1.17 + // Interact with the ::-moz-progress-bar.
1.18 + { markup: '<progress value="75" max="100"></progress>',
1.19 + pseudoelement: '::-moz-progress-bar',
1.20 + common_style: 'progress { -moz-appearance: none; } progress::-moz-progress-bar { background: black; }',
1.21 + hover_test_style: 'progress::-moz-progress-bar:hover { background: green; }',
1.22 + hover_reference_style: 'progress::-moz-progress-bar { background: green; }',
1.23 + active_test_style: 'progress::-moz-progress-bar:active { background: lime; }',
1.24 + active_reference_style: 'progress::-moz-progress-bar { background: lime; }' },
1.25 +
1.26 + // Interact with the part of the <progress> not covered by the ::-moz-progress-bar.
1.27 + { markup: '<progress value="25" max="100"></progress>',
1.28 + pseudoelement: '::-moz-progress-bar',
1.29 + common_style: 'progress { -moz-appearance: none; } progress::-moz-progress-bar { background: black; }',
1.30 + hover_test_style: 'progress::-moz-progress-bar { background: green; } progress::-moz-progress-bar:hover { background: red; }',
1.31 + hover_reference_style: 'progress::-moz-progress-bar { background: green; }',
1.32 + active_test_style: 'progress::-moz-progress-bar { background: lime; } progress::-moz-progress-bar:active { background: red; }',
1.33 + active_reference_style: 'progress::-moz-progress-bar { background: lime; }' },
1.34 +
1.35 + // Interact with the ::-moz-range-thumb.
1.36 + { markup: '<input type="range" value="50" min="0" max="100">',
1.37 + pseudoelement: '::-moz-range-thumb',
1.38 + common_style: 'input { -moz-appearance: none; } input::-moz-range-thumb { background: black; }',
1.39 + hover_test_style: 'input::-moz-range-thumb:hover { background: green; }',
1.40 + hover_reference_style: 'input::-moz-range-thumb { background: green; }',
1.41 + active_test_style: 'input::-moz-range-thumb:active { background: lime; }',
1.42 + active_reference_style: 'input::-moz-range-thumb { background: lime; }' },
1.43 +
1.44 + // Interact with the part of the <input type="range"> not covered by the ::-moz-range-thumb.
1.45 + { markup: '<input type="range" value="25" min="0" max="100">',
1.46 + pseudoelement: '::-moz-range-thumb',
1.47 + common_style: 'input { -moz-appearance: none; } input::-moz-range-thumb { background: black; }',
1.48 + hover_test_style: 'input::-moz-range-thumb { background: green; } input::-moz-range-thumb:hover { background: red; }',
1.49 + hover_reference_style: 'input::-moz-range-thumb { background: green; }',
1.50 + active_test_style: 'input::-moz-range-thumb { background: lime; } input::-moz-range-thumb:active { background: red; }',
1.51 + active_reference_style: 'input::-moz-range-thumb { background: lime; }' },
1.52 +
1.53 + // Interact with the ::-moz-meter-bar.
1.54 + { markup: '<meter value="75" min="0" max="100"></meter>',
1.55 + pseudoelement: '::-moz-meter-bar',
1.56 + common_style: 'meter { -moz-appearance: none; } meter::-moz-meter-bar { background: black; }',
1.57 + hover_test_style: 'meter::-moz-meter-bar:hover { background: green; }',
1.58 + hover_reference_style: 'meter::-moz-meter-bar { background: green; }',
1.59 + active_test_style: 'meter::-moz-meter-bar:active { background: lime; }',
1.60 + active_reference_style: 'meter::-moz-meter-bar { background: lime; }' },
1.61 +
1.62 + // Interact with the part of the <meter> not covered by the ::-moz-meter-bar.
1.63 + { markup: '<meter value="25" min="0" max="100"></meter>',
1.64 + pseudoelement: '::-moz-meter-bar',
1.65 + common_style: 'meter { -moz-appearance: none; } meter::-moz-meter-bar { background: black; }',
1.66 + hover_test_style: 'meter::-moz-meter-bar { background: green; } meter::-moz-meter-bar:hover { background: red; }',
1.67 + hover_reference_style: 'meter::-moz-meter-bar { background: green; }',
1.68 + active_test_style: 'meter::-moz-meter-bar { background: lime; } meter::-moz-meter-bar:active { background: red; }',
1.69 + active_reference_style: 'meter::-moz-meter-bar { background: lime; }' },
1.70 +
1.71 + // Do the same as the "Interact with the ::-moz-range-thumb" subtest above,
1.72 + // but with selectors that include descendant operators.
1.73 + { markup: '<input type="range" value="50" min="0" max="100">',
1.74 + pseudoelement: '::-moz-range-thumb',
1.75 + common_style: 'body input { -moz-appearance: none; } input::-moz-range-thumb { background: black; }',
1.76 + hover_test_style: 'body input::-moz-range-thumb:hover { background: green; }',
1.77 + hover_reference_style: 'body input::-moz-range-thumb { background: green; }',
1.78 + active_test_style: 'body input::-moz-range-thumb:active { background: lime; }',
1.79 + active_reference_style: 'body input::-moz-range-thumb { background: lime; }' },
1.80 +
1.81 + // ::-moz-placeholder can't be tested, since the UA style sheet sets it to
1.82 + // be pointer-events:none.
1.83 +];
1.84 +
1.85 +function countPixelDifferences(aCanvas1, aCanvas2) {
1.86 + var ctx1 = aCanvas1.getContext("2d");
1.87 + var ctx2 = aCanvas2.getContext("2d");
1.88 + var data1 = ctx1.getImageData(0, 0, aCanvas1.width, aCanvas1.height);
1.89 + var data2 = ctx2.getImageData(0, 0, aCanvas2.width, aCanvas2.height);
1.90 + var n = 0;
1.91 + for (var i = 0; i < data1.width * data2.height * 4; i += 4) {
1.92 + if (data1.data[i] != data2.data[i] ||
1.93 + data1.data[i + 1] != data2.data[i + 1] ||
1.94 + data1.data[i + 2] != data2.data[i + 2] ||
1.95 + data1.data[i + 3] != data2.data[i + 3]) {
1.96 + n++;
1.97 + }
1.98 + }
1.99 + return n;
1.100 +}
1.101 +
1.102 +function runTests() {
1.103 + var iframe = document.querySelector("iframe");
1.104 + var style = iframe.contentDocument.querySelector("style");
1.105 + var div = iframe.contentDocument.querySelector("div");
1.106 + var canvas1, canvas2;
1.107 +
1.108 + function runTestPart1(aIndex) {
1.109 + var test = gTests[aIndex];
1.110 + div.innerHTML = test.markup;
1.111 + style.textContent = test.common_style;
1.112 + is(getComputedStyle(div.firstChild, test.pseudoelement).backgroundColor, "rgb(0, 0, 0)", "subtest #" + aIndex + ", computed style");
1.113 + style.textContent += test.hover_test_style;
1.114 + synthesizeMouseAtCenter(div.lastChild, { type: 'mouseover' }, iframe.contentWindow);
1.115 + }
1.116 +
1.117 + function runTestPart2(aIndex) {
1.118 + var test = gTests[aIndex];
1.119 + canvas1 = SpecialPowers.snapshotWindow(iframe.contentWindow, false);
1.120 + style.textContent = test.common_style + test.hover_reference_style;
1.121 + }
1.122 +
1.123 + function runTestPart3(aIndex) {
1.124 + var test = gTests[aIndex];
1.125 + canvas2 = SpecialPowers.snapshotWindow(iframe.contentWindow, false);
1.126 + ok(canvas1.width == canvas2.width && canvas1.height == canvas2.height, "hover subtest #" + aIndex + ", canvas sizes equal");
1.127 + is(countPixelDifferences(canvas1, canvas2), 0, "hover subtest #" + aIndex + ", number of different pixels");
1.128 + is(getComputedStyle(div.firstChild, test.pseudoelement).backgroundColor, "rgb(0, 128, 0)", "hover subtest #" + aIndex + ", computed style");
1.129 +
1.130 + if (!gIsAndroid) {
1.131 + style.textContent = test.common_style + test.active_test_style;
1.132 + synthesizeMouseAtCenter(div.lastChild, { type: 'mousedown' }, iframe.contentWindow);
1.133 + }
1.134 + }
1.135 +
1.136 + function runTestPart4(aIndex) {
1.137 + if (!gIsAndroid) {
1.138 + var test = gTests[aIndex];
1.139 + canvas1 = SpecialPowers.snapshotWindow(iframe.contentWindow, false);
1.140 + synthesizeMouseAtCenter(div.lastChild, { type: 'mouseup' }, iframe.contentWindow);
1.141 + style.textContent = test.common_style + test.active_reference_style;
1.142 + }
1.143 + }
1.144 +
1.145 + function runTestPart5(aIndex) {
1.146 + if (!gIsAndroid) {
1.147 + var test = gTests[aIndex];
1.148 + canvas2 = SpecialPowers.snapshotWindow(iframe.contentWindow, false);
1.149 + ok(canvas1.width == canvas2.width && canvas1.height == canvas2.height, "active subtest #" + aIndex + ", canvas sizes equal");
1.150 + is(countPixelDifferences(canvas1, canvas2), 0, "active subtest #" + aIndex + ", number of different pixels");
1.151 + is(getComputedStyle(div.firstChild, test.pseudoelement).backgroundColor, "rgb(0, 255, 0)", "active subtest #" + aIndex + ", computed style");
1.152 + }
1.153 + }
1.154 +
1.155 + for (var i = 0; i < gTests.length; i++) {
1.156 + setTimeout(runTestPart1, 0, i);
1.157 + setTimeout(runTestPart2, 0, i);
1.158 + setTimeout(runTestPart3, 0, i);
1.159 + setTimeout(runTestPart4, 0, i);
1.160 + setTimeout(runTestPart5, 0, i);
1.161 + }
1.162 + setTimeout(function() { SimpleTest.finish(); }, 0);
1.163 +}
1.164 +
1.165 +SimpleTest.waitForExplicitFinish();
1.166 +window.addEventListener("load", runTests);
1.167 +</script>
