src/third_party/WebKit/LayoutTests/fast/regions/dialog-fragmentation.html

   1 <html>
   2     <head>
   3         <style>
   4             .content {
   5                 background-color: blue;
   6                 color: blue;
   7                 display: block;
   8                 position: relative;
   9                 padding: 0px;
  10                 border: none;
  11                 width: 80px;
  12                 height: 120px;
  13                 -webkit-flow-into: first;
  14             }
  15
  16             #region1 {
  17                 width: 160px;
  18                 height: 80px;
  19                 -webkit-flow-from: first;
  20             }
  21             #region2 {
  22                 width: 400px;
  23                 height: 100px;
  24                 -webkit-flow-from: first;
  25             }
  26             .red {
  27                 width: 100%;
  28                 height: 100%;
  29                 background-color: red;
  30             }
  31         </style>
  32     </head>
  33
  34     <body>
  35         <ul>
  36             <li>The blue squares are a dialog element flowed across two regions.</li>
  37             <li>Test passes if you only see two blue rectangles.</li>
  38             <li>Test fails if you can see text or the red color.</li>
  39         </ul>
  40         <dialog open class="content">
  41             xxxx<br>xxxx<br>xxxx<br>xxxx<br>Test failed!<br>xxxx
  42         </dialog>
  43         <div id="region1">
  44             <div class="red"></div>
  45         </div>
  46         <div id="region2">
  47             <div class="red"></div>
  48         </div>
  49     </body>
  50 </html>