grid-support-repeat-002.html (2981B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Support 'repeat()' notation for 'grid-template-columns' and 'grid-template-rows' properties</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <link rel="help" href="http://www.w3.org/TR/css-grid-1/#repeat-notation" title="5.1.2 Repeating Rows and Columns: the 'repeat()' notation"> 6 <meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties support 'repeat()' notation, and that their declared value serializes correctly."> 7 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 8 <style> 9 #grid { 10 display: grid; 11 width: 800px; 12 height: 600px; 13 font: 10px/1 Ahem; 14 justify-content: start; 15 align-content: start; 16 } 17 </style> 18 19 <div id="log"></div> 20 21 <div id="grid"> 22 <div>GRID ITEM</div> 23 </div> 24 25 <script src="/resources/testharness.js"></script> 26 <script src="/resources/testharnessreport.js"></script> 27 <script> 28 setup({explicit_done: true}); 29 var {style} = document.getElementById("grid"); 30 31 function testGridTemplateColumnsRows(assignedValue, expectedValue = assignedValue) { 32 test(function() { 33 style.gridTemplateColumns = assignedValue; 34 style.gridTemplateRows = assignedValue; 35 assert_equals(style.gridTemplateColumns, expectedValue, "gridTemplateColumns"); 36 assert_equals(style.gridTemplateRows, expectedValue, "gridTemplateRows"); 37 }, `grid-template-columns: ${assignedValue}; and grid-template-rows: ${assignedValue};`); 38 } 39 40 document.fonts.ready.then(() => { 41 // Valid values. 42 testGridTemplateColumnsRows("repeat(1, auto)"); 43 testGridTemplateColumnsRows("repeat(2, auto)"); 44 testGridTemplateColumnsRows("repeat(2, minmax(50px, calc(50% + 50px)))"); 45 testGridTemplateColumnsRows("repeat(5, 10%)"); 46 testGridTemplateColumnsRows("max-content repeat(2, 25%) 1fr"); 47 testGridTemplateColumnsRows("repeat(2, min-content 50px)"); 48 testGridTemplateColumnsRows("repeat(2, [a] minmax(50px, 100px) [b] 25em [c])"); 49 testGridTemplateColumnsRows("[a] repeat(2, auto [b] 100px) [c]"); 50 testGridTemplateColumnsRows("[a] auto repeat(2, [b] 100px) [c]"); 51 testGridTemplateColumnsRows("[a] repeat(2, auto [b]) 100px [c]"); 52 testGridTemplateColumnsRows("[a] repeat(2, [b] 100px)"); 53 testGridTemplateColumnsRows("[a] repeat(2, [b] auto [c]) [d]"); 54 testGridTemplateColumnsRows("[a] min-content repeat(2, [b] 1fr [c] calc(10% + 20px)) [d] minmax(30em, 50em) [e]"); 55 56 // Reset values. 57 style.gridTemplateColumns = ""; 58 style.gridTemplateRows = ""; 59 60 // Wrong values. 61 testGridTemplateColumnsRows("repeat(-1, auto)", ""); 62 testGridTemplateColumnsRows("repeat(auto, 2)", ""); 63 testGridTemplateColumnsRows("repeat 2, auto", ""); 64 testGridTemplateColumnsRows("repeat(2 auto)", ""); 65 testGridTemplateColumnsRows("100px (repeat 2, auto)", ""); 66 testGridTemplateColumnsRows("repeat(2, 50px repeat(2, 100px))", ""); 67 testGridTemplateColumnsRows("100px repeat(2, [a])", ""); 68 done(); 69 }); 70 </script>