OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <link rel="stylesheet" href="resources/dialog.css"> | 4 <link rel="stylesheet" href="resources/dialog.css"> |
5 </head> | 5 </head> |
6 <body> | 6 <body> |
7 <p> | 7 <p> |
8 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 |
9 ancestor elements with overflow or opacity. | 9 ancestor elements with overflow or opacity. |
10 <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"> |
11 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 |
12 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 |
13 position and percent lengths are relative to that. | 13 position and percent lengths are relative to that. |
14 </div> | 14 </div> |
15 <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"> |
16 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. |
17 </div> | 17 </div> |
18 <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"> |
19 This dialog should be unaffected by its ancestor with opacity. | 19 This dialog should be unaffected by its ancestor with opacity. |
20 </div> | 20 </div> |
21 </body> | 21 </body> |
22 </html> | 22 </html> |
OLD | NEW |