| <!DOCTYPE html> |
| <style> |
| #container { |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| overflow: scroll; |
| } |
| .translated { |
| position: absolute; |
| right: 8px; |
| left: 8px; |
| height: 400px; |
| } |
| #cards { |
| width: 400px; |
| height: 8000px; |
| position: relative; |
| } |
| .scrolled { |
| position:absolute; |
| width:100%; |
| height:100%; |
| background:green; |
| } |
| </style> |
| <div id="container"> |
| <div id="cards"> |
| <div class="translated"> |
| <div class="scrolled"></div> |
| </div> |
| <div class="translated" style="transform: translate(0,430px)"> |
| <div class="scrolled"></div> |
| </div> |
| </div> |
| </div> |
| |
| <script src='../../resources/js-test.js'></script> |
| |
| <script> |
| description('Verifies that scroll children do not create ancestor clipping ' + |
| 'layers in compositor.'); |
| |
| if (window.internals) |
| internals.settings.setPreferCompositingToLCDTextEnabled(true); |
| |
| function scrollChildHasNoScrollClip(layers) { |
| var found = false; |
| layers["layers"].forEach(function(layer) { |
| // The only layer that should have a transform in this example is the |
| // scroll child. If this is not the case, we have a scroll clip. |
| if (layer.transform && layer.hasScrollParent) |
| found = true; |
| }); |
| return found; |
| } |
| |
| onload = function() { |
| if (!window.internals) |
| return; |
| documentLayerTree = JSON.parse(internals.layerTreeAsText( |
| document, window.internals.LAYER_TREE_INCLUDES_CLIP_AND_SCROLL_PARENTS)); |
| shouldBe('scrollChildHasNoScrollClip(documentLayerTree)', 'true'); |
| }; |
| </script> |
