third_party/WebKit/LayoutTests/fast/sub-pixel/repaint-subpixel-layer-in-subpixel-composited-layer.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 #container {
   5     position: relative;
   6     width: 100px;
   7     height: 50px;
   8     transform: translateZ(0);
   9 }
  10 #test {
  11     position: absolute;
  12     width: 10px;
  13     height: 10px;
  14     border: 1px solid red;
  15 }
  16 #console {
  17     display: none;
  18 }
  19 body, html {
  20     margin: 0px;
  21     padding: 0px;
  22 }
  23 </style>
  24 <script src="../../resources/run-after-layout-and-paint.js"></script>
  25 <script>
  26 var testData = [
  27     // left of #container, initial left of #test, final left of #test
  28     [ '10.5px', '12.5px', '10.5px' ],
  29     [ '10.6px', '12.4px', '10.4px' ],
  30     [ '10.4px', '12.6px', '10.6px' ],
  31     [ '10.6px', '12.6px', '10.6px' ],
  32     [ '10.4px', '12.4px', '10.4px' ]
  33 ];
  34 var testIndex = 0;
  35
  36 if (window.testRunner) {
  37     testRunner.dumpAsText();
  38     testRunner.waitUntilDone();
  39 }
  40
  41 function repaintTest() {
  42     document.getElementById('container').style.left = testData[testIndex][0];
  43     document.getElementById('test').style.left = testData[testIndex][1];
  44     runAfterLayoutAndPaint(runTest);
  45 };
  46
  47 function runTest() {
  48     if (window.internals)
  49         internals.startTrackingRepaints(document);
  50     document.getElementById('test').style.left = testData[testIndex][2];
  51     if (window.internals) {
  52         document.getElementById('console').textContent += testData[testIndex] + ':\n'
  53             + internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  54         internals.stopTrackingRepaints(document);
  55     }
  56
  57     if (++testIndex < testData.length) {
  58         repaintTest();
  59     } else {
  60         // Display the test results only after test is done so that it does not affect repaint rect results.
  61         document.getElementById('console').style.display = "block";
  62         if (window.testRunner)
  63             testRunner.notifyDone();
  64     }
  65 }
  66 </script>
  67 <body onload="repaintTest()">
  68 <div id="container"><div id="test"></div></div>
  69 <pre id="console"></pre>