test_viewport_units_with_dynamic_toolbar.html (1786B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Tests for viewport units with dynamic toolbar</title> 6 <script src="/tests/SimpleTest/SimpleTest.js"></script> 7 <link rel="stylesheet" href="/tests/SimpleTest/test.css"/> 8 </head> 9 <body> 10 <p id="display"></p> 11 <div id="content" style="display: none"></div> 12 <pre id="test"></pre> 13 <script> 14 const TOOLBAR_HEIGHT = 100; 15 add_task(async () => { 16 await SpecialPowers.pushPrefEnv({ 17 set: [ 18 ["layout.dynamic-toolbar-max-height", TOOLBAR_HEIGHT], 19 ["dom.meta-viewport.enabled",true], 20 ], 21 }); 22 23 // Load initial-scale=1.0 document in a new tab. 24 let newWindow = window.open("file_viewport_units_with_dynamic_toolbar.html"); 25 await new Promise(resolve => { 26 newWindow.addEventListener("load", () => { 27 resolve() 28 }) 29 }); 30 31 const metrics = await SpecialPowers.spawn(newWindow, [], () => { 32 return { 33 scale: content.visualViewport.scale, 34 vh: content.document.querySelector("div").getBoundingClientRect().height, 35 }; 36 }); 37 38 is(metrics.scale, 1.0, "The document is scaled by 1.0"); 39 40 // (Pinch-)Zoom in the document. 41 SpecialPowers.getDOMWindowUtils(newWindow).setResolutionAndScaleTo(2.0); 42 43 // Change the full-zoom value and restore it to invalidate viewport units. 44 SpecialPowers.setFullZoom(newWindow, 2.0); 45 SpecialPowers.setFullZoom(newWindow, 1.0); 46 47 const metricsOnZoomed = await SpecialPowers.spawn(newWindow, [], () => { 48 return { 49 scale: content.visualViewport.scale, 50 vh: content.document.querySelector("div").getBoundingClientRect().height, 51 }; 52 }); 53 54 is(metricsOnZoomed.scale, 2.0, "The document is now scaled by 2.0"); 55 is(metricsOnZoomed.vh, metrics.vh, "The vh units value should be same"); 56 57 newWindow.close(); 58 }); 59 </script> 60 </body> 61 </html>