flex-gap-decorations-019.html (877B)
1 <!DOCTYPE html> 2 <title> 3 CSS Gap Decorations: Painting flex gaps with bi-directional `rule-color` shorthand. 4 </title> 5 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> 6 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> 7 <link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> 8 <style> 9 .flex-container { 10 display: flex; 11 gap: 10px; 12 height: 100px; 13 width: 100px; 14 background: red; 15 rule-color: green; 16 rule-width: 10px; 17 rule-style: solid; 18 19 flex-wrap: wrap; 20 } 21 22 .flex-item { 23 background: green; 24 width: 45px; 25 } 26 </style> 27 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 28 <div class="flex-container"> 29 <div class="flex-item"></div> 30 <div class="flex-item"></div> 31 <div class="flex-item"></div> 32 <div class="flex-item"></div> 33 </div>