OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <script> | 4 <script> |
5 if (window.testRunner) | 5 if (window.testRunner) |
6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); | 6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); |
7 </script> | 7 </script> |
8 <link href="resources/grid.css" rel="stylesheet"> | 8 <link href="resources/grid.css" rel="stylesheet"> |
9 <style> | 9 <style> |
| 10 div { |
| 11 width: 800px; |
| 12 height: 600px; |
| 13 } |
| 14 |
10 .gridWithFixed { | 15 .gridWithFixed { |
11 grid-definition-columns: 7px 11px; | 16 grid-definition-columns: 7px 11px; |
12 grid-definition-rows: 17px 2px; | 17 grid-definition-rows: 17px 2px; |
13 } | 18 } |
14 | 19 |
15 .gridWithPercent { | 20 .gridWithPercent { |
16 grid-definition-columns: 53% 99%; | 21 grid-definition-columns: 53% 99%; |
17 grid-definition-rows: 27% 52%; | 22 grid-definition-rows: 27% 52%; |
18 } | 23 } |
19 .gridWithAuto { | 24 .gridWithAuto { |
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
61 font: 10px Ahem; | 66 font: 10px Ahem; |
62 } | 67 } |
63 .gridWithFractionFraction { | 68 .gridWithFractionFraction { |
64 grid-definition-columns: 1fr 2fr; | 69 grid-definition-columns: 1fr 2fr; |
65 grid-definition-rows: 3fr 4fr; | 70 grid-definition-rows: 3fr 4fr; |
66 } | 71 } |
67 .gridWithFractionMinMax { | 72 .gridWithFractionMinMax { |
68 grid-definition-columns: minmax(min-content, 45px) 2fr; | 73 grid-definition-columns: minmax(min-content, 45px) 2fr; |
69 grid-definition-rows: 3fr minmax(14px, max-content); | 74 grid-definition-rows: 3fr minmax(14px, max-content); |
70 } | 75 } |
| 76 .gridWithCalcCalc { |
| 77 grid-definition-columns: calc(200px) calc(10em); |
| 78 grid-definition-rows: calc(15em) calc(75px); |
| 79 font: 10px Ahem; |
| 80 } |
| 81 .gridWithCalcAndFixed { |
| 82 grid-definition-columns: calc(50%) 8em; |
| 83 grid-definition-rows: 88px calc(25%); |
| 84 font: 10px Ahem; |
| 85 } |
| 86 .gridWithCalcAndMinMax { |
| 87 grid-definition-columns: calc(30px + 20%) minmax(min-content, 80px); |
| 88 grid-definition-rows: minmax(25%, max-content) calc(10% - 7px); |
| 89 } |
| 90 .gridWithCalcInsideMinMax { |
| 91 grid-definition-columns: minmax(calc(23px + 10%), 400px) 12em; |
| 92 grid-definition-rows: calc(150px) minmax(5%, calc(50% - 125px)); |
| 93 font: 10px Ahem; |
| 94 } |
| 95 |
71 </style> | 96 </style> |
72 <script src="../js/resources/js-test-pre.js"></script> | 97 <script src="../js/resources/js-test-pre.js"></script> |
73 </head> | 98 </head> |
74 <body> | 99 <body> |
75 <div class="grid gridWithFixed" id="gridWithFixedElement"></div> | 100 <div class="grid gridWithFixed" id="gridWithFixedElement"></div> |
76 <div class="grid gridWithPercent" id="gridWithPercentElement"></div> | 101 <div class="grid gridWithPercent" id="gridWithPercentElement"></div> |
77 <div class="grid gridWithAuto" id="gridWithAutoElement"></div> | 102 <div class="grid gridWithAuto" id="gridWithAutoElement"></div> |
78 <div class="grid gridWithEM" id="gridWithEMElement"></div> | 103 <div class="grid gridWithEM" id="gridWithEMElement"></div> |
79 <div class="grid gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div> | 104 <div class="grid gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div> |
80 <div class="grid gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div> | 105 <div class="grid gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div> |
81 <div class="grid gridWithThreeItems" id="gridWithThreeItems"></div> | 106 <div class="grid gridWithThreeItems" id="gridWithThreeItems"></div> |
82 <div class="grid gridWithPercentAndViewportPercent" id="gridWithPercentAndViewpo
rtPercent"></div> | 107 <div class="grid gridWithPercentAndViewportPercent" id="gridWithPercentAndViewpo
rtPercent"></div> |
83 <div class="grid gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFit
Available"></div> | 108 <div class="grid gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFit
Available"></div> |
84 <div class="grid gridWithMinMaxContent" id="gridWithMinMaxContent"></div> | 109 <div class="grid gridWithMinMaxContent" id="gridWithMinMaxContent"></div> |
85 <div class="grid gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div> | 110 <div class="grid gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div> |
86 <div class="grid gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxCont
ent"></div> | 111 <div class="grid gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxCont
ent"></div> |
87 <div class="grid gridWithFractionFraction" id="gridWithFractionFraction"></div> | 112 <div class="grid gridWithFractionFraction" id="gridWithFractionFraction"></div> |
88 <div class="grid gridWithFractionMinMax" id="gridWithFractionMinMax"></div> | 113 <div class="grid gridWithFractionMinMax" id="gridWithFractionMinMax"></div> |
| 114 <div class="grid gridWithCalcCalc" id="gridWithCalcCalcElement"></div> |
| 115 <div class="grid gridWithCalcAndFixed" id="gridWithCalcAndFixedElement"></div> |
| 116 <div class="grid gridWithCalcAndMinMax" id="gridWithCalcAndMinMaxElement"></div> |
| 117 <div class="grid gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMaxElement">
</div> |
89 <script src="resources/grid-definitions-parsing-utils.js"></script> | 118 <script src="resources/grid-definitions-parsing-utils.js"></script> |
90 <script src="resources/grid-columns-rows-get-set-multiple.js"></script> | 119 <script src="resources/grid-columns-rows-get-set-multiple.js"></script> |
91 <script src="../js/resources/js-test-post.js"></script> | 120 <script src="../js/resources/js-test-post.js"></script> |
92 </body> | 121 </body> |
93 </html> | 122 </html> |
OLD | NEW |