| <!DOCTYPE html> |
| <script src="resources/composited-scroll.js"></script> |
| <style> |
| .composited { |
| transform: translateZ(0); |
| } |
| .scroller { |
| width: 300px; |
| height: 300px; |
| overflow: scroll; |
| } |
| .scroller > div { |
| height: 1000px; |
| width: 1000px; |
| background-color: green; |
| } |
| </style> |
| |
| <div id='scroller' class='composited scroller' style='pointer-events: none;'> |
| <div>It should be possible to scroll this div.</div> |
| </div> |
| |
| <script src='../../resources/js-test.js'></script> |
| <script src='../../resources/run-after-layout-and-paint.js'></script> |
| |
| <script type='text/javascript'> |
| jsTestIsAsync = true; |
| description('Verifies that toggling pointer-events correctly updates scrolling ' + |
| 'layers in compositor.'); |
| |
| if (window.internals) |
| internals.settings.setPreferCompositingToLCDTextEnabled(true); |
| |
| onload = function() { |
| var scroller = document.getElementById('scroller'); |
| shouldBe('elementSubtreeHasCompositedScrollLayers(scroller)', 'false'); |
| |
| // removing 'pointer-events: none' should cause composited scrolling |
| document.getElementById('scroller').style.pointerEvents = ''; |
| runAfterLayoutAndPaint(function() { |
| var scroller = document.getElementById('scroller'); |
| shouldBe('elementSubtreeHasCompositedScrollLayers(scroller)', 'true'); |
| finishJSTest(); |
| }); |
| }; |
| </script> |
