helper_fixed_pos_displayport.html (4097B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width; minimum-scale=1.0"> 6 <title>position:fixed display port sizing</title> 7 <script type="application/javascript" src="apz_test_utils.js"></script> 8 <script type="application/javascript" src="apz_test_native_event_utils.js"></script> 9 <script type="application/javascript" src="/tests/SimpleTest/paint_listener.js"></script> 10 <style> 11 html, body { 12 margin: 0; 13 /* This makes sure the `height: 1000%` on #scrolled actually has an effect. */ 14 height: 100%; 15 } 16 #fixed { 17 position: fixed; 18 left: 0; 19 height: 100%; 20 width: 300px; 21 background: linear-gradient(135deg, white, black); 22 } 23 /* This makes sure we have a layout scroll range. */ 24 #scrolled { 25 width: 300px; 26 height: 1000%; 27 } 28 </style> 29 </head> 30 <body> 31 <div id="fixed"></div> 32 <div id="scrolled"></div> 33 <script> 34 let utils = SpecialPowers.getDOMWindowUtils(window); 35 let vv = window.visualViewport; 36 37 // Get the displayport of the fixed-position element as of the last paint. 38 function getCurrentFixedPosDisplayport() { 39 let data = convertEntries(utils.getContentAPZTestData().additionalData); 40 let key = "fixedPosDisplayport"; 41 ok(key in data, "should have computed a fixed-pos display port"); 42 return parseRect(data[key]); 43 } 44 45 async function scrollToVisual(targetX, targetY) { 46 let scrollPromise = new Promise(resolve => { 47 vv.addEventListener("scroll", resolve, { once: true }); 48 }); 49 utils.scrollToVisual(targetX, targetY, utils.UPDATE_TYPE_MAIN_THREAD, 50 utils.SCROLL_MODE_INSTANT); 51 await scrollPromise; 52 await promiseApzFlushedRepaints(); 53 // Allow up to 1 pixel discrepancy due to floating-point error. 54 isfuzzy(vv.pageLeft, targetX, 1, "visual-scrolled horizontally as expected"); 55 isfuzzy(vv.pageTop, targetY, 1, "visual-scrolled vertically as expected"); 56 } 57 58 // Check that the size and position of the fixed-pos displayport matches 59 // our expectations. 60 function checkFixedPosDisplayport() { 61 let fixedPosDisplayport = getCurrentFixedPosDisplayport(); 62 63 // First, check check that we don't expand the displayport to the entire layout viewport 64 // even if we are zoomed in a lot. 65 ok(fixedPosDisplayport.width < window.innerWidth, "fixed-pos displayport is too wide"); 66 ok(fixedPosDisplayport.height < window.innerHeight, "fixed-pos displayport is too tall"); 67 68 // Now, check the position. We want it to track the visual scroll position 69 // relative to the layout viewport (but not relative to the page), since 70 // fixed-position elements are attached to the layout viewport. 71 // This is accomplished by checking the fixed-pos display port contains 72 // the visual viewport rect as expressed relative to the layout viewport. 73 let vvRect = { x: vv.offsetLeft, // offsets relative to layout viewport 74 y: vv.offsetTop, 75 width: vv.width, 76 height: vv.height }; 77 assertRectContainment(fixedPosDisplayport, "fixed-pos displayport", 78 vvRect, "visual viewport"); 79 } 80 81 async function test() { 82 // First, check size and position on page load. 83 checkFixedPosDisplayport(); 84 85 // Scroll the visual viewport within the layout viewport, without 86 // scrolling the layout viewport itself, and check the size and 87 // position again. 88 await scrollToVisual(vv.width * 3, vv.height * 3); 89 checkFixedPosDisplayport(); 90 91 // Finally, scroll the visual viewport farther so as to cause the 92 // layout viewport to scroll as well, and check the size and position 93 // once more. 94 await scrollToVisual(vv.width * 3, vv.height * 30); 95 checkFixedPosDisplayport(); 96 } 97 SpecialPowers.getDOMWindowUtils(window).setResolutionAndScaleTo(8.0); 98 waitUntilApzStable().then(test).then(subtestDone, subtestFailed); 99 </script> 100 </body> 101 </html>