table-grid-item-dynamic-004.html (1307B)
1 <!doctype html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <meta charset="utf-8"> 7 <title>Table grid items with padding-top, definite width, percentage height, and box-sizing:content-box, don't grow on incremental relayout</title> 8 <link rel="author" href="mailto:mats@mozilla.com"> 9 <link rel="author" href="mailto:emilio@crisal.io"> 10 <link rel="author" href="mailto:tlin@mozilla.com"> 11 <link rel="author" href="https://mozilla.org"> 12 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1521088"> 13 <link rel="match" href="table-grid-item-dynamic-004-ref.html"> 14 <style> 15 html,body { 16 color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; 17 } 18 19 div { 20 display: grid; 21 height: 100px; 22 background-color: lime; 23 } 24 25 table { 26 padding-top: 100px; 27 width: 500px; 28 height: 100%; 29 box-sizing: content-box; 30 background-color: yellow; 31 } 32 </style> 33 34 <div> 35 <table> 36 <thead> 37 <tr> 38 <th>Relayout shouldn't grow this table</th> 39 </tr> 40 </thead> 41 </table> 42 </div> 43 <script> 44 onload = function() { 45 let grid = document.querySelector("div"); 46 grid.getBoundingClientRect(); 47 document.body.style.width = "50vw"; 48 grid.getBoundingClientRect(); 49 document.body.style.width = ""; 50 } 51 </script>