OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <script> | 4 <link rel="stylesheet" href="resources/dialog.css"> |
5 </script> | |
6 <style> | |
7 .pseudodialog { | |
8 position: absolute; | |
9 left: 0; right: 0; | |
10 margin: auto; | |
11 border: solid; | |
12 padding: 1em; | |
13 background: white; | |
14 color: black; | |
15 } | |
16 </style> | |
17 </head> | 5 </head> |
18 <body> | 6 <body> |
19 <p> | 7 <p> |
20 This tests that a modal dialog's containing block is in the initial containing b
lock and that it is unaffected by | 8 This tests that a modal dialog's containing block is in the initial containing b
lock and that it is unaffected by |
21 ancestor elements with overflow or opacity. | 9 ancestor elements with overflow or opacity. |
22 <div class="pseudodialog" style="position: absolute; top: 100px; height: 250px;
width: 90%; background-color: yellow"> | 10 <div class="pseudodialog" style="position: absolute; top: 100px; height: 250px;
width: 90%; background-color: yellow"> |
23 This dialog should be onscreen with a width of 90% of the page. It is the ch
ild of an narrow element | 11 This dialog should be onscreen with a width of 90% of the page. It is the ch
ild of an narrow element |
24 positioned off screen, but the containing block of a top layer element is th
e initial containing block, so its | 12 positioned off screen, but the containing block of a top layer element is th
e initial containing block, so its |
25 position and percent lengths are relative to that. | 13 position and percent lengths are relative to that. |
26 </div> | 14 </div> |
27 <div class="pseudodialog" style="position: absolute; top: 200px; left: 0px; heig
ht: 100px; background-color: cyan"> | 15 <div class="pseudodialog" style="position: absolute; top: 200px; left: 0px; heig
ht: 100px; background-color: cyan"> |
28 This dialog should be unaffected by its ancestor with overflow. It should no
t be clipped. | 16 This dialog should be unaffected by its ancestor with overflow. It should no
t be clipped. |
29 </div> | 17 </div> |
30 <div class="pseudodialog" style="position: absolute; top: 250px; left: 0px; back
ground-color: magenta"> | 18 <div class="pseudodialog" style="position: absolute; top: 250px; left: 0px; back
ground-color: magenta"> |
31 This dialog should be unaffected by its ancestor with opacity. | 19 This dialog should be unaffected by its ancestor with opacity. |
32 </div> | 20 </div> |
33 </body> | 21 </body> |
34 </html> | 22 </html> |
OLD | NEW |