| <!DOCTYPE HTML> |
| |
| <html> |
| <head> |
| |
| <!-- This test checks that content can be redirected to a region. It also |
| tries out a validation strategy that recreates the intended display |
| using non-region markup. If top does not match the bottom then the |
| result should be rejected. --> |
| |
| <style type="text/css"> |
| html { |
| -webkit-writing-mode: vertical-rl; |
| -webkit-font-smoothing: none; |
| } |
| |
| .region{ |
| position: relative; z-index: 1; /* regions create Stacking Contexts */ |
| width: 100px; |
| height: 300px; |
| border: 1px solid black; /* to stop the margin collapsing */ |
| padding: 5px; |
| } |
| |
| .pass{ |
| color: green; |
| } |
| </style> |
| </head> |
| <body> |
| <div> |
| The words "flow content" in green should display twice after this div, |
| and there should be two copies of this content that match. |
| </div> |
| <div id="region1" class="region"> |
| <div id="source" class="pass"> |
| <div style="width:100px;">first flow content</div> |
| </div> |
| </div> |
| <div id="region2" class="region"> |
| <div id="source" class="pass"> |
| <div style="width:100px;">second flow content</div> |
| </div> |
| </div> |
| <div> |
| The words "flow content" in green should display after this div, |
| and there should be two copies of this content that match. |
| </div> |
| <div class="pass"> |
| <p>flow content</p> |
| </div> |
| </body> |
| </html> |
