third_party/WebKit/LayoutTests/scrollingcoordinator/non-fast-scrollable-transform-changed.html

   1 <!DOCTYPE html>
   2 <style>
   3   body {
   4     margin: 0;
   5     padding: 0;
   6   }
   7
   8   #nonFastRegion {
   9     height: 222px;
  10     width: 222px;
  11     border: none;
  12     overflow: scroll;
  13     -webkit-transform: translateX(0);
  14   }
  15
  16   #nonFastRegion > div {
  17     height: 1000px;
  18     width: 1000px;
  19     background: linear-gradient(to bottom, red, white);
  20   }
  21 </style>
  22
  23 <div id='nonFastRegion'><div>This should be covered by a green overlay.</div></div>
  24
  25 <p>A single square should be visible covered by a green overlay.</p>
  26 <div id="console"></div>
  27
  28 <script src="../resources/js-test.js"></script>
  29 <script src="../resources/run-after-layout-and-paint.js"></script>
  30 <script src="resources/non-fast-scrollable-region-testing.js"></script>
  31 <script>
  32   jsTestIsAsync = true;
  33   // print result lazily to avoid layouts during the test
  34   setPrintTestResultsLazily();
  35   description('This test ensures that transforming a non-fast scrollable area ' +
  36     'correctly updates list of non-fast scrollable rects ' +
  37     '(See http://crbug.com/417345).');
  38
  39   onload = function() {
  40     runAfterLayoutAndPaint(runTests);
  41   };
  42
  43   function runTests() {
  44     nonFastScrollableRects = internals.nonFastScrollableRects(document);
  45     shouldBe('nonFastScrollableRects.length', '1');
  46     shouldBeEqualToString('rectToString(nonFastScrollableRects[0])', '[0, 0, 222, 222]');
  47
  48     document.body.style.padding = "10px";
  49     debug("Trigger style update");
  50     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2");
  51     debug("Verifying layout hasn't been triggered");
  52     shouldBe("internals.needsLayoutCount()", "3");
  53
  54     // Updating transforms hits an optimized layout path which is root cause of
  55     // http://crbug.com/417345
  56     debug("Update non-fast element's transform");
  57     document.getElementById('nonFastRegion').style.webkitTransform = 'translateX(100px)';
  58
  59     debug("Trigger style update");
  60     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
  61     debug("Verifying layout still hasn't been triggered");
  62     shouldBe("internals.needsLayoutCount()", "3");
  63     debug("Verifying non-fast regions have been updated");
  64     nonFastScrollableRects = internals.nonFastScrollableRects(document);
  65     shouldBe('nonFastScrollableRects.length', '1');
  66     shouldBeEqualToString('rectToString(nonFastScrollableRects[0])', '[100, 0, 222, 222]');
  67
  68     setTimeout(function() {
  69       // Add green overlays to help visualize the test
  70       drawNonFastScrollableRegionOverlays();
  71       finishJSTest();
  72     }, 0);
  73   }
  74 </script>