Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=2100,initial-scale=0.4"/>
<title>Tests that double tap to zoom in iframe works regardless whether cross-origin or not</title>
<script src="apz_test_native_event_utils.js"></script>
<script src="apz_test_utils.js"></script>
<script src="/tests/SimpleTest/paint_listener.js"></script>
<style>
html {
scrollbar-width: none;
}
iframe {
position: absolute;
top: 100px;
left: 100px;
border: none;
}
</style>
<script>
async function setupIframe(aURL) {
const iframe = document.querySelector("iframe");
const iframeLoadPromise = promiseOneEvent(iframe, "load", null);
iframe.src = aURL;
await iframeLoadPromise;
info(`${aURL} loaded`);
await SpecialPowers.spawn(iframe, [], async () => {
await content.wrappedJSObject.waitUntilApzStable();
await SpecialPowers.contentTransformsReceived(content);
});
}
async function targetElementPosition() {
const iframe = document.querySelector("iframe");
return SpecialPowers.spawn(iframe, [], async () => {
return content.document.querySelector("#target").getBoundingClientRect();
});
}
const useTouchpad = (location.search == "?touchpad");
async function test(aTestFile) {
let iframeURL = SimpleTest.getTestFileURL(aTestFile);
// Load the test document in the same origin.
await setupIframe(iframeURL);
let resolution = await getResolution();
ok(resolution > 0,
"The initial_resolution is " + resolution + ", which is some sane value");
let initial_resolution = resolution;
let pos = await targetElementPosition();
const iframe = document.querySelector("iframe");
await doubleTapOn(iframe, pos.x + 10, pos.y + 10, useTouchpad);
let prev_resolution = resolution;
resolution = await getResolution();
ok(resolution > prev_resolution, "The first double-tap has increased the resolution to " + resolution);
let zoomedInState = cloneVisualViewport();
await doubleTapOn(iframe, pos.x + 10, pos.y + 10, useTouchpad);
prev_resolution = resolution;
resolution = await getResolution();
ok(resolution < prev_resolution, "The second double-tap has decreased the resolution to " + resolution);
let zoomedOutState = cloneVisualViewport();
// Reset the scale to the initial one since in the `visible: overflow` case
// the second double-tap doesn't restore to the initial scale.
SpecialPowers.DOMWindowUtils.setResolutionAndScaleTo(initial_resolution);
await promiseApzFlushedRepaints();
// Now load the document in an OOP iframe.
await setupIframe(iframeURL);
pos = await targetElementPosition();
await doubleTapOn(iframe, pos.x + 10, pos.y + 10, useTouchpad);
prev_resolution = resolution;
resolution = await getResolution();
ok(resolution > prev_resolution, "The first double-tap has increased the resolution to " + resolution);
compareVisualViewport(zoomedInState, cloneVisualViewport(), "zoomed-in state");
await doubleTapOn(iframe, pos.x + 10, pos.y + 10, useTouchpad);
compareVisualViewport(zoomedOutState, cloneVisualViewport(), "zoomed-out state");
}
async function moveIframe() {
const iframe = document.querySelector("iframe");
iframe.style.top = "500vh";
// Scroll to the bottom to make the layout scroll offset non-zero.
window.scrollTo(0, document.documentElement.scrollHeight);
ok(window.scrollY > 0, "The root scroll position should be non-zero");
await SpecialPowers.spawn(iframe, [], async () => {
await SpecialPowers.contentTransformsReceived(content);
});
}
waitUntilApzStable()
.then(async () => test("helper_doubletap_zoom_oopif_subframe-1.html"))
// A test case where the layout scroll offset isn't zero.
.then(async () => moveIframe())
.then(async () => test("helper_doubletap_zoom_oopif_subframe-1.html"))
// A test case where the layout scroll offset in the iframe isn't zero.
.then(async () => test("helper_doubletap_zoom_oopif_subframe-2.html#target"))
// A test case where the double-tap-to-zoom target element is `overflow: visible`.
.then(async () => test("helper_doubletap_zoom_oopif_subframe-3.html#target"))
// Similar to above but the target element has positive `margin-top`.
.then(async () => test("helper_doubletap_zoom_oopif_subframe-4.html#target"))
.then(subtestDone, subtestFailed);
</script>
</head>
<body>
<iframe width="500" height="500"></iframe>
</body>
</html>