helper_check_dp_size.html (5860B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1689492 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>Test for Bug 1689492, helper page</title> 9 <script type="application/javascript" src="apz_test_utils.js"></script> 10 <script type="application/javascript" src="apz_test_native_event_utils.js"></script> 11 <script src="/tests/SimpleTest/paint_listener.js"></script> 12 <script type="application/javascript"> 13 14 // ------------------------------------------------------------------- 15 // Infrastructure to get the test assertions to run at the right time. 16 // ------------------------------------------------------------------- 17 var SimpleTest = window.opener.SimpleTest; 18 19 // -------------------------------------------------------------------- 20 // In this test we have a scrollable root scroll frame (not needed, but 21 // more representative), a scrollable outer div, and a scrollable inner 22 // div. We scroll the inner div, and test that it gets a non-zero 23 // display port (not the main reason for the test, that should already 24 // work, but it's a good sanity check), and then check that the outer 25 // div gets a display port and (here's the important part of the test) 26 // that that display port has zero margins, ie it's relatively close to the 27 // dimensions of the outer div (it can't be exact because we align display 28 // ports). This tests a regression where the outer div would get non-zero 29 // margin display port even though it had never been scrolled (it still 30 // needs a display port because it has a scrollable child). We run the 31 // test several times with different sized outerdiv. 32 // -------------------------------------------------------------------- 33 34 function createDivs(outerwidth, outerheight) { 35 let outerdiv = document.createElement("div"); 36 outerdiv.id = "outerdiv"; 37 outerdiv.style.width = outerwidth + "px"; 38 outerdiv.style.height = outerheight + "px"; 39 outerdiv.style.scrollbarWidth = "none"; 40 outerdiv.style.overflow = "scroll"; 41 42 let innerdiv = document.createElement("div"); 43 innerdiv.id = "innerdiv"; 44 innerdiv.style.width = "25px"; 45 innerdiv.style.height = "25px"; 46 innerdiv.style.overflow = "scroll"; 47 innerdiv.style.scrollbarWidth = "none"; 48 outerdiv.appendChild(innerdiv); 49 50 let innerspacer = document.createElement("div"); 51 innerspacer.style.width = "25px"; 52 innerspacer.style.height = "100px"; 53 innerdiv.appendChild(innerspacer); 54 55 let outerspacer = document.createElement("div"); 56 outerspacer.style.width = "50px"; 57 outerspacer.style.height = "10000px"; 58 outerdiv.appendChild(outerspacer); 59 60 61 let theplace = document.getElementById("theplace"); 62 theplace.parentNode.insertBefore(outerdiv, theplace.nextSibling); 63 } 64 65 async function testOne(theheight, allowedscalefactor, outputprefix) { 66 createDivs(50, theheight); 67 // flush layout 68 document.documentElement.getBoundingClientRect(); 69 await promiseApzFlushedRepaints(); 70 71 document.getElementById("innerdiv").scrollTop = "10px"; 72 73 // Activate the inner div. 74 await promiseMoveMouseAndScrollWheelOver(document.getElementById("innerdiv"), 0, 10); 75 76 await promiseApzFlushedRepaints(); 77 78 let innerdp = getLastContentDisplayportFor("innerdiv"); 79 ok(innerdp.height > 30, outputprefix + " innerdiv display port should be larger than innerdiv"); 80 81 let outerdp = getLastContentDisplayportFor("outerdiv"); 82 is(outerdp.x, 0, outputprefix + " outerdiv display port should be relatively bounded x"); 83 is(outerdp.y, 0, outputprefix + " outerdiv display port should be relatively bounded y"); 84 ok(outerdp.width <= 50, outputprefix + " outerdiv display port should relatively bounded w"); 85 ok(outerdp.height < theheight * allowedscalefactor, outputprefix + " outerdiv display port should be relatively bounded h"); 86 87 ok(true, "innerdp " + JSON.stringify(innerdp)); 88 ok(true, "outerdp " + JSON.stringify(outerdp)); 89 90 document.getElementById("outerdiv").remove(); 91 } 92 93 async function test() { 94 // We test a variety of scroll frame heights. 95 // The first argument of testOne is the scroll frame height. 96 // The second argument is the allowed scale factor of scroll frame height 97 // to display port height. 98 // In the comment following each line we record the values of the display 99 // port height at the time of writing the test in both the good (ie with 100 // the bug this test is testing fixed), and bad (before the bug this 101 // test is testing fixed) cases. These values can obviously be different, 102 // but it gives a good idea that the good and bad values are far apart so 103 // this test should be robust, and provides good context in the future if 104 // this test starts failing. 105 await testOne( 50, 5.2, "(height 50)"); // good 256, bad 256 106 await testOne(128, 2.1, "(height128)"); // good 256, bad 512 107 await testOne(200, 2.0, "(height200)"); // good 384, bad 768 108 await testOne(256, 1.6, "(height256)"); // good 384, bad 768 109 await testOne(329, 1.6, "(height329)"); // good 512, bad 896 110 await testOne(500, 1.6, "(height500)"); // good 768, bad 280 111 await testOne(501, 1.6, "(height501)"); // good 769, bad 280 112 await testOne(640, 1.7, "(height640)"); // good 1024, bad 1536 113 } 114 115 waitUntilApzStable() 116 .then(forceLayerTreeToCompositor) 117 .then(test) 118 .then(subtestDone, subtestFailed); 119 </script> 120 </head> 121 <body> 122 <a id="theplace" target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1689492">Mozilla Bug 1689492</a> 123 <!-- Put enough content into the page to make it have a nonzero scroll range, not needed --> 124 <div style="height: 5000px"></div> 125 </body> 126 </html>