test_grid_computed_values.html (3780B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <title>Test computed grid values</title> 6 <link rel="author" title="Tobias Schneider" href="mailto:schneider@jancona.com"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <link rel='stylesheet' href='/resources/testharness.css'> 10 <style> 11 12 #grid { 13 display: grid; 14 width: 500px; 15 height: 400px; 16 grid-template-columns: 17 [a] auto 18 [b] minmax(min-content, 1fr) 19 [b c d] repeat(2, [e] 40px) 20 repeat(5, auto); 21 grid-template-rows: 22 [a] minmax(min-content, 1fr) 23 [b] auto 24 [b c d e] 30px 30px 25 auto auto; 26 grid-auto-columns: 3fr; 27 grid-auto-rows: 2fr; 28 } 29 #grid2 { 30 display: grid; 31 width: 500px; 32 height: 400px; 33 grid-auto-columns: 10px; 34 grid-auto-rows: 2fr; 35 } 36 37 </style> 38 </head> 39 <body> 40 41 <div> 42 <div id="grid"> 43 <div style="grid-column-start:1; width:50px"></div> 44 <div style="grid-column-start:9; width:50px"></div> 45 </div> 46 <div id="grid2"> 47 <div style="grid-column: span X / 1"></div> 48 <div style="grid-column: 1 / span X 2"></div> 49 </div> 50 <div> 51 52 <script> 53 54 var gridElement = document.getElementById("grid"); 55 56 function test_grid_template(assert_fn, width, height, desc) { 57 test(function() { 58 assert_fn(getComputedStyle(gridElement).gridTemplateColumns, 59 "[a] 50px [b] " + width + "px [b c d e] 40px [e] 40px 0px 0px 0px 0px 50px"); 60 assert_fn(getComputedStyle(gridElement).gridTemplateRows, 61 "[a] " + height + "px [b] 0px [b c d e] 30px 30px 0px 0px"); 62 }, desc); 63 } 64 65 test_grid_template(assert_equals, 320, 340, "test computed grid-template-{columns,rows} values"); 66 67 gridElement.style.overflow = 'scroll'; 68 var v_scrollbar = gridElement.offsetWidth - gridElement.clientWidth; 69 var h_scrollbar = gridElement.offsetHeight - gridElement.clientHeight; 70 test_grid_template(assert_equals, 320 - v_scrollbar, 340 - h_scrollbar, 71 "test computed grid-template-{columns,rows} values, overflow: scroll"); 72 73 gridElement.style.width = '600px'; 74 gridElement.style.overflow = 'visible'; 75 test_grid_template(assert_equals, 420, 340, 76 "test computed grid-template-{columns,rows} values, after reflow"); 77 78 gridElement.style.display = 'none'; 79 test_grid_template(assert_not_equals, 420, 340, 80 "test computed grid-template-{columns,rows} values, display: none"); 81 82 gridElement.style.display = 'grid'; 83 gridElement.parentNode.style.display = 'none'; 84 test_grid_template(assert_not_equals, 420, 340, 85 "test computed grid-template-{columns,rows} values, display: none on parent"); 86 87 gridElement.parentNode.style.display = ''; 88 function test_grid2() { 89 gridElement = document.getElementById("grid2"); 90 test(function() { 91 const expectedCols = SpecialPowers.getBoolPref("layout.css.serialize-grid-implicit-tracks") 92 ? "10px 10px 10px" 93 : "none"; 94 const expectedRows = SpecialPowers.getBoolPref("layout.css.serialize-grid-implicit-tracks") 95 ? "400px" 96 : "none"; 97 98 assert_equals(getComputedStyle(gridElement).gridTemplateColumns, 99 expectedCols); 100 assert_equals(getComputedStyle(gridElement).gridTemplateRows, 101 expectedRows); 102 }, "test #grid2 computed grid-template-{columns,rows} values"); 103 } 104 105 test(function() { 106 assert_equals(getComputedStyle(gridElement).gridAutoColumns, "3fr"); 107 assert_equals(getComputedStyle(gridElement).gridAutoRows, "2fr"); 108 test_grid2(); 109 }, "test computed grid-auto-{columns,rows} values"); 110 111 </script> 112 </body> 113 </html>