| <!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 } |
| |
| #source{ |
| -webkit-flow-into: main-thread; |
| } |
| |
| .region { width: 100px; height:300px; -webkit-flow-from: main-thread; border:1px solid black; padding:5px } |
| |
| .pass{ |
| color: green; |
| } |
| |
| .error{ |
| color: red; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="source" class="pass"> |
| <div style="width:100px;">first flow content</div> |
| <div style="width:100px;">second flow content</div> |
| </div> |
| <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 class="error">FAIL if this text is displayed.</div> |
| </div> |
| <div id="region2" class="region"> |
| <div class="error">FAIL if this text is displayed.</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> |
