summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/fenced-frame/visual-viewport.https.html
blob: 7870f11e8c73282a6831f0e9e1ac3ce634f2b4ca (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
<!DOCTYPE html>
<title>Test visualViewport inside a fenced frame.</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/common/utils.js"></script>
<script src="/common/dispatcher/dispatcher.js"></script>
<script src="resources/utils.js"></script>

<body>
<script>
function pinch_zoom_in() {
  return new test_driver.Actions()
      .setContext(window)
      .addPointer("finger1", "touch")
      .addPointer("finger2", "touch")
      .pointerMove(400, 250, {origin: "viewport", sourceName: "finger1"})
      .pointerMove(400, 350, {origin: "viewport", sourceName: "finger2"})
      .pointerDown({sourceName: "finger1"})
      .pointerDown({sourceName: "finger2"})
      .pointerMove(400, 200, {origin: "viewport", sourceName: "finger1"})
      .pointerMove(400, 400, {origin: "viewport", sourceName: "finger2"})
      .pointerUp({sourceName: "finger1"})
      .pointerUp({sourceName: "finger2"})
      .send();
}

promise_test(async () => {
  // Create a fenced frame, and use the same target name inside of it.
  const frame = attachFencedFrameContext({html: `
    <!DOCTYPE html>
    <style>
      body {
        /* Make fenced frame scrollable */
        width: 200vw;
        height: 200vh;
      }

      ::-webkit-scrollbar {
        display: none;
      }
    </style>`});

  const is_mac = navigator.platform.indexOf('Mac') == 0;

  // Mac doesn't support pinch zooming via test driver so just avoid trying.
  if (!is_mac) {
    await pinch_zoom_in();

    // Run the test zoomed in to ensure the fenced frame doesn't incorrectly
    // bring values in from its embedder.
    assert_greater_than(window.visualViewport.scale, 1,
        '[PRECONDITION] outer window pinch-zoomed in');
  }

  await frame.execute(async (width, height) => {
    window.scrollTo(30, 40);
    assert_equals(window.scrollX, 30, '[PRECONDITION] document scrolled x');
    assert_equals(window.scrollY, 40, '[PRECONDITION] document scrolled y');

    assert_equals(window.visualViewport.width, width,
                  'visualViewport.width matches fencedframe width');
    assert_equals(window.visualViewport.height, height,
                  'visualViewport.height matches fencedframe height');
    assert_equals(window.visualViewport.scale, 1,
                  'visualViewport.scale is 1');
    assert_equals(window.visualViewport.offsetLeft, 0,
                  'visualViewport.offsetLeft is 0');
    assert_equals(window.visualViewport.offsetTop, 0,
                  'visualViewport.offsetTop is 0');
    assert_equals(window.visualViewport.pageLeft, window.scrollX,
                  'visualViewport.pageLeft reflects only window scroll offset');
    assert_equals(window.visualViewport.pageTop, window.scrollY,
                  'visualViewport.pageTop reflects only window scroll offset');
  }, [frame.clientWidth, frame.clientHeight]);

}, 'visualViewport values inside fenced frame');

</script>
</body>