<!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>