gap-017.html (1002B)
1 <!DOCTYPE html> 2 <title>Flex gaps</title> 3 <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#main-alignment"> 5 <link rel="help" href="https://drafts.csswg.org/css-align/#gaps"> 6 <meta name="assert" content="Button elements with display: flex honor gaps." /> 7 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/resources/check-layout-th.js"></script> 11 12 <style> 13 .button { 14 display: flex; 15 flex-direction: column; 16 border: 0; 17 padding: 0; 18 background: green; 19 width: 100px; 20 row-gap: 20px; 21 } 22 23 .item { 24 height: 40px; 25 } 26 27 #reference-overlapped-red { 28 position: absolute; 29 background-color: red; 30 width: 100px; 31 height: 100px; 32 z-index: -1; 33 } 34 </style> 35 36 <div id=reference-overlapped-red></div> 37 38 <button class=button data-expected-height=100> 39 <div class=item></div> 40 <div class=item></div> 41 </button> 42 43 <script> 44 checkLayout('.button'); 45 </script>