| <!DOCTYPE html> |
| <html> |
| <head> |
| <link rel="stylesheet" href="resources/compositor-touch-hit-rects.css"> |
| <style> |
| .scroll { |
| overflow-y: scroll; |
| overflow-x: hidden; |
| border: 1px solid lightgrey; |
| height: 30px; |
| } |
| #fixedPositionNestedContent { |
| position: absolute; |
| left: 310px; |
| } |
| #overflowwithborder { |
| border: 6px solid lightblue; |
| padding: 4px; |
| } |
| </style> |
| </head> |
| <body> |
| <p id="description" style="height:20px"> |
| This test verifies the hit test regions given to the compositor specifically around non-composited overflow scroll elements. |
| </p> |
| |
| <div id="tests"> |
| <div class="scroll" id="scrollContainer"> |
| <div style='height: 10px;'></div> |
| <div class="testcase" id="scrollContent">Scroll content</div> |
| <div style='height: 30px;'></div> |
| </div> |
| <div class="scroll testcase" id="scrollContainerWithHandler"> |
| <div style='height: 10px;'></div> |
| <div>Scroll content</div> |
| <div style='height: 30px;'></div> |
| </div> |
| <div id="scroll2" class="scroll" style="margin-bottom: 10px"> |
| <div style='height: 10px;'></div> |
| <div id="scroll2b" class="scroll"> |
| <div style='height: 10px;'></div> |
| <div class="testcase" id="nestedContent">Nested content</div> |
| <div style='height: 30px;'></div> |
| </div> |
| <div style='height: 30px;'></div> |
| </div> |
| <div id="scroll3" class="scroll" style="margin-bottom: 10px"> |
| <div style='height: 10px;'></div> |
| <div class="testcase" id="fixedPositionContentContainer"> |
| Container |
| <div id="fixedPositionNestedContent">Fixed content</div> |
| </div> |
| <div style='height: 30px;'></div> |
| </div> |
| <div id="scroll4" class="scroll" style="margin-bottom: 10px"> |
| <div style='height: 10px;'></div> |
| <div id="overflowwithhandler" class="scroll testcase" style="height: 25px;"> |
| <div style='height: 30px;'></div> |
| <div>overflow div</div> |
| </div> |
| </div> |
| <div id="scroll5" class="scroll" style="margin-bottom: 10px"> |
| <div style='height: 10px;'></div> |
| <div id="nonCompositedNonScrollableLayer" style="position: relative"> |
| <div style='height: 10px;'></div> |
| <div class="testcase" id="divInsideNonScrollableLayer">touch handler</div> |
| <div style='height: 60px;'></div> |
| </div> |
| <div style='height: 50px;'></div> |
| </div> |
| <div id="scroll6" class="scroll" style="margin-bottom: 10px"> |
| <div style='height: 10px;'></div> |
| <div id="compositedLayer" style="will-change: transform;"> |
| <div style='height: 10px;'></div> |
| <div class="testcase" id="divInsideCompositedLayer">div in composited</div> |
| </div> |
| <div style='height: 30px;'></div> |
| </div> |
| <div id="overflowwithborder" class="scroll testcase"> |
| <div style='height: 30px;'></div> |
| <div>content</div> |
| <div style='height: 60px;'></div> |
| </div> |
| </div> |
| |
| <div id="console"></div> |
| <script src="resources/compositor-touch-hit-rects.js"></script> |
| <script> |
| // Make fixed-position cases slightly more interesting |
| window.scrollTo(0, 13); |
| |
| if (window.internals) { |
| internals.settings.setPreferCompositingToLCDTextEnabled(false); |
| } |
| </script> |
| </body> |
