overflow-top-left-ref.html (1185B)
1 <!DOCTYPE html> 2 <style> 3 .row-wrapper, .column-wrapper { 4 margin: 4px 0; 5 overflow: auto; 6 direction: rtl; 7 border: 2px solid black; 8 } 9 10 .column-wrapper { 11 width: 300px; 12 } 13 14 .row-wrapper { 15 height: 300px; 16 writing-mode: vertical-rl; 17 } 18 19 .column-wrapper > div { 20 /* This border represents the expected rendering of the testcase's 21 "margin:4px". This border should occupy the same space as that margin 22 would, and it should create the same amount of scrollable overflow. (We 23 can't just use "margin:4px" here, because this reference case uses block 24 layout, and margins have different behavior with respect to collapsing and 25 scrollable-overflow impact in block vs. flexbox layout.) */ 26 border: 4px solid white; 27 height: 30px; 28 background: #CCC; 29 } 30 31 .h-overflow { 32 width: 500px; 33 } 34 35 .row-wrapper > div { 36 /* As noted above, this is a mockup for the "margin:4px" in the testcase. */ 37 border: 4px solid white; 38 width: 30px; 39 background: #CCC; 40 } 41 42 .v-overflow { 43 height: 500px; 44 } 45 46 </style> 47 48 <div class=column-wrapper> 49 <div>one</div> 50 <div class=h-overflow>two</div> 51 </div> 52 53 <div class=row-wrapper> 54 <div>one</div> 55 <div class=v-overflow>two</div> 56 </div>