third_party/WebKit/LayoutTests/dialog/top-layer-containing-block-expected.html

   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>