diff options
Diffstat (limited to 'devtools/client/responsive/test/browser/browser_viewport_fallback_width.js')
-rw-r--r-- | devtools/client/responsive/test/browser/browser_viewport_fallback_width.js | 53 |
1 files changed, 53 insertions, 0 deletions
diff --git a/devtools/client/responsive/test/browser/browser_viewport_fallback_width.js b/devtools/client/responsive/test/browser/browser_viewport_fallback_width.js new file mode 100644 index 0000000000..73ae4b211b --- /dev/null +++ b/devtools/client/responsive/test/browser/browser_viewport_fallback_width.js @@ -0,0 +1,53 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that the viewport's ICB width will use the simulated screen width +// if the simulated width is larger than the desktop viewport width default +// (980px). + +// The HTML below sets up the test such that the "inner" div is aligned to the end +// (right-side) of the viewport. By doing this, it makes it easier to have our test +// target an element whose bounds are outside of the desktop viewport width default +// for device screens greater than 980px. +const TEST_URL = + `data:text/html;charset=utf-8,` + + `<div id="outer" style="display: grid; justify-items: end; font-size: 64px"> + <div id="inner">Click me!</div> + </div>`; + +addRDMTask(TEST_URL, async function ({ ui, manager }) { + info("Toggling on touch simulation."); + reloadOnTouchChange(true); + await toggleTouchSimulation(ui); + // It's important we set a viewport width larger than 980px for this test to be correct. + // So let's choose viewport width: 1280x600 + await setViewportSizeAndAwaitReflow(ui, manager, 1280, 600); + + await testICBWidth(ui); + + info("Toggling off touch simulation."); + await toggleTouchSimulation(ui); + reloadOnTouchChange(false); +}); + +async function testICBWidth(ui) { + await SpecialPowers.spawn(ui.getViewportBrowser(), [], async function () { + const innerDiv = content.document.getElementById("inner"); + + innerDiv.addEventListener("click", () => { + innerDiv.style.color = "green"; //rgb(0,128,0) + }); + + info("Check that touch point (via click) registers on inner div."); + const mousedown = ContentTaskUtils.waitForEvent(innerDiv, "click"); + await EventUtils.synthesizeClick(innerDiv); + await mousedown; + + const win = content.document.defaultView; + const bg = win.getComputedStyle(innerDiv).getPropertyValue("color"); + + is(bg, "rgb(0, 128, 0)", "inner div's background color changed to green."); + }); +} |