collapsed-scroll-overflow.html (1189B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <script src='/resources/testharness.js'></script> 4 <script src='/resources/testharnessreport.js'></script> 5 <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#scrollable"> 6 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6230"> 7 <style> 8 main table { 9 display: inline-table; 10 border-collapse: collapse; 11 background:gray; 12 font-size: 40px; 13 } 14 main thead { 15 background: yellow; 16 } 17 main tbody { 18 background: green; 19 border: 80px dotted blue; 20 } 21 </style> 22 <main> 23 <div id="container" style="overflow-x:auto;max-width:500px"> 24 <table> 25 <thead> 26 <td>header</td> 27 </thead> 28 <tbody> 29 <td>body body body body body body body body body body body</td> 30 </tbody> 31 </table> 32 </div> 33 34 <script> 35 36 test(_ => { 37 let container = document.querySelector("#container"); 38 let table = container.querySelector("table") 39 assert_equals(container.offsetWidth, 500, "The container grows to the max-width."); 40 assert_equals(table.offsetWidth, 500, "The table fills the container."); 41 assert_equals(container.scrollWidth, 500, "The collapsed border does not exceed the scroll container."); 42 }); 43 </script>