1<!DOCTYPE HTML>
2<html>
3<head>
4<link href="resources/grid.css" rel="stylesheet">
5<style>
6.grid {
7 -webkit-grid-template-columns: (a) auto (b);
8 -webkit-grid-template-rows: (x) auto (y);
9 font: 50px/1 Ahem;
10}
11</style>
12<script src="../../resources/js-test.js"></script>
13</head>
14<body>
15<div class="grid" id="gridOneColumn">
16 <div>XXXX</div>
17 <div>XXX</div>
18 <div>XX</div>
19 <div>X</div>
20</div>
21
22<div class="grid" id="gridTwoColumns">
23 <div class="firstRowAutoColumn">XXXX</div>
24 <div class="firstRowAutoColumn">XXX</div>
25 <div>XX</div>
26 <div>X</div>
27</div>
28
29<div class="grid" id="gridThreeColumns">
30 <div class="firstRowAutoColumn">XXXX</div>
31 <div class="firstRowAutoColumn">XXX</div>
32 <div class="firstRowAutoColumn">XX</div>
33 <div>X</div>
34</div>
35
36<div class="grid" id="gridFourColumns">
37 <div class="firstRowAutoColumn">XXXX</div>
38 <div class="firstRowAutoColumn">XXX</div>
39 <div class="firstRowAutoColumn">XX</div>
40 <div class="firstRowAutoColumn">X</div>
41</div>
42
43<script src="resources/grid-definitions-parsing-utils.js"></script>
44<script>
45 description('Test that computed style for grid-template-columns and grid-template-rows works as expected with named grid lines and implicit tracks');
46
47 testGridTemplatesValues(document.getElementById("gridOneColumn"), "(a) 200px (b)", "(x) 50px (y) 50px 50px 50px");
48 testGridTemplatesValues(document.getElementById("gridTwoColumns"), "(a) 200px (b) 150px", "(x) 50px (y) 50px");
49 testGridTemplatesValues(document.getElementById("gridThreeColumns"), "(a) 200px (b) 150px 100px", "(x) 50px (y) 50px");
50 testGridTemplatesValues(document.getElementById("gridFourColumns"), "(a) 200px (b) 150px 100px 50px", "(x) 50px (y)");
51</script>
52</body>
53</html>