1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
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>
|
