grid-limits-001.html (2145B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-grid/#overlarge-grids"> 3 <link rel="author" title="Tab Atkins-Bittner" href="https://xanthir.com/contact"> 4 <link rel="author" title="Elika J Etemad" href="http://inkedblade.net/contact"> 5 <meta name="flags" content="should"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="../../support/computed-testcommon.js"></script> 9 <div id=target> 10 <div id=child1></div> 11 <div id=child2></div> 12 </div> 13 <style> 14 #target { 15 display: grid; 16 position: absolute; 17 } 18 </style> 19 <script> 20 const target = document.querySelector("#target"); 21 const child1 = document.querySelector("#child1"); 22 const child2 = document.querySelector("#child2"); 23 24 test(()=>{ 25 target.style.gridTemplateRows = "repeat(9999, 1px)"; 26 target.style.gridTemplateColumns = "repeat(9999, 1px)"; 27 28 const height = getComputedStyle(target).height; 29 const width = getComputedStyle(target).width; 30 31 assert_equals(height, "9999px", "repeat(9999, 1px) should make grid height 9999px"); 32 assert_equals(width, "9999px", "repeat(9999, 1px) should make grid width 9999px"); 33 34 target.removeAttribute('style'); 35 }, "repeat(9999) should be supported in both axises"); 36 37 test(()=>{ 38 // Start from no explicit grid, so only implicit tracks happen 39 target.style.gridAutoRows = "1px"; 40 target.style.gridAutoColumns = "1px"; 41 42 child1.style.gridRowEnd = "10000"; 43 child1.style.gridColumnEnd = "10000"; 44 45 child2.style.gridRowStart = "-10000"; 46 child2.style.gridColumnStart = "-10000"; 47 48 const height = getComputedStyle(target).height; 49 const width = getComputedStyle(target).width; 50 51 assert_equals(height, "19998px", "Positioning children at lines -10k and 10k should generate 19998 implicit 1px tracks."); 52 assert_equals(width, "19998px", "Positioning children at lines -10k and 10k should generate 19998 implicit 1px tracks."); 53 54 target.removeAttribute('style'); 55 child1.removeAttribute('style'); 56 child2.removeAttribute('style'); 57 }, "Implicit grid should support lines [-10k, 10k]."); 58 </script>