border-spacing.html (1949B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=534751"> 4 <style> 5 .cell > div { background:white; } 6 </style> 7 <p>No red should be seen below.</p> 8 <div id="multicol" style="columns:2; column-fill:auto; gap:0; height:70px; width:200px; line-height:20px;"> 9 <div style="position:relative; display:table; border-spacing:10px;"> 10 <div class="cell" style="display:table-cell; width:30px; background:red;"> 11 <div id="child1">1<br></div> 12 <div id="child2">2<br></div> 13 <div id="child3">3<br></div> 14 <div id="child4">4<br></div> 15 <div id="child5">5<br></div> 16 </div> 17 </div> 18 </div> 19 <script src="/resources/testharness.js"></script> 20 <script src="/resources/testharnessreport.js"></script> 21 <script> 22 test(() => { 23 assert_equals(document.getElementById("child1").offsetLeft, 10); 24 assert_equals(document.getElementById("child1").offsetTop, 10); 25 assert_equals(document.getElementById("child1").offsetHeight, 20); 26 assert_equals(document.getElementById("child2").offsetLeft, 10); 27 assert_equals(document.getElementById("child2").offsetTop, 30); 28 assert_equals(document.getElementById("child2").offsetHeight, 20); 29 assert_equals(document.getElementById("child3").offsetLeft, 10); 30 assert_equals(document.getElementById("child3").offsetTop, 50); 31 assert_equals(document.getElementById("child3").offsetHeight, 20); 32 assert_equals(document.getElementById("child4").offsetLeft, 110); 33 assert_equals(document.getElementById("child4").offsetTop, 0); 34 assert_equals(document.getElementById("child4").offsetHeight, 20); 35 assert_equals(document.getElementById("child5").offsetLeft, 110); 36 assert_equals(document.getElementById("child5").offsetTop, 20); 37 assert_equals(document.getElementById("child5").offsetHeight, 20); 38 }, "Table with border spacing"); 39 </script>