| <!DOCTYPE html> |
| <style> |
| .container { |
| overflow: -webkit-paged-x; |
| float: left; |
| width: 5em; |
| height: 5em; |
| line-height: 2em; |
| margin: 2px; |
| border: 1px solid hotpink; |
| column-gap: 0; /* See crbug.com/460106 */ |
| orphans: 1; |
| widows: 1; |
| } |
| </style> |
| <p>There should be 7 boxes below. Each should contain the word "PASS" |
| once, and no "FAIL". Scrollbars may or may not be present. The |
| exact position of the word "PASS" will vary from box to box.</p> |
| <div class="container"> |
| <div>PASS<br></div> |
| <div style="break-before:page;">FAIL</div> |
| </div> |
| <div class="container"> |
| <div style="break-after:page;">PASS<br></div> |
| <div>FAIL</div> |
| </div> |
| <div class="container"> |
| <div style="break-after:column;"><br></div> <!-- declaration should have no effect --> |
| <div>PASS</div> |
| </div> |
| <div class="container"> |
| <div><br></div> |
| <div style="break-before:column;">PASS</div> <!-- declaration should have no effect --> |
| </div> |
| <div class="container"> |
| PASS<br> |
| <div style="break-inside:avoid;"> |
| FAIL<br> |
| FAIL<br> |
| </div> |
| </div> |
| <div class="container"> |
| PASS<br> |
| <div style="break-inside:avoid-page;"> |
| FAIL<br> |
| FAIL<br> |
| </div> |
| </div> |
| <div class="container"> |
| <br> |
| <div style="break-inside:avoid-column;"> <!-- declaration should have no effect --> |
| PASS<br> |
| <br> |
| </div> |
| </div> |
