browser_viewport_fallback_width.js (1925B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Test that the viewport's ICB width will use the simulated screen width 7 // if the simulated width is larger than the desktop viewport width default 8 // (980px). 9 10 // The HTML below sets up the test such that the "inner" div is aligned to the end 11 // (right-side) of the viewport. By doing this, it makes it easier to have our test 12 // target an element whose bounds are outside of the desktop viewport width default 13 // for device screens greater than 980px. 14 const TEST_URL = 15 `data:text/html;charset=utf-8,` + 16 `<div id="outer" style="display: grid; justify-items: end; font-size: 64px"> 17 <div id="inner">Click me!</div> 18 </div>`; 19 20 addRDMTask(TEST_URL, async function ({ ui, manager }) { 21 info("Toggling on touch simulation."); 22 reloadOnTouchChange(true); 23 await toggleTouchSimulation(ui); 24 // It's important we set a viewport width larger than 980px for this test to be correct. 25 // So let's choose viewport width: 1280x600 26 await setViewportSizeAndAwaitReflow(ui, manager, 1280, 600); 27 28 await testICBWidth(ui); 29 30 info("Toggling off touch simulation."); 31 await toggleTouchSimulation(ui); 32 reloadOnTouchChange(false); 33 }); 34 35 async function testICBWidth(ui) { 36 await SpecialPowers.spawn(ui.getViewportBrowser(), [], async function () { 37 const innerDiv = content.document.getElementById("inner"); 38 39 innerDiv.addEventListener("click", () => { 40 innerDiv.style.color = "green"; //rgb(0,128,0) 41 }); 42 43 info("Check that touch point (via click) registers on inner div."); 44 const mousedown = ContentTaskUtils.waitForEvent(innerDiv, "click"); 45 await EventUtils.synthesizeClick(innerDiv); 46 await mousedown; 47 48 const bg = content.getComputedStyle(innerDiv).getPropertyValue("color"); 49 50 is(bg, "rgb(0, 128, 0)", "inner div's background color changed to green."); 51 }); 52 }