justify-content-rounding.html (838B)
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 width: 40px; 9 justify-content: space-between; 10 outline: solid 1px; 11 } 12 #flex > div { 13 width: 5px; 14 height: 10px; 15 background: lime; 16 } 17 </style> 18 <div id="flex"> 19 <div></div> 20 <div></div> 21 <div></div> 22 <div></div> 23 <div></div> 24 <div></div> 25 <div></div> 26 <div id="last"></div> 27 </div> 28 <script> 29 test(function() { 30 /* Increase the flexbox by 0.1px increments. */ 31 for (let i = 0; i < 10; i++) { 32 const width = (40 + i/10) + 'px'; 33 flex.style.width = width; 34 assert_equals(last.getBoundingClientRect().right, flex.getBoundingClientRect().right, width); 35 } 36 }, 'The last item should match the end edge.'); 37 </script>