flex-one-sets-flex-basis-to-zero-px.html (5474B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Flexbox: flex-basis with zero pixel</title> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-basis-property"> 5 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-main-sizes"> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <link href="support/flexbox.css" rel="stylesheet"> 8 <meta name="assert" content="This test ensures that setting 'flex-basis' property to 9 zero pixel or percentage in combination with one value of both 'flex-grow' and 'flex-shrink' 10 and 'writing-mode' value works properly."> 11 <style> 12 .flexbox > div { 13 font: 14px/1 Ahem; 14 min-width: 0; 15 min-height: 0; 16 } 17 18 .flex-zero { 19 flex: 0; 20 } 21 22 .flex-zero-one-zero-percent { 23 flex: 0 1 0%; 24 } 25 26 .flex-zero-one-zero-px { 27 flex: 0 1 0px; 28 } 29 30 .flex-half { 31 flex: 0.5; 32 } 33 34 .flex-half-one-zero-percent { 35 flex: 0.5 1 0%; 36 } 37 38 .flex-half-one-zero-px { 39 flex: 0.5 1 0px; 40 } 41 42 .flex-one-one-zero-percent { 43 flex: 1 1 0%; 44 } 45 46 .flex-one-one-zero-px { 47 flex: 1 1 0px; 48 } 49 50 .vertical { 51 writing-mode: vertical-rl; 52 } 53 </style> 54 <script src="/resources/testharness.js"></script> 55 <script src="/resources/testharnessreport.js"></script> 56 <script src="/resources/check-layout-th.js"></script> 57 <body onload="document.fonts.ready.then(() => { checkLayout('.flexbox'); })"> 58 <div id=log></div> 59 <div class="flexbox column"> 60 <div class="flex-zero" data-expected-height="14">Flex item with flex: 0</div> 61 </div> 62 63 <div class="flexbox column"> 64 <div class="flex-zero-one-zero-percent" data-expected-height="14">Flex item with flex: 0 1 0%</div> 65 </div> 66 67 <div class="flexbox column"> 68 <div class="flex-zero-one-zero-px" data-expected-height="0">Flex item with flex: 0 1 0px</div> 69 </div> 70 71 <div class="flexbox column"> 72 <div class="flex-half" data-expected-height="14">Flex item with flex: 0.5</div> 73 </div> 74 75 <div class="flexbox column"> 76 <div class="flex-half-one-zero-percent" data-expected-height="14">Flex item with flex: 0.5 1 0%</div> 77 </div> 78 79 <!-- Following comment follows current spec to the letter, but it is not web 80 compatible. The expectation is for what everyone is shipping. --> 81 <!-- A flex-grow of 0 would size the container to the flex base size of the item (0px), 82 and a flex-grow of 1 would size it to the max-content contribution of the item (14px). 83 Therefore, a flew-grow of 0.5 sizes the container to the average, 7px. 84 And then the item grows to fill half of that, 3.5px. 85 Note that Gecko, Blink and WebKit use the flex-basis instead. --> 86 <div class="flexbox column"> 87 <div class="flex-half-one-zero-px" data-expected-height="0">Flex item with flex: 0.5 1 0px</div> 88 </div> 89 90 <div class="flexbox column"> 91 <div class="flex-one" data-expected-height="14">Flex item with flex: 1</div> 92 </div> 93 94 <div class="flexbox column"> 95 <div class="flex-one-one-zero-percent" data-expected-height="14">Flex item with flex: 1 1 0%</div> 96 </div> 97 98 <!-- Following comment follows current spec to the letter, but it is not web 99 compatible. The expectation is for what everyone is shipping. --> 100 <!-- flex-grow is >= 1, so the flex container is sized to the max-content contribution of the item. 101 Note that Gecko, Blink and WebKit use the flex-basis instead. --> 102 <div class="flexbox column"> 103 <div class="flex-one-one-zero-px" data-expected-height="0">Flex item with flex: 1 1 0px</div> 104 </div> 105 106 <div class="flexbox column vertical"> 107 <div class="flex-zero" data-expected-width="14">Flex item with flex: 0</div> 108 </div> 109 110 <div class="flexbox column vertical"> 111 <div class="flex-zero-one-zero-percent" data-expected-width="14">Flex item with flex: 0 1 0%</div> 112 </div> 113 114 <div class="flexbox column vertical"> 115 <div class="flex-zero-one-zero-px" data-expected-width="0">Flex item with flex: 0 1 0px</div> 116 </div> 117 118 <div class="flexbox column vertical"> 119 <div class="flex-half" data-expected-width="14">Flex item with flex: 0.5</div> 120 </div> 121 122 <div class="flexbox column vertical"> 123 <div class="flex-half-one-zero-percent" data-expected-width="14">Flex item with flex: 0.5 1 0%</div> 124 </div> 125 126 <!-- Following comment follows current spec to the letter, but it is not web 127 compatible. The expectation is for what everyone is shipping. --> 128 <!-- A flex-grow of 0 would size the container to the flex base size of the item (0px), 129 and a flex-grow of 1 would size it to the max-content contribution of the item (14px). 130 Therefore, a flew-grow of 0.5 sizes the container to the average, 7px. 131 And then the item grows to fill half of that, 3.5px. 132 Note that Gecko, Blink and WebKit use the flex-basis instead. --> 133 <div class="flexbox column vertical"> 134 <div class="flex-half-one-zero-px" data-expected-width="0">Flex item with flex: 0.5 1 0px</div> 135 </div> 136 137 <div class="flexbox column vertical"> 138 <div class="flex-one" data-expected-width="14">Flex item with flex: 1</div> 139 </div> 140 141 <div class="flexbox column vertical"> 142 <div class="flex-one-one-zero-percent" data-expected-width="14">Flex item with flex: 1 1 0%</div> 143 </div> 144 145 <!-- Following comment follows current spec to the letter, but it is not web 146 compatible. The expectation is for what everyone is shipping. --> 147 <!-- flex-grow is >= 1, so the flex container is sized to the max-content contribution of the item. 148 Note that Gecko, Blink and WebKit use the flex-basis instead. --> 149 <div class="flexbox column vertical"> 150 <div class="flex-one-one-zero-px" data-expected-width="0">Flex item with flex: 1 1 0px</div> 151 </div> 152 </body> 153 </html>