| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>CSS Grid Layout Test: Support 'repeat()' notation for 'grid-template-columns' and 'grid-template-rows' properties</title> |
| <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> |
| <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"> |
| <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."> |
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> |
| <style> |
| #grid { |
| display: grid; |
| width: 800px; |
| height: 600px; |
| font: 10px/1 Ahem; |
| justify-content: start; |
| align-content: start; |
| } |
| </style> |
| |
| <div id="log"></div> |
| |
| <div id="grid"> |
| <div>GRID ITEM</div> |
| </div> |
| |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script> |
| setup({explicit_done: true}); |
| var {style} = document.getElementById("grid"); |
| |
| function testGridTemplateColumnsRows(assignedValue, expectedValue = assignedValue) { |
| test(function() { |
| style.gridTemplateColumns = assignedValue; |
| style.gridTemplateRows = assignedValue; |
| assert_equals(style.gridTemplateColumns, expectedValue, "gridTemplateColumns"); |
| assert_equals(style.gridTemplateRows, expectedValue, "gridTemplateRows"); |
| }, `grid-template-columns: ${assignedValue}; and grid-template-rows: ${assignedValue};`); |
| } |
| |
| document.fonts.ready.then(() => { |
| // Valid values. |
| testGridTemplateColumnsRows("repeat(1, auto)"); |
| testGridTemplateColumnsRows("repeat(2, auto)"); |
| testGridTemplateColumnsRows("repeat(2, minmax(50px, calc(50% + 50px)))"); |
| testGridTemplateColumnsRows("repeat(5, 10%)"); |
| testGridTemplateColumnsRows("max-content repeat(2, 25%) 1fr"); |
| testGridTemplateColumnsRows("repeat(2, min-content 50px)"); |
| testGridTemplateColumnsRows("repeat(2, [a] minmax(50px, 100px) [b] 25em [c])"); |
| testGridTemplateColumnsRows("[a] repeat(2, auto [b] 100px) [c]"); |
| testGridTemplateColumnsRows("[a] auto repeat(2, [b] 100px) [c]"); |
| testGridTemplateColumnsRows("[a] repeat(2, auto [b]) 100px [c]"); |
| testGridTemplateColumnsRows("[a] repeat(2, [b] 100px)"); |
| testGridTemplateColumnsRows("[a] repeat(2, [b] auto [c]) [d]"); |
| testGridTemplateColumnsRows("[a] min-content repeat(2, [b] 1fr [c] calc(10% + 20px)) [d] minmax(30em, 50em) [e]"); |
| |
| // Reset values. |
| style.gridTemplateColumns = ""; |
| style.gridTemplateRows = ""; |
| |
| // Wrong values. |
| testGridTemplateColumnsRows("repeat(-1, auto)", ""); |
| testGridTemplateColumnsRows("repeat(auto, 2)", ""); |
| testGridTemplateColumnsRows("repeat 2, auto", ""); |
| testGridTemplateColumnsRows("repeat(2 auto)", ""); |
| testGridTemplateColumnsRows("100px (repeat 2, auto)", ""); |
| testGridTemplateColumnsRows("repeat(2, 50px repeat(2, 100px))", ""); |
| testGridTemplateColumnsRows("100px repeat(2, [a])", ""); |
| done(); |
| }); |
| </script> |
