viewport-segments-segments-property.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:
- /viewport-segments/viewport-segments-segments-property.https.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/resources/testdriver.js"></script>

<script src="/resources/testdriver-vendor.js"></script>

</head>

<body>

<iframe src="about:blank"></iframe>

</body>

<script>

'use strict';

promise_test(async (t) => {

  t.add_cleanup(async () => {

    await test_driver.clear_display_features();

});

  // When the viewport is not divided the segments property should return an

  // array with one segment, the size of the viewport.

  assert_equals(viewport.segments.length, 1);

  let segment = viewport.segments[0];

  assert_equals(segment.x, 0);

  assert_equals(segment.y, 0);

  assert_equals(segment.width, window.innerWidth);

  assert_equals(segment.height,  window.innerHeight);

  // iframes do not receive segments information.

  assert_equals(window.frames[0].viewport.segments, null);

  const displayFeatureLength = 10;

  const horizontalViewportSegmentsMQL = window.matchMedia('(horizontal-viewport-segments: 2)');

  let promise = new Promise(resolve => {

    horizontalViewportSegmentsMQL.addEventListener(

      'change',

      () => { resolve(horizontalViewportSegmentsMQL.matches); },

      { once: true }

);

});

  const leftOffset =

    Math.round(window.innerWidth / 2 - displayFeatureLength / 2);

  await test_driver.set_display_features([{

    orientation: 'vertical',

    maskLength: displayFeatureLength,

    offset: leftOffset

  }]);

  assert_true(await promise);

  assert_equals(viewport.segments.length, 2);

  const segmentLeft = viewport.segments[0];

  const epsilon = 1;

  assert_equals(segmentLeft.x, 0);

  assert_equals(segmentLeft.y, 0);

  assert_approx_equals(segmentLeft.width, leftOffset, epsilon);

  assert_equals(segmentLeft.height,  window.innerHeight);

  const segmentRight = viewport.segments[1];

  assert_approx_equals(segmentRight.x,

    Math.round(window.innerWidth / 2 + displayFeatureLength / 2), epsilon);

  assert_equals(segmentRight.y, 0);

  assert_approx_equals(segmentRight.width, leftOffset, epsilon);

  assert_equals(segmentRight.height,  window.innerHeight);

  // iframes do not receive segments information.

  assert_equals(window.frames[0].viewport.segments, null);

  const verticalViewportSegmentsMQL = window.matchMedia('(vertical-viewport-segments: 2)');

  promise = new Promise(resolve => {

    verticalViewportSegmentsMQL.addEventListener(

      'change',

      () => { resolve(verticalViewportSegmentsMQL.matches); },

      { once: true }

);

});

  const topOffset =

    Math.round(window.innerHeight / 2 - displayFeatureLength / 2);

  await test_driver.set_display_features([{

    orientation: 'horizontal',

    maskLength: displayFeatureLength,

    offset: topOffset

  }]);

  assert_true(await promise);

  assert_equals(viewport.segments.length, 2);

  const segmentTop = viewport.segments[0];

  assert_equals(segmentTop.x, 0);

  assert_equals(segmentTop.y, 0);

  assert_equals(segmentTop.width, window.innerWidth);

  assert_approx_equals(segmentTop.height, topOffset, epsilon);

  const segmentBottom = viewport.segments[1];

  assert_equals(segmentBottom.x, 0);

  assert_approx_equals(segmentBottom.y,

    Math.round(window.innerHeight / 2 + displayFeatureLength / 2), epsilon);

  assert_equals(segmentBottom.width, window.innerWidth);

  assert_approx_equals(segmentBottom.height,  topOffset, epsilon);

  // iframes do not receive segments information.

  assert_equals(window.frames[0].viewport.segments, null);

  const oneSegmentMQL = window.matchMedia('(vertical-viewport-segments: 1)');

  promise = new Promise(resolve => {

    oneSegmentMQL.addEventListener(

      'change',

      () => { resolve(oneSegmentMQL.matches); },

      { once: true }

);

});

  await test_driver.clear_display_features();

  assert_true(await promise);

  segment = viewport.segments[0];

  assert_equals(segment.x, 0);

  assert_equals(segment.y, 0);

  assert_equals(segment.width, window.innerWidth);

  assert_equals(segment.height,  window.innerHeight);

  // iframes do not receive segments information.

  assert_equals(window.frames[0].viewport.segments, null);

}, 'Tests the Viewport Segments Media Query change event handler.');

</script>

</html>