block-height-007.html (5276B)
1 <!DOCTYPE html> 2 <link rel="help" 3 href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing"> 4 <meta name="assert" 5 content="margins of the stretched element are accounted for correctly in various writing mode combinations and presence of borders"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/check-layout-th.js"></script> 9 10 <style> 11 .container { 12 width: 50px; 13 height: 50px; 14 margin: 3px; 15 background: magenta; 16 position: relative; 17 } 18 19 .child { 20 margin: 1px 3px 5px 7px; 21 background: cyan; 22 font-size: 10px; 23 } 24 </style> 25 26 <div id="log"></div> 27 <div class="container" style="border-top: 5px solid;"> 28 <div class="child" data-expected-width="20" data-expected-height="49" 29 data-offset-y="1" style="width: 20px; height: stretch;">1</div> 30 </div> 31 <div class="container" style="border-top: 5px solid;"> 32 <div class="child" data-expected-width="40" data-expected-height="20" 33 data-offset-y="1" style="width: stretch; height: 20px;">2</div> 34 </div> 35 <div class="container" style="border-right: 5px solid;"> 36 <div class="child" data-expected-width="20" data-expected-height="50" 37 data-offset-y="0" style="width: 20px; height: stretch;">3</div> 38 </div> 39 <div class="container" style="border-right: 5px solid;"> 40 <div class="child" data-expected-width="40" data-expected-height="20" 41 data-offset-y="0" style="width: stretch; height: 20px;">4</div> 42 </div> 43 <div class="container" style="border-top: 5px solid;"> 44 <div class="child" data-expected-width="20" data-expected-height="49" 45 data-offset-y="1" 46 style="writing-mode: vertical-rl; width: 20px; height: stretch;">5</div> 47 </div> 48 <div class="container" style="border-top: 5px solid;"> 49 <div class="child" data-expected-width="40" data-expected-height="20" 50 data-offset-y="1" 51 style="writing-mode: vertical-rl; width: stretch; height: 20px;">6</div> 52 </div> 53 <div class="container" style="border-right: 5px solid;"> 54 <div class="child" data-expected-width="20" data-expected-height="50" 55 data-offset-y="0" 56 style="writing-mode: vertical-rl; width: 20px; height: stretch;">7</div> 57 </div> 58 <div class="container" style="border-right: 5px solid;"> 59 <div class="child" data-expected-width="40" data-expected-height="20" 60 data-offset-y="0" 61 style="writing-mode: vertical-rl; width: stretch; height: 20px;">8</div> 62 </div> 63 <div class="container" style="border-top: 5px solid;"> 64 <div class="child" data-expected-width="20" data-expected-height="49" 65 data-offset-y="1" 66 style="writing-mode: vertical-lr; width: 20px; height: stretch;">9</div> 67 </div> 68 <div class="container" style="border-top: 5px solid;"> 69 <div class="child" data-expected-width="40" data-expected-height="20" 70 data-offset-y="1" 71 style="writing-mode: vertical-lr; width: stretch; height: 20px;">10</div> 72 </div> 73 <div class="container" style="border-right: 5px solid;"> 74 <div class="child" data-expected-width="20" data-expected-height="50" 75 data-offset-y="0" 76 style="writing-mode: vertical-lr; width: 20px; height: stretch;">11</div> 77 </div> 78 <div class="container" style="border-right: 5px solid;"> 79 <div class="child" data-expected-width="40" data-expected-height="20" 80 data-offset-y="0" 81 style="writing-mode: vertical-lr; width: stretch; height: 20px;">12</div> 82 </div> 83 <div class="container" style="border-top: 5px solid;"> 84 <div class="child" data-expected-width="20" data-expected-height="49" 85 data-offset-y="1" 86 style="writing-mode: sideways-rl; width: 20px; height: stretch;">13</div> 87 </div> 88 <div class="container" style="border-top: 5px solid;"> 89 <div class="child" data-expected-width="40" data-expected-height="20" 90 data-offset-y="1" 91 style="writing-mode: sideways-rl; width: stretch; height: 20px;">14</div> 92 </div> 93 <div class="container" style="border-right: 5px solid;"> 94 <div class="child" data-expected-width="20" data-expected-height="50" 95 data-offset-y="0" 96 style="writing-mode: sideways-rl; width: 20px; height: stretch;">15</div> 97 </div> 98 <div class="container" style="border-right: 5px solid;"> 99 <div class="child" data-expected-width="40" data-expected-height="20" 100 data-offset-y="0" 101 style="writing-mode: sideways-rl; width: stretch; height: 20px;">16</div> 102 </div> 103 <div class="container" style="border-top: 5px solid;"> 104 <div class="child" data-expected-width="20" data-expected-height="49" 105 data-offset-y="1" 106 style="writing-mode: sideways-lr; width: 20px; height: stretch;">17</div> 107 </div> 108 <div class="container" style="border-top: 5px solid;"> 109 <div class="child" data-expected-width="40" data-expected-height="20" 110 data-offset-y="1" 111 style="writing-mode: sideways-lr; width: stretch; height: 20px;">18</div> 112 </div> 113 <div class="container" style="border-right: 5px solid;"> 114 <div class="child" data-expected-width="20" data-expected-height="50" 115 data-offset-y="0" 116 style="writing-mode: sideways-lr; width: 20px; height: stretch;">19</div> 117 </div> 118 <div class="container" style="border-right: 5px solid;"> 119 <div class="child" data-expected-width="40" data-expected-height="20" 120 data-offset-y="0" 121 style="writing-mode: sideways-lr; width: stretch; height: 20px;">20</div> 122 </div> 123 124 <script> 125 checkLayout('.child'); 126 </script>