helper_hittest_clipped_fixed_modal.html (1849B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Hit-testing on content covered by a fullscreen fixed-position item clipped away</title> 5 <script type="application/javascript" src="apz_test_utils.js"></script> 6 <script type="application/javascript" src="apz_test_native_event_utils.js"></script> 7 <script src="/tests/SimpleTest/paint_listener.js"></script> 8 <meta name="viewport" content="width=device-width"/> 9 <style> 10 .modal 11 { 12 position:fixed; 13 z-index:10; 14 width:100%; 15 height:100%; 16 left:0; 17 top:0; 18 clip:rect(1px,1px,1px,1px); 19 } 20 .modal__content 21 { 22 overflow:auto; 23 position:fixed; 24 top:0; 25 left:0; 26 width:100%; 27 height:100%; 28 } 29 .modal__body 30 { 31 position:absolute; 32 top:0; 33 left:0; 34 width:100%; 35 height:100%; 36 } 37 .content 38 { 39 position:fixed; 40 top:0; 41 left:0; 42 width:100%; 43 height:100%; 44 overflow-y:auto 45 } 46 </style> 47 </head> 48 <body> 49 <div class="content"> 50 <div style="height: 5000px; background-image: linear-gradient(red,blue)"> 51 Filler to make the content div scrollable 52 </div> 53 </div> 54 <div class="modal"> 55 <div class="modal__content"> 56 <div class="modal__body"> 57 </div> 58 </div> 59 </div> 60 </body> 61 <script type="application/javascript"> 62 63 async function test() { 64 var config = getHitTestConfig(); 65 var utils = config.utils; 66 67 // layerize the scrollable frame 68 var subframe = document.querySelector(".content"); 69 utils.setDisplayPortForElement(0, 0, 800, 2000, subframe, 1); 70 await promiseApzFlushedRepaints(); 71 72 var target = document.querySelector(".content"); 73 checkHitResult(hitTest(centerOf(target)), 74 APZHitResultFlags.VISIBLE, 75 utils.getViewId(subframe), 76 utils.getLayersId(), 77 "content covered by a clipped fixed div"); 78 } 79 80 waitUntilApzStable() 81 .then(test) 82 .then(subtestDone, subtestFailed); 83 84 </script> 85 </html>