17 <script src=
"../../../resources/js-test.js"></script>
19 <body style=
"height: 10000px; width: 10000px">
20 <div style=
"position: absolute; top: 5000px; left: 5000px; width: 20px;">
21 <dialog id=
"dialog" style=
"top: 1200px; left: 1200px; right: auto; height: 100px; width: 50%; background-color: yellow">
25 debug("This tests that a modal dialog's containing block is the initial containing block.");
26 debug('The dialog should be onscreen with a width of 50% of the viewport. It is the child of a ' +
27 'narrow element positioned off screen, but its containing block is the initial containing ' +
28 'block, so its position and percent lengths are relative to that.');
30 function checkPosition(dialog
) {
31 shouldBe('dialog.offsetParent', 'null');
32 shouldBe('dialog.offsetTop', '1200');
33 shouldBe('dialog.offsetLeft', '1200');
34 // Since dialog's 'width' is '50%', the expected width is half of the
35 // viewport width, but viewport width may be odd. It seems Blink rounds up for
36 // percentage lengths, so use Math.ceil here.
37 expectedWidth
= Math
.ceil(document
.documentElement
.clientWidth
/ 2);
38 shouldBe('dialog.clientWidth', 'expectedWidth');
41 window
.scroll(1000, 1000);
42 dialog
= document
.getElementById('dialog');
44 checkPosition(dialog
);