table-grid-item-dynamic-003.html (1275B)
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, 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-003-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 height: 100%; 28 box-sizing: content-box; 29 background-color: yellow; 30 } 31 </style> 32 33 <div> 34 <table> 35 <thead> 36 <tr> 37 <th>Relayout shouldn't grow this table</th> 38 </tr> 39 </thead> 40 </table> 41 </div> 42 <script> 43 onload = function() { 44 let grid = document.querySelector("div"); 45 grid.getBoundingClientRect(); 46 document.body.style.width = "50vw"; 47 grid.getBoundingClientRect(); 48 document.body.style.width = ""; 49 } 50 </script>