flexbox-safe-overflow-position-006.html (953B)
1 <!DOCTYPE html> 2 <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> 3 <link rel="help" href="https://drafts.csswg.org/css-align-3/#overflow-values"> 4 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 5 <meta name="assert" content="align-self:safe has no effect on -webkit-box" /> 6 7 <style> 8 #reference-overlapped-red { 9 position: absolute; 10 background-color: red; 11 width: 100px; 12 height: 100px; 13 z-index: -1; 14 } 15 16 .flex { 17 display: -webkit-box; 18 -webkit-box-align: end; 19 width: 90px; 20 height: 90px; 21 /* Make the green square cover the red square. */ 22 translate: 0 10px; 23 } 24 25 .item { 26 min-width: 100px; 27 min-height: 100px; 28 background: green; 29 align-self: safe center; 30 } 31 32 </style> 33 34 <p>Test passes if there is a filled green square and <strong>no red</strong>. 35 </p> 36 <div id="reference-overlapped-red"></div> 37 38 <div class="flex"> 39 <div class="item"></div> 40 </div>