stretch-inline-size-002.html (6075B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#sizing-values"> 3 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/check-layout-th.js"></script> 7 <meta name="assert" 8 content="inline-size:stretch causes an absolutely-positioned element's content-box to be sized to fill the available space in its containing block, regardless of the writing-mode of its DOM-tree parent."> 9 <style> 10 .cb { 11 inline-size: 50px; 12 block-size: 40px; 13 14 /* This margin & border are purely cosmetic and don't impact the sizing 15 * calculations in this test: */ 16 margin: 5px; 17 border: 2px solid black; 18 19 /* This padding is relevant to 'stretch' sizing, since our padding-box 20 * forms the containing block for the abspos child. Our padding-box 21 * block-size 50 + 2*5 = 60px, and its inline-size is 40 + 2*3 = 46px */ 22 padding-inline: 5px; 23 padding-block: 3px; 24 25 /* We make each containing block an inline-level box, so we can display 26 * subtests in multiple rows, for easier visualization: */ 27 display: inline-block; 28 vertical-align: top; 29 position: relative; 30 } 31 32 .test { 33 /* To make sizes predictable, we start out at the edge of our 34 * containing block: */ 35 inset-inline-start: 0; 36 inset-block-start: 0; 37 38 position: absolute; 39 /* We have 2+3 = 5px of margin in the inline axis. This means the stretched 40 * children should all have a border-box inline-size that's 5px less than 41 * the containing block's padding-box size in the same axis. The dimension 42 * of the containing block's padding-box that we're filling will depend on 43 * whether our WM is orthogonal to it or not. If we're orthogonal, our 44 * expected stretch size is 46px - 5px = 41px. If we're not orthogonal, 45 * our expected stretch size is 60px - 5px = 55px. */ 46 margin-inline-start: 2px; 47 margin-inline-end: 3px; 48 49 /* We also have some border/padding that UAs will need to account for 50 * when computing the stretched children's content-box sizes; but these 51 * don't reduce our `data-expected-{width,height}` expectations, since 52 * those correspond to the border-box size. */ 53 border: 3px solid blue; 54 padding: 2px; 55 56 inline-size: stretch; 57 block-size: 20px; 58 background: fuchsia; 59 } 60 .htb { writing-mode: horizontal-tb; } 61 .vlr { writing-mode: vertical-lr; } 62 .vrl { writing-mode: vertical-rl; } 63 </style> 64 <script> 65 function runTests() { 66 checkLayout('.test'); 67 68 // Add box-sizing:border-box (which shouldn't impact the actual resolved 69 // box sizes that 'stretch' produces), and retest: 70 for (let elem of document.querySelectorAll(".test")) { 71 elem.style.boxSizing = "border-box"; 72 } 73 checkLayout('.test'); 74 } 75 </script> 76 <body onload="runTests()"> 77 <!-- This test is exercising cases where the abspos element's containing 78 block (which happens to be its grandparent) has a writing-mode that 79 disagrees with the abspos element's parent. We exercise all 6 80 pairwise-mismatching combinations of {htb,vlr,vrl} for the grandparent & 81 parent. For each such pair, we test all three of those same 82 writing-modes on the innermost abspos element. 83 84 Note that we use 'data-expected-{height,width}' depending on which axis 85 is the block axis for the abspos ".test" element (since that's the 86 element whose "block-size: stretch" resolution we're testing). So for 87 "test htb" elements, we check the height; whereas for "test vlr" and 88 "test vrl", we check the width. 89 --> 90 91 <!-- htb / vlr / {htb,vlr,vrl} --> 92 <div class="cb htb"><div class="vlr"> 93 <div class="test htb" data-expected-width="55"></div> 94 </div></div> 95 <div class="cb htb"><div class="vlr"> 96 <div class="test vlr" data-expected-height="41"></div> 97 </div></div> 98 <div class="cb htb"><div class="vlr"> 99 <div class="test vrl" data-expected-height="41"></div> 100 </div></div> 101 <br> 102 103 <!-- htb / vrl / {htb,vlr,vrl} --> 104 <div class="cb htb"><div class="vrl"> 105 <div class="test htb" data-expected-width="55"></div> 106 </div></div> 107 <div class="cb htb"><div class="vrl"> 108 <div class="test vlr" data-expected-height="41"></div> 109 </div></div> 110 <div class="cb htb"><div class="vrl"> 111 <div class="test vrl" data-expected-height="41"></div> 112 </div></div> 113 <br> 114 115 <!-- vlr / htb / {htb,vlr,vrl} --> 116 <div class="cb vlr"><div class="htb"> 117 <div class="test htb" data-expected-width="41"></div> 118 </div></div> 119 <div class="cb vlr"><div class="htb"> 120 <div class="test vlr" data-expected-height="55"></div> 121 </div></div> 122 <div class="cb vlr"><div class="htb"> 123 <div class="test vrl" data-expected-height="55"></div> 124 </div></div> 125 <br> 126 127 <!-- vlr / vrl / {htb,vlr,vrl} --> 128 <div class="cb vlr"><div class="vrl"> 129 <div class="test htb" data-expected-width="41"></div> 130 </div></div> 131 <div class="cb vlr"><div class="vrl"> 132 <div class="test vlr" data-expected-height="55"></div> 133 </div></div> 134 <div class="cb vlr"><div class="vrl"> 135 <div class="test vrl" data-expected-height="55"></div> 136 </div></div> 137 <br> 138 139 <!-- vrl / htb / {htb,vlr,vrl} --> 140 <div class="cb vrl"><div class="htb"> 141 <div class="test htb" data-expected-width="41"></div> 142 </div></div> 143 <div class="cb vrl"><div class="htb"> 144 <div class="test vlr" data-expected-height="55"></div> 145 </div></div> 146 <div class="cb vrl"><div class="htb"> 147 <div class="test vrl" data-expected-height="55"></div> 148 </div></div> 149 <br> 150 151 <!-- vrl / vlr / {htb,vlr,vrl} --> 152 <div class="cb vrl"><div class="vrl"> 153 <div class="test htb" data-expected-width="41"></div> 154 </div></div> 155 <div class="cb vrl"><div class="vrl"> 156 <div class="test vlr" data-expected-height="55"></div> 157 </div></div> 158 <div class="cb vrl"><div class="vrl"> 159 <div class="test vrl" data-expected-height="55"></div> 160 </div></div> 161 <br> 162 163 </body>