align-content-007.htm (972B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Test: Fallback alignment of 'align-content: stretch'</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-content-stretch"> 6 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11641"> 7 <meta name="assert" content="The fallback alignment for `align-content: stretch` is `flex-start`, not `safe flex-start`."> 8 <link rel="match" href="../reference/ref-filled-green-200px-square.html"> 9 10 <style> 11 #flex { 12 display: flex; 13 width: 200px; 14 height: 200px; 15 flex-wrap: wrap-reverse; 16 align-content: stretch; 17 } 18 #item { 19 width: 200px; 20 height: 400px; 21 background: linear-gradient(to bottom, red 50%, green 50%); 22 } 23 </style> 24 25 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 26 <div style="overflow: hidden"> 27 <div id="flex"> 28 <div id="item"></div> 29 </div> 30 </div>