diff options
Diffstat (limited to 'testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/dialog.html')
-rw-r--r-- | testing/web-platform/tests/html/rendering/non-replaced-elements/flow-content-0/dialog.html | 115 |
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> |