layout/style/test/test_pseudoelement_state.html

   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 srcdoc="<!DOCTYPE html><style></style><div></div>"></iframe>
   9
  10 <script>
  11 var gIsAndroid = navigator.appVersion.includes("Android");
  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   // Do the same as above, but using :is instead.
  79   { markup:                 '<input type="range" value="50" min="0" max="100">',
  80     pseudoelement:          '::-moz-range-thumb',
  81     common_style:           'body input { -moz-appearance: none; } input::-moz-range-thumb { background: black; }',
  82     hover_test_style:       'body input::-moz-range-thumb:is(:hover) { background: green; }',
  83     hover_reference_style:  'body input::-moz-range-thumb { background: green; }',
  84     active_test_style:      'body input::-moz-range-thumb:is(:active) { background: lime; }',
  85     active_reference_style: 'body input::-moz-range-thumb { background: lime; }' },
  86
  87   // Do the same as above, but using :not instead.
  88   { markup:                 '<input type="range" value="50" min="0" max="100">',
  89     pseudoelement:          '::-moz-range-thumb',
  90     common_style:           'input { -moz-appearance: none; } input::-moz-range-thumb { background: green } input::-moz-range-thumb:not(:hover) { background: black; }',
  91     hover_test_style:       '',
  92     hover_reference_style:  'input::-moz-range-thumb { background: green !important; }',
  93     active_test_style:      'input::-moz-range-thumb:active { background: lime !important; }',
  94     active_reference_style: 'input::-moz-range-thumb { background: lime !important; }' },
  95
  96   // ::placeholder can't be tested, since the UA style sheet sets it to
  97   // be pointer-events:none.
  98 ];
  99
 100 function countPixelDifferences(aCanvas1, aCanvas2) {
 101   var ctx1 = aCanvas1.getContext("2d");
 102   var ctx2 = aCanvas2.getContext("2d");
 103   var data1 = ctx1.getImageData(0, 0, aCanvas1.width, aCanvas1.height);
 104   var data2 = ctx2.getImageData(0, 0, aCanvas2.width, aCanvas2.height);
 105   var n = 0;
 106   for (var i = 0; i < data1.width * data2.height * 4; i += 4) {
 107     if (data1.data[i] != data2.data[i] ||
 108         data1.data[i + 1] != data2.data[i + 1] ||
 109         data1.data[i + 2] != data2.data[i + 2] ||
 110         data1.data[i + 3] != data2.data[i + 3]) {
 111       n++;
 112     }
 113   }
 114   return n;
 115 }
 116
 117 function runTests() {
 118   var iframe = document.querySelector("iframe");
 119   var style = iframe.contentDocument.querySelector("style");
 120   var div = iframe.contentDocument.querySelector("div");
 121   var canvas1, canvas2;
 122
 123   function runTestPart1(aIndex) {
 124     var test = gTests[aIndex];
 125     div.innerHTML = test.markup;
 126     style.textContent = test.common_style;
 127     is(getComputedStyle(div.firstChild, test.pseudoelement).backgroundColor, "rgb(0, 0, 0)", "subtest #" + aIndex + ", computed style");
 128     style.textContent += test.hover_test_style;
 129     synthesizeMouseAtCenter(div.lastChild, { type: 'mouseover' }, iframe.contentWindow);
 130   }
 131
 132   function runTestPart2(aIndex) {
 133     var test = gTests[aIndex];
 134     canvas1 = SpecialPowers.snapshotWindow(iframe.contentWindow, false);
 135     style.textContent = test.common_style + test.hover_reference_style;
 136   }
 137
 138   function runTestPart3(aIndex) {
 139     var test = gTests[aIndex];
 140     canvas2 = SpecialPowers.snapshotWindow(iframe.contentWindow, false);
 141     ok(canvas1.width == canvas2.width && canvas1.height == canvas2.height, "hover subtest #" + aIndex + ", canvas sizes equal");
 142     is(countPixelDifferences(canvas1, canvas2), 0, "hover subtest #" + aIndex + ", number of different pixels");
 143     is(getComputedStyle(div.firstChild, test.pseudoelement).backgroundColor, "rgb(0, 128, 0)", "hover subtest #" + aIndex + ", computed style");
 144
 145     if (!gIsAndroid) {
 146       style.textContent = test.common_style + test.active_test_style;
 147       synthesizeMouseAtCenter(div.lastChild, { type: 'mousedown' }, iframe.contentWindow);
 148     }
 149   }
 150
 151   function runTestPart4(aIndex) {
 152     if (!gIsAndroid) {
 153       var test = gTests[aIndex];
 154       canvas1 = SpecialPowers.snapshotWindow(iframe.contentWindow, false);
 155       synthesizeMouseAtCenter(div.lastChild, { type: 'mouseup' }, iframe.contentWindow);
 156       style.textContent = test.common_style + test.active_reference_style;
 157     }
 158   }
 159
 160   function runTestPart5(aIndex) {
 161     if (!gIsAndroid) {
 162       var test = gTests[aIndex];
 163       canvas2 = SpecialPowers.snapshotWindow(iframe.contentWindow, false);
 164       ok(canvas1.width == canvas2.width && canvas1.height == canvas2.height, "active subtest #" + aIndex + ", canvas sizes equal");
 165       is(countPixelDifferences(canvas1, canvas2), 0, "active subtest #" + aIndex + ", number of different pixels");
 166       is(getComputedStyle(div.firstChild, test.pseudoelement).backgroundColor, "rgb(0, 255, 0)", "active subtest #" + aIndex + ", computed style");
 167     }
 168   }
 169
 170   for (var i = 0; i < gTests.length; i++) {
 171     setTimeout(runTestPart1, 0, i);
 172     setTimeout(runTestPart2, 0, i);
 173     setTimeout(runTestPart3, 0, i);
 174     setTimeout(runTestPart4, 0, i);
 175     setTimeout(runTestPart5, 0, i);
 176   }
 177   setTimeout(function() { SimpleTest.finish(); }, 0);
 178 }
 179
 180 SimpleTest.waitForExplicitFinish();
 181 window.addEventListener("load", async function() {
 182   await SpecialPowers.contentTransformsReceived(window);
 183   runTests();
 184 });
 185 </script>