fieldset-as-container-justify-center.tentative.html (1370B)
1 <!DOCTYPE html> 2 <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> 3 <link rel="help" href="https://crbug.com/1229458"> 4 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/8690"> 5 <link rel="help" href="https://github.com/whatwg/html/issues/9123"> 6 <link rel="help" 7 href="https://html.spec.whatwg.org/multipage/rendering.html#anonymous-fieldset-content-box"> 8 <meta name="assert" 9 content="justify-content: center is ignored in a column flexbox fieldset when the anonymous fieldset content box has no height or min-height."> 10 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 <script src="/resources/check-layout-th.js"></script> 14 15 <style> 16 fieldset { 17 display: flex; 18 flex-flow: column; 19 justify-content: center; 20 align-items: center; 21 width: 200px; 22 min-height: 200px; 23 padding: 0px; 24 border: 1px solid; 25 position: relative; 26 } 27 28 .item { 29 height: 100px; 30 width: 100px; 31 background: orange; 32 } 33 34 </style> 35 <p>Pass Condition: orange square is at top of black square.<br> 36 Safari 16.4 and Firefox 111 fail -- orange box is vertically centered as if 37 the anonymous fieldset content box and the fieldset were the same box. 38 </p> 39 40 <fieldset> 41 <div class="item" data-offset-y="0"></div> 42 </fieldset> 43 44 <script> 45 checkLayout('.item'); 46 </script>