| <html> |
| <head> |
| <style> |
| .content { |
| background-color: blue; |
| color: blue; |
| display: block; |
| position: relative; |
| padding: 0px; |
| border: none; |
| width: 80px; |
| } |
| |
| #content1 { |
| height: 80px; |
| } |
| |
| #content2 { |
| height: 40px; |
| } |
| |
| #region1 { |
| width: 160px; |
| height: 80px; |
| } |
| #region2 { |
| width: 400px; |
| height: 100px; |
| } |
| .red { |
| width: 100%; |
| height: 100%; |
| background-color: red; |
| } |
| </style> |
| </head> |
| |
| <body> |
| <ul> |
| <li>The blue squares are a dialog element flowed across two regions.</li> |
| <li>Test passes if you only see two blue rectangles.</li> |
| <li>Test fails if you can see text or the red color.</li> |
| </ul> |
| <div id="region1"> |
| <dialog open class="content" id="content1"> |
| xxxx<br>xxxx<br>xxxx<br>xxxx<br> |
| </dialog> |
| </div> |
| <div id="region2"> |
| <dialog open class="content" id="content2"> |
| Test failed!<br>xxxx |
| </dialog> |
| </div> |
| </body> |
| </html> |
