grid-measuring-reflow-resize-dynamic-001.html (692B)
1 <!DOCTYPE HTML> 2 <title>Testcase simplified from layout/reftests/css-grid/grid-min-max-content-sizing-002.html</title> 3 <style type="text/css"> 4 5 html { overflow: hidden } 6 body { margin: 0 } 7 8 .grid { 9 display: grid; 10 grid-template-columns: minmax(min-content,max-content); 11 grid-template-rows: minmax(min-content,max-content); 12 } 13 14 .grid > div { 15 border: 1px solid fuchsia; 16 } 17 18 span { 19 display: block; 20 border: 4px solid blue; 21 width: 100%; 22 height: 100%; 23 } 24 25 </style> 26 27 <div class="grid"> 28 <div> 29 <span id="s"></span> 30 </div> 31 </div> 32 33 <script> 34 var s = document.getElementById("s"); 35 s.offsetWidth; // flush layout 36 s.textContent = "blue should overflow fuchsia on right/bottom"; 37 </script>