1 files changed, 115 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/dialog.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/dialog.html
new file mode 100644
index 0000000000..3588e03670
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/dialog.html
@@ -0,0 +1,115 @@
+<!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>