top-layer-containing-block-ref.html (1071B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="stylesheet" href="resources/dialog.css"> 5 </head> 6 <body> 7 <p> 8 This tests that a modal dialog's containing block is in the initial containing block and that it is unaffected by 9 ancestor elements with overflow or opacity. 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 child of an narrow element 12 positioned off screen, but the containing block of a top layer element is the initial containing block, so its 13 position and percent lengths are relative to that. 14 </div> 15 <div class="pseudodialog" style="position: absolute; top: 200px; left: 0px; height: 100px; background-color: cyan"> 16 This dialog should be unaffected by its ancestor with overflow. It should not be clipped. 17 </div> 18 <div class="pseudodialog" style="position: absolute; top: 250px; left: 0px; background-color: magenta"> 19 This dialog should be unaffected by its ancestor with opacity. 20 </div> 21 </body> 22 </html>