table-grid-item-005.html (1226B)
1 <!doctype html> 2 3 <meta charset="utf-8"> 4 <title>Table sizing inside a fixed sized grid</title> 5 <link rel="help" href="https://crbug.com/667785"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 10 .grid { 11 display: grid; 12 width: 400px; 13 height: 400px; 14 border: 1px solid black; 15 background: red; 16 } 17 18 .item { 19 display: table; 20 background: lime; 21 } 22 23 caption { 24 background: grey; 25 } 26 27 </style> 28 29 <pre>There should be no red areas:</pre> 30 31 <p>Table with one cell</p> 32 <div class="grid"> 33 <div class="item"> 34 table cell 35 </div> 36 </div> 37 38 <p>Empty table with caption</p> 39 <div class="grid"> 40 <table class="item"> 41 <caption>caption</caption> 42 </table> 43 </div> 44 45 <p>Table with caption and cell</p> 46 <div class="grid"> 47 <table class="item"> 48 <caption>caption</caption> 49 <tr><td>table cell</td></tr> 50 </table> 51 </div> 52 53 <script> 54 test(_ => { 55 for (let t of Array.from(document.body.querySelectorAll(".item"))) { 56 assert_equals(t.offsetWidth, 400, "table is as wide as the grid"); 57 assert_equals(t.offsetHeight, 400, "table is as tall as the grid"); 58 } 59 }, "<table> grid items should fill their grid area"); 60 </script>