column-reverse-gap.html (793B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column-reverse"> 3 <link rel="help" href="https://drafts.csswg.org/css-align/#gap-shorthand"> 4 <style> 5 .flexbox { 6 display: flex; 7 flex-direction: column-reverse; 8 gap: 5px; 9 position: relative; 10 background-color: blue; 11 } 12 .flexbox > * { 13 height: 10px; 14 background-color: green; 15 } 16 </style> 17 <script src="/resources/testharness.js"></script> 18 <script src="/resources/testharnessreport.js"></script> 19 <script src="/resources/check-layout-th.js"></script> 20 <body onload="checkLayout('.flexbox')"> 21 <div id=log></div> 22 <div class="flexbox" data-expected-height="40"> 23 <div data-offset-y="30"></div> 24 <div data-offset-y="15"></div> 25 <div data-offset-y="0"></div> 26 </div> 27 </body>