| <!DOCTYPE html> |
| <style> |
| .row-wrapper, .column-wrapper { |
| margin: 4px 0; |
| overflow: auto; |
| direction: rtl; |
| border: 2px solid black; |
| } |
| |
| .column-wrapper { |
| width: 300px; |
| } |
| |
| .row-wrapper { |
| height: 300px; |
| writing-mode: vertical-rl; |
| } |
| |
| .column-wrapper > div { |
| /* This border represents the expected rendering of the testcase's |
| "margin:4px". This border should occupy the same space as that margin |
| would, and it should create the same amount of scrollable overflow. (We |
| can't just use "margin:4px" here, because this reference case uses block |
| layout, and margins have different behavior with respect to collapsing and |
| scrollable-overflow impact in block vs. flexbox layout.) */ |
| border: 4px solid white; |
| height: 30px; |
| background: #CCC; |
| } |
| |
| .h-overflow { |
| width: 500px; |
| } |
| |
| .row-wrapper > div { |
| /* As noted above, this is a mockup for the "margin:4px" in the testcase. */ |
| border: 4px solid white; |
| width: 30px; |
| background: #CCC; |
| } |
| |
| .v-overflow { |
| height: 500px; |
| } |
| |
| </style> |
| |
| <div class=column-wrapper> |
| <div>one</div> |
| <div class=h-overflow>two</div> |
| </div> |
| |
| <div class=row-wrapper> |
| <div>one</div> |
| <div class=v-overflow>two</div> |
| </div> |