summaryrefslogtreecommitdiffstats
path: root/gfx/layers/apz/test/mochitest/helper_doubletap_zoom_oopif-2.html
blob: 1eda6053766a3757329b2b6f14432cec694a79a8 (plain)
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!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 {
    /* To avoid bug 1865573 */
    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.
  iframeURL = iframeURL.replace(window.location.origin, "https://example.com");
  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>