visual-viewport.https.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /fenced-frame/visual-viewport.https.html - WPT Dashboard Interop Dashboard

<!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>