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