stretch-block-size-003.html (6165B)
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="block-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 block-size: 60px; 12 inline-size: 46px; 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 /* We make each containing block an inline-level box, so we can display 20 * subtests in multiple rows, for easier visualization: */ 21 display: inline-block; 22 vertical-align: top; 23 position: relative; 24 } 25 26 .cb > * { 27 /* This rule is targeting the DOM-tree-parents of the abspos elements. 28 * In the interests of simplicity and consistency, this style rule makes 29 * the matched elements fill *their* parent boxes (which are the abspos 30 * containing blocks). Without this, there are a few edge cases where 31 * some of the matched elements would be zero-sized, which would then 32 * collapse away the space that we want to be available for stretching. 33 */ 34 block-size: 100%; 35 inline-size: 100%; 36 } 37 38 .test { 39 position: absolute; 40 /* We have 2+3 = 5px of margin in the block axis. This means the stretched 41 * children should all have a border-box block-size that's 5px less than 42 * the containing block's padding-box size in the same axis. The dimension 43 * of the containing block's padding-box that we're filling will depend on 44 * whether our WM is orthogonal to it or not. If we're orthogonal, our 45 * expected stretch size is 46px - 5px = 41px. If we're not orthogonal, 46 * our expected stretch size is 60px - 5px = 55px. */ 47 margin-block-start: 2px; 48 margin-block-end: 3px; 49 50 /* We also have some border/padding that UAs will need to account for 51 * when computing the stretched children's content-box sizes; but these 52 * don't reduce our `data-expected-{width,height}` expectations, since 53 * those correspond to the border-box size. */ 54 border: 3px solid blue; 55 padding: 2px; 56 57 block-size: stretch; 58 inline-size: 20px; 59 background: fuchsia; 60 } 61 .htb { writing-mode: horizontal-tb; } 62 .vlr { writing-mode: vertical-lr; } 63 .vrl { writing-mode: vertical-rl; } 64 </style> 65 <script> 66 function runTests() { 67 checkLayout('.test'); 68 69 // Add box-sizing:border-box (which shouldn't impact the actual resolved 70 // box sizes that 'stretch' produces), and retest: 71 for (let elem of document.querySelectorAll(".test")) { 72 elem.style.boxSizing = "border-box"; 73 } 74 checkLayout('.test'); 75 } 76 </script> 77 <body onload="runTests()"> 78 <!-- This test is exercising cases where the abspos element's containing 79 block (which happens to be its grandparent) has a writing-mode that 80 disagrees with the abspos element's parent. We exercise all 6 81 pairwise-mismatching combinations of {htb,vlr,vrl} for the grandparent & 82 parent. For each such pair, we test all three of those same 83 writing-modes on the innermost abspos element. 84 85 Note that we use 'data-expected-{height,width}' depending on which axis 86 is the block axis for the abspos ".test" element (since that's the 87 element whose "block-size: stretch" resolution we're testing). So for 88 "test htb" elements, we check the height; whereas for "test vlr" and 89 "test vrl", we check the width. 90 --> 91 92 <!-- htb / vlr / {htb,vlr,vrl} --> 93 <div class="cb htb"><div class="vlr"> 94 <div class="test htb" data-expected-height="55"></div> 95 </div></div> 96 <div class="cb htb"><div class="vlr"> 97 <div class="test vlr" data-expected-width="41"></div> 98 </div></div> 99 <div class="cb htb"><div class="vlr"> 100 <div class="test vrl" data-expected-width="41"></div> 101 </div></div> 102 <br> 103 104 <!-- htb / vrl / {htb,vlr,vrl} --> 105 <div class="cb htb"><div class="vrl"> 106 <div class="test htb" data-expected-height="55"></div> 107 </div></div> 108 <div class="cb htb"><div class="vrl"> 109 <div class="test vlr" data-expected-width="41"></div> 110 </div></div> 111 <div class="cb htb"><div class="vrl"> 112 <div class="test vrl" data-expected-width="41"></div> 113 </div></div> 114 <br> 115 116 <!-- vlr / htb / {htb,vlr,vrl} --> 117 <div class="cb vlr"><div class="htb"> 118 <div class="test htb" data-expected-height="41"></div> 119 </div></div> 120 <div class="cb vlr"><div class="htb"> 121 <div class="test vlr" data-expected-width="55"></div> 122 </div></div> 123 <div class="cb vlr"><div class="htb"> 124 <div class="test vrl" data-expected-width="55"></div> 125 </div></div> 126 <br> 127 128 <!-- vlr / vrl / {htb,vlr,vrl} --> 129 <div class="cb vlr"><div class="vrl"> 130 <div class="test htb" data-expected-height="41"></div> 131 </div></div> 132 <div class="cb vlr"><div class="vrl"> 133 <div class="test vlr" data-expected-width="55"></div> 134 </div></div> 135 <div class="cb vlr"><div class="vrl"> 136 <div class="test vrl" data-expected-width="55"></div> 137 </div></div> 138 <br> 139 140 <!-- vrl / htb / {htb,vlr,vrl} --> 141 <div class="cb vrl"><div class="htb"> 142 <div class="test htb" data-expected-height="41"></div> 143 </div></div> 144 <div class="cb vrl"><div class="htb"> 145 <div class="test vlr" data-expected-width="55"></div> 146 </div></div> 147 <div class="cb vrl"><div class="htb"> 148 <div class="test vrl" data-expected-width="55"></div> 149 </div></div> 150 <br> 151 152 <!-- vrl / vlr / {htb,vlr,vrl} --> 153 <div class="cb vrl"><div class="vrl"> 154 <div class="test htb" data-expected-height="41"></div> 155 </div></div> 156 <div class="cb vrl"><div class="vrl"> 157 <div class="test vlr" data-expected-width="55"></div> 158 </div></div> 159 <div class="cb vrl"><div class="vrl"> 160 <div class="test vrl" data-expected-width="55"></div> 161 </div></div> 162 <br> 163 164 </body>