auto-margins-2.html (1534B)
1 <!DOCTYPE html> 2 <link rel="help" 3 href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing"> 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="auto margins are treated as 0 in stretched abspos boxes"> 9 10 <style> 11 .outer { 12 width: 200px; 13 height: 200px; 14 position: relative; 15 border: solid; 16 } 17 18 .outer>div { 19 position: absolute; 20 margin: auto; 21 background: lime; 22 } 23 </style> 24 25 <body onload="checkLayout('.outer>div')"> 26 27 <div class="outer"> 28 <div style="inset: 0; width: stretch; height: 100px;" 29 data-expected-width="200" data-offset-x="0"></div> 30 </div> 31 32 <div class="outer"> 33 <div style="inset: 0; max-width: stretch; height: 100px;" 34 data-expected-width="200" data-offset-x="0"></div> 35 </div> 36 37 <div class="outer"> 38 <div style="inset: 0; height: stretch; width: 100px;" 39 data-expected-height="200" data-offset-y="0"></div> 40 </div> 41 42 <div class="outer"> 43 <div style="inset: 0; max-height: stretch; width: 100px;" 44 data-expected-height="200" data-offset-y="0"></div> 45 </div> 46 47 <div class="outer"> 48 <div style="top: 0; bottom: 0; left: 25px; right: 25px; width: stretch;" 49 data-expected-width="150" data-offset-x="25"></div> 50 </div> 51 52 <div class="outer"> 53 <div 54 style="top: 25px; bottom: 25px; left: 0px; right: 0px; height: stretch;" 55 data-expected-height="150" data-offset-y="25"></div> 56 </div>