1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
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.");
});
}
|
