| OLD | NEW |
| (Empty) | |
| 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x
html1/DTD/xhtml1-strict.dtd"> |
| 2 <html xmlns="http://www.w3.org/1999/xhtml"> |
| 3 <head> |
| 4 <title>CSS Grid Layout Test: 'grid-template-columns' and 'grid-template-
rows' properties resolved values for implicit tracks</title> |
| 5 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igal
ia.com" /> |
| 6 <link rel="help" href="http://www.w3.org/TR/css-grid-1/#resolved-track-l
ist" title="5.1.5. Resolved Values" /> |
| 7 <meta name="flags" content="ahem dom" /> |
| 8 <meta name="assert" content="This test checks that resolved values for '
grid-template-columns' and 'grid-template-rows' list tracks implicitly created."
/> |
| 9 <script src="/resources/testharness.js" type="text/javascript"></script> |
| 10 <script src="/resources/testharnessreport.js" type="text/javascript"></s
cript> |
| 11 <script src="support/testing-utils.js" type="text/javascript"></script> |
| 12 <style type="text/css"><![CDATA[ |
| 13 .grid { |
| 14 display: grid; |
| 15 width: 800px; |
| 16 height: 600px; |
| 17 font: 10px/1 Ahem; |
| 18 justify-content: start; |
| 19 align-content: start; |
| 20 } |
| 21 |
| 22 .fifthColumn { |
| 23 grid-column: 5; |
| 24 } |
| 25 |
| 26 .fourthRow { |
| 27 grid-row: 4; |
| 28 } |
| 29 |
| 30 .gridAutoFlowColumn { |
| 31 grid-auto-flow: column; |
| 32 } |
| 33 ]]></style> |
| 34 </head> |
| 35 <body> |
| 36 <div id="log"></div> |
| 37 |
| 38 <div id="grid" class="grid"> |
| 39 <div>FIRST ITEM</div> |
| 40 <div>SECOND ITEM</div> |
| 41 <div>THIRD<br />ITEM</div> |
| 42 </div> |
| 43 |
| 44 <div id="gridItemsPositions" class="grid"> |
| 45 <div class="fifthColumn">FIRST ITEM</div> |
| 46 <div class="fourthRow">SECOND ITEM</div> |
| 47 <div>THIRD<br />ITEM</div> |
| 48 </div> |
| 49 |
| 50 <div id="gridAutoFlowColumn" class="grid gridAutoFlowColumn"> |
| 51 <div>FIRST ITEM</div> |
| 52 <div>SECOND ITEM</div> |
| 53 <div>THIRD<br />ITEM</div> |
| 54 </div> |
| 55 |
| 56 <div id="gridAutoFlowColumnItemsPositions" class="grid gridAutoFlowColum
n"> |
| 57 <div class="fifthColumn">FIRST ITEM</div> |
| 58 <div class="fourthRow">SECOND ITEM</div> |
| 59 <div>THIRD<br />ITEM</div> |
| 60 </div> |
| 61 |
| 62 <script type="text/javascript"><![CDATA[ |
| 63 // Valid values. |
| 64 TestingUtils.testGridTemplateColumnsRows("grid", "", "", "110px", ["
10px 10px 20px", "repeat(2, 10px) 20px"]); |
| 65 TestingUtils.testGridTemplateColumnsRows("grid", "auto auto", "", "1
00px 110px", "10px 20px"); |
| 66 TestingUtils.testGridTemplateColumnsRows("grid", "60px", "", "60px",
["20px 20px 20px", "repeat(3, 20px)"]); |
| 67 TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "", "
100px 60px", ["20px 20px", "repeat(2, 20px)"]); |
| 68 TestingUtils.testGridTemplateColumnsRows("grid", "", "50px", "110px"
, "50px 10px 20px"); |
| 69 TestingUtils.testGridTemplateColumnsRows("grid", "", "50px 30px", "1
10px", "50px 30px 20px"); |
| 70 TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px", "60
px", ["50px 20px 20px", "50px repeat(2, 20px)"]); |
| 71 TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px 30px"
, "60px", "50px 30px 20px"); |
| 72 TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px
", "100px 60px", "50px 20px"); |
| 73 TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px
30px", "100px 60px", "50px 30px"); |
| 74 |
| 75 TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "
", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "10px 20px 0px 10p
x"); |
| 76 TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px
", "", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "10px 20px 0px 2
0px"); |
| 77 TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px
50px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "10px
20px 0px 20px"); |
| 78 TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "
60px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 20px 0px
10px"); |
| 79 TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "
60px 50px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 50p
x 0px 10px"); |
| 80 TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px
", "60px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 20px 0
px 20px"); |
| 81 TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px
", "60px 50px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 5
0px 0px 20px"); |
| 82 TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px
50px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "
60px 20px 0px 20px"); |
| 83 TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px
50px", "60px 50px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px
"], "60px 50px 0px 20px"); |
| 84 |
| 85 TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "
", "100px 110px 50px", "20px"); |
| 86 TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "
auto auto", "110px 50px", "20px 10px"); |
| 87 TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px
", "", "60px 110px 50px", "20px"); |
| 88 TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100p
x 60px", "", "100px 60px 50px", "20px"); |
| 89 TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "
50px", "100px 110px 50px", "50px"); |
| 90 TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "
50px 30px", "110px 50px", "50px 30px"); |
| 91 TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px
", "50px", "60px 110px 50px", "50px"); |
| 92 TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px
", "50px 30px", "60px 50px", "50px 30px"); |
| 93 TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100p
x 60px", "50px", "100px 60px 50px", "50px"); |
| 94 TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100p
x 60px", "50px 30px", "100px 60px", "50px 30px"); |
| 95 |
| 96 TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPos
itions", "", "", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"]
, ["20px 0px 0px 10px", "20px repeat(2, 0px) 10px"]); |
| 97 TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPos
itions", "60px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px
"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]); |
| 98 TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPos
itions", "60px 70px", "", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px)
100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]); |
| 99 TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPos
itions", "", "60px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100
px"], ["60px 0px 0px 10px", "60px repeat(2, 0px) 10px"]); |
| 100 TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPos
itions", "", "60px 70px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px
) 100px"], "60px 70px 0px 10px"); |
| 101 TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPos
itions", "60px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 1
00px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]); |
| 102 TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPos
itions", "60px", "60px 70px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0
px) 100px"], "60px 70px 0px 20px"); |
| 103 TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPos
itions", "60px 70px", "60px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0
px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]); |
| 104 TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPos
itions", "60px 70px", "60px 70px", ["60px 70px 0px 0px 100px", "60px 70px repeat
(2, 0px) 100px"], "60px 70px 0px 20px"); |
| 105 ]]></script> |
| 106 </body> |
| 107 </html> |
| OLD | NEW |