dialog.html - mozsearch

Enable keyboard shortcuts

This test has a WPT meta file that expects 2 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /html/rendering/non-replaced-elements/flow-content-0/dialog.html - WPT Dashboard Interop Dashboard

<!doctype html>

<title>The dialog element</title>

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

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

<style>

 #ref-element {

   padding-top: 1em;

   background-color: white;

   color: black;

   border: solid;

</style>

<!--

HTML used to have a style rule with `@media screen and (max-width: 540px)`.

That was removed in https://github.com/whatwg/html/pull/2459

-->

<div><iframe style="width: 540px" src="support/dialog-framed.html"></iframe></div>

<div><iframe style="width: 538px" src="support/dialog-framed.html"></iframe></div>

<div id=ref-element></div>

<script>

setup(() => {

  const refStyle = getComputedStyle(document.getElementById('ref-element'));

  window.ref1em = refStyle.paddingTop;

  window.refWhite = refStyle.backgroundColor;

  window.refBlack = refStyle.color;

  window.refMediumBorder = refStyle.borderTopWidth;

  window.iframeHeight = 150;

  const bodyTopMargin = 8;

  window.dialogSize = parseFloat(ref1em) * 2 + parseFloat(refMediumBorder) * 2;

  window.normalBottomDistance = iframeHeight - bodyTopMargin - dialogSize;

}, {explicit_done: true});

onload = () => {

  for (let iframe of document.querySelectorAll('iframe')) {

    const win = iframe.contentWindow;

    const styleAttr = iframe.getAttribute('style');

    const iframeWidth = parseInt(styleAttr.split(' ')[1]);

    const horizontalDistance = iframeWidth / 2 - dialogSize / 2;

    const verticalDistance = iframeHeight / 2 - dialogSize / 2;

    test(() => {

      const style = win.getComputedStyle(win.dialogClosed);

      assert_equals(style.position, 'absolute', 'position');

      assert_equals(style.display, 'none', 'display');

      assert_equals(style.overflow, 'visible', 'overflow');

      assert_equals(style.top, 'auto', 'top');

      assert_equals(style.right, '0px', 'right');

      assert_equals(style.bottom, 'auto', 'bottom');

      assert_equals(style.left, '0px', 'left');

      assert_equals(style.width, 'fit-content', 'width');

      assert_equals(style.height, 'fit-content', 'height');

      assert_equals(style.maxWidth, 'none', 'max-width');

      assert_equals(style.maxHeight, 'none', 'max-height');

      assert_equals(style.marginTop, 'auto', 'marginTop');

      assert_equals(style.marginRight, 'auto', 'marginRight');

      assert_equals(style.marginBottom, 'auto', 'marginBottom');

      assert_equals(style.marginLeft, 'auto', 'marginLeft');

      assertCommon(style);

    }, `Closed dialog in ${styleAttr} iframe`);

    test(() => {

      const style = win.getComputedStyle(win.dialogOpen);

      assert_equals(style.position, 'absolute', 'position');

      assert_equals(style.display, 'block', 'display');

      assert_equals(style.overflow, 'visible', 'overflow');

      assert_equals(style.top, '8px', 'top');

      assert_equals(style.right, '0px', 'right');

      assert_equals(style.bottom, normalBottomDistance + 'px', 'bottom');

      assert_equals(style.left, '0px', 'left');

      assert_equals(style.width, '0px', 'width');

      assert_equals(style.height, '0px', 'height');

      assert_equals(style.maxWidth, 'none', 'max-width');

      assert_equals(style.maxHeight, 'none', 'max-height');

      assert_equals(style.marginTop, '0px', 'marginTop');

      assert_equals(style.marginRight, horizontalDistance + 'px', 'marginRight');

      assert_equals(style.marginBottom, '0px', 'marginBottom');

      assert_equals(style.marginLeft, horizontalDistance + 'px', 'marginLeft');

      assertCommon(style);

    }, `Open dialog in ${styleAttr} iframe`);

    test(() => {

      const style = win.getComputedStyle(win.dialogModal);

      assert_equals(style.position, 'fixed', 'position');

      assert_equals(style.display, 'block', 'display');

      assert_equals(style.overflow, 'auto', 'overflow');

      assert_equals(style.top, '0px', 'top');

      assert_equals(style.right, '0px', 'right');

      assert_equals(style.bottom, '0px', 'bottom');

      assert_equals(style.left, '0px', 'left');

      assert_equals(style.width, '0px', 'width');

      assert_equals(style.height, '0px', 'height');

      assert_equals(style.maxWidth, 'calc(100% - 38px)', 'max-width');

      assert_equals(style.maxHeight, 'calc(100% - 38px)', 'max-height');

      assert_equals(style.marginTop, verticalDistance + 'px', 'marginTop');

      assert_equals(style.marginRight, horizontalDistance + 'px', 'marginRight');

      assert_equals(style.marginBottom, verticalDistance + 'px', 'marginBottom');

      assert_equals(style.marginLeft, horizontalDistance + 'px', 'marginLeft');

      assertCommon(style);

    }, `Modal dialog in ${styleAttr} iframe`);

  done();

};

function assertCommon(style) {

  assert_equals(style.borderTopStyle, 'solid', 'borderTopStyle');

  assert_equals(style.borderRightStyle, 'solid', 'borderRightStyle');

  assert_equals(style.borderBottomStyle, 'solid', 'borderBottomStyle');

  assert_equals(style.borderLeftStyle, 'solid', 'borderLeftStyle');

  assert_equals(style.paddingTop, ref1em, 'paddingTop');

  assert_equals(style.paddingRight, ref1em, 'paddingRight');

  assert_equals(style.paddingBottom, ref1em, 'paddingBottom');

  assert_equals(style.paddingLeft, ref1em, 'paddingLeft');

  assert_equals(style.backgroundColor, refWhite, 'backgroundColor');

  assert_equals(style.color, refBlack, 'color');

</script>