align-self-stretch-auto-size.tentative.html (1539B)
1 <!DOCTYPE html> 2 <link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> 3 <link rel="help" href="https://drafts.csswg.org/css-position-3/#abspos-layout"> 4 <link rel="help" href="https://drafts.csswg.org/css-position-3/#abspos-old"> 5 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11195"> 6 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1930427"> 7 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1930850"> 8 <link rel="match" href="align-self-stretch-auto-size-ref.tentative.html"> 9 <meta name="assert" content="Ensures that absolutely positioned elements stretch only when both insets are non-auto."> 10 <style> 11 .container { 12 width: 25px; 13 height: 25px; 14 border: 1px solid; 15 position: relative; 16 display: inline-block; 17 } 18 19 .abs { 20 position: absolute; 21 align-self: stretch; 22 justify-self: stretch; 23 background: purple; 24 } 25 26 .w { 27 width: 10px; 28 } 29 30 .h { 31 height: 10px; 32 } 33 </style> 34 <!-- All insets auto --> 35 <div class="container"><div class="abs"></div></div><br> 36 <!-- One inset auto --> 37 <div class="container"><div class="abs w" style="top: 0;"></div></div 38 ><div class="container"><div class="abs w" style="bottom: 0;"></div></div 39 ><div class="container"><div class="abs h" style="left: 0;"></div></div 40 ><div class="container"><div class="abs h" style="right: 0;"></div></div><br> 41 <!-- Neither inset auto --> 42 <div class="container"><div class="abs w" style="top: 0; bottom: 0;"></div></div 43 ><div class="container"><div class="abs h" style="left: 0; right: 0;"></div></div>