dialog.html (5315B)
1 <!doctype html> 2 <title>The dialog element</title> 3 <script src=/resources/testharness.js></script> 4 <script src=/resources/testharnessreport.js></script> 5 <style> 6 #ref-element { 7 padding-top: 1em; 8 background-color: white; 9 color: black; 10 border: solid; 11 } 12 </style> 13 <!-- 14 HTML used to have a style rule with `@media screen and (max-width: 540px)`. 15 That was removed in https://github.com/whatwg/html/pull/2459 16 --> 17 <div><iframe style="width: 540px" src="support/dialog-framed.html"></iframe></div> 18 <div><iframe style="width: 538px" src="support/dialog-framed.html"></iframe></div> 19 <div id=ref-element></div> 20 <script> 21 setup(() => { 22 const refStyle = getComputedStyle(document.getElementById('ref-element')); 23 window.ref1em = refStyle.paddingTop; 24 window.refWhite = refStyle.backgroundColor; 25 window.refBlack = refStyle.color; 26 window.refMediumBorder = refStyle.borderTopWidth; 27 window.iframeHeight = 150; 28 const bodyTopMargin = 8; 29 window.dialogSize = parseFloat(ref1em) * 2 + parseFloat(refMediumBorder) * 2; 30 window.normalBottomDistance = iframeHeight - bodyTopMargin - dialogSize; 31 }, {explicit_done: true}); 32 33 onload = () => { 34 for (let iframe of document.querySelectorAll('iframe')) { 35 const win = iframe.contentWindow; 36 const styleAttr = iframe.getAttribute('style'); 37 const iframeWidth = parseInt(styleAttr.split(' ')[1]); 38 const horizontalDistance = iframeWidth / 2 - dialogSize / 2; 39 const verticalDistance = iframeHeight / 2 - dialogSize / 2; 40 test(() => { 41 const style = win.getComputedStyle(win.dialogClosed); 42 assert_equals(style.position, 'absolute', 'position'); 43 assert_equals(style.display, 'none', 'display'); 44 assert_equals(style.overflow, 'visible', 'overflow'); 45 assert_equals(style.top, 'auto', 'top'); 46 assert_equals(style.right, '0px', 'right'); 47 assert_equals(style.bottom, 'auto', 'bottom'); 48 assert_equals(style.left, '0px', 'left'); 49 assert_equals(style.width, 'fit-content', 'width'); 50 assert_equals(style.height, 'fit-content', 'height'); 51 assert_equals(style.maxWidth, 'none', 'max-width'); 52 assert_equals(style.maxHeight, 'none', 'max-height'); 53 assert_equals(style.marginTop, 'auto', 'marginTop'); 54 assert_equals(style.marginRight, 'auto', 'marginRight'); 55 assert_equals(style.marginBottom, 'auto', 'marginBottom'); 56 assert_equals(style.marginLeft, 'auto', 'marginLeft'); 57 assertCommon(style); 58 }, `Closed dialog in ${styleAttr} iframe`); 59 60 test(() => { 61 const style = win.getComputedStyle(win.dialogOpen); 62 assert_equals(style.position, 'absolute', 'position'); 63 assert_equals(style.display, 'block', 'display'); 64 assert_equals(style.overflow, 'visible', 'overflow'); 65 assert_equals(style.top, '8px', 'top'); 66 assert_equals(style.right, '0px', 'right'); 67 assert_equals(style.bottom, normalBottomDistance + 'px', 'bottom'); 68 assert_equals(style.left, '0px', 'left'); 69 assert_equals(style.width, '0px', 'width'); 70 assert_equals(style.height, '0px', 'height'); 71 assert_equals(style.maxWidth, 'none', 'max-width'); 72 assert_equals(style.maxHeight, 'none', 'max-height'); 73 assert_equals(style.marginTop, '0px', 'marginTop'); 74 assert_equals(style.marginRight, horizontalDistance + 'px', 'marginRight'); 75 assert_equals(style.marginBottom, '0px', 'marginBottom'); 76 assert_equals(style.marginLeft, horizontalDistance + 'px', 'marginLeft'); 77 assertCommon(style); 78 }, `Open dialog in ${styleAttr} iframe`); 79 80 test(() => { 81 const style = win.getComputedStyle(win.dialogModal); 82 assert_equals(style.position, 'fixed', 'position'); 83 assert_equals(style.display, 'block', 'display'); 84 assert_equals(style.overflow, 'auto', 'overflow'); 85 assert_equals(style.top, '0px', 'top'); 86 assert_equals(style.right, '0px', 'right'); 87 assert_equals(style.bottom, '0px', 'bottom'); 88 assert_equals(style.left, '0px', 'left'); 89 assert_equals(style.width, '0px', 'width'); 90 assert_equals(style.height, '0px', 'height'); 91 assert_equals(style.maxWidth, 'calc(100% - 38px)', 'max-width'); 92 assert_equals(style.maxHeight, 'calc(100% - 38px)', 'max-height'); 93 assert_equals(style.marginTop, verticalDistance + 'px', 'marginTop'); 94 assert_equals(style.marginRight, horizontalDistance + 'px', 'marginRight'); 95 assert_equals(style.marginBottom, verticalDistance + 'px', 'marginBottom'); 96 assert_equals(style.marginLeft, horizontalDistance + 'px', 'marginLeft'); 97 assertCommon(style); 98 }, `Modal dialog in ${styleAttr} iframe`); 99 } 100 done(); 101 }; 102 103 function assertCommon(style) { 104 assert_equals(style.borderTopStyle, 'solid', 'borderTopStyle'); 105 assert_equals(style.borderRightStyle, 'solid', 'borderRightStyle'); 106 assert_equals(style.borderBottomStyle, 'solid', 'borderBottomStyle'); 107 assert_equals(style.borderLeftStyle, 'solid', 'borderLeftStyle'); 108 assert_equals(style.paddingTop, ref1em, 'paddingTop'); 109 assert_equals(style.paddingRight, ref1em, 'paddingRight'); 110 assert_equals(style.paddingBottom, ref1em, 'paddingBottom'); 111 assert_equals(style.paddingLeft, ref1em, 'paddingLeft'); 112 assert_equals(style.backgroundColor, refWhite, 'backgroundColor'); 113 assert_equals(style.color, refBlack, 'color'); 114 } 115 </script>