flex-item-contains-strict.html (2811B)
1 <!DOCTYPE html> 2 <title>CSS Flexbox: 'contain' property strict value</title> 3 <link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property"> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> 5 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> 6 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#align-items-property"> 7 <meta name="assert" content="This test ensures that the strict value of the 'contain' 8 property in combination with mixing of 'display' inline-flex value, 'align-items' flex-start 9 value, column direction works properly."> 10 <style> 11 .inline-flex { 12 display: inline-flex; 13 outline: solid; 14 background: red; 15 } 16 </style> 17 18 <script src="/resources/testharness.js"></script> 19 <script src="/resources/testharnessreport.js"></script> 20 <script src="/resources/check-layout-th.js"></script> 21 22 <body onload="checkLayout('.inline-flex')"> 23 <p>Stretched:</p> 24 <div class="inline-flex" style="display: inline-flex; flex-direction: column;" data-expected-width="0" data-expected-height="0"> 25 <div style="contain: strict;" data-expected-width="0" data-expected-height="0">Column</div> 26 </div> 27 28 <div class="inline-flex" data-expected-width="0" data-expected-height="0"> 29 <div style="contain: strict;" data-expected-width="0" data-expected-height="0">Row</div> 30 </div> 31 32 <div class="inline-flex" style="display: inline-flex; flex-direction: column;" data-expected-width="30" data-expected-height="30"> 33 <div style="contain: strict; width: 30px; height: 30px;" data-expected-width="30" data-expected-height="30">Column</div> 34 </div> 35 36 <div class="inline-flex" style="display: inline-flex;" data-expected-width="30" data-expected-height="30"> 37 <div style="contain: strict; width: 30px; height: 30px;" data-expected-width="30" data-expected-height="30">Row</div> 38 </div> 39 40 41 <p>Flex-start:</p> 42 <div class="inline-flex" style="flex-direction: column; align-items: flex-start;" data-expected-width="0" data-expected-height="0"> 43 <div style="contain: strict;" data-expected-width="0" data-expected-height="0">Column</div> 44 </div> 45 46 <div class="inline-flex" style="align-items: flex-start;" data-expected-width="0" data-expected-height="0"> 47 <div style="contain: strict;" data-expected-width="0" data-expected-height="0">Row</div> 48 </div> 49 50 <div class="inline-flex" style="flex-direction: column; align-items: flex-start;" data-expected-width="30" data-expected-height="30"> 51 <div style="contain: strict; width: 30px; height: 30px;" data-expected-width="30" data-expected-height="30">Column</div> 52 </div> 53 54 <div class="inline-flex" style="align-items: flex-start;" data-expected-width="30" data-expected-height="30"> 55 <div style="contain: strict; width: 30px; height: 30px;" data-expected-width="30" data-expected-height="30">Row</div> 56 </div>