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