align-content-rounding.html (877B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <link rel="help" href="https://crbug.com/40437604"> 5 <style> 6 #flex { 7 display: flex; 8 flex-wrap: wrap; 9 width: 10px; 10 height: 40px; 11 align-content: space-between; 12 outline: solid 1px; 13 } 14 #flex > div { 15 width: 10px; 16 height: 5px; 17 background: lime; 18 } 19 </style> 20 <div id="flex"> 21 <div></div> 22 <div></div> 23 <div></div> 24 <div></div> 25 <div></div> 26 <div></div> 27 <div></div> 28 <div id="last"></div> 29 </div> 30 <script> 31 test(function() { 32 /* Increase the flexbox by 0.1px increments. */ 33 for (let i = 0; i < 10; i++) { 34 const height = (40 + i/10) + 'px'; 35 flex.style.height = height; 36 assert_equals(last.getBoundingClientRect().bottom, flex.getBoundingClientRect().bottom, height); 37 } 38 }, 'The last item should match the end edge.'); 39 </script>