| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE HTML> |
| 2 <html lang="en"> |
| 3 <head> |
| 4 <meta charset="UTF-8"> |
| 5 <title>CSS Test: Grid Layout - Properties exist</title> |
| 6 <link rel="author" title="贺师俊" href="mailto:johnhax@gmail.com"> |
| 7 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com
" /> |
| 8 <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <
!-- 2013-09-30 --> |
| 9 <link rel="help" href="http://www.w3.org/TR/css-grid-1/#property-index"> |
| 10 <meta name="flags" content="ahem dom"> |
| 11 <meta name="assert" content="Test checks that css properties of grid layout ex
ist."> |
| 12 <script src="/resources/testharness.js"></script> |
| 13 <script src="/resources/testharnessreport.js"></script> |
| 14 <style> |
| 15 #container { |
| 16 width: 800px; |
| 17 height: 600px; |
| 18 } |
| 19 #myDiv { |
| 20 font: 50px/1 Ahem; |
| 21 justify-content: start; |
| 22 align-content: start; |
| 23 } |
| 24 </style> |
| 25 </head> |
| 26 <body> |
| 27 <div id="log"></div> |
| 28 <div id="container"> |
| 29 <div id="myDiv"> |
| 30 <div>I T</div> |
| 31 <div>IT</div> |
| 32 <div>I</div> |
| 33 </div> |
| 34 </div> |
| 35 |
| 36 <script> |
| 37 var myDiv = document.getElementById('myDiv') |
| 38 |
| 39 test(function(){ |
| 40 myDiv.style.display = 'grid' |
| 41 assert_equals(myDiv.style.display, 'grid', |
| 42 'display should be "grid"') |
| 43 }, 'display: grid') |
| 44 |
| 45 test(function(){ |
| 46 myDiv.style.display = 'inline-grid' |
| 47 assert_equals(myDiv.style.display, 'inline-grid', |
| 48 'display should be "inline-grid"') |
| 49 }, 'display: inline-grid') |
| 50 |
| 51 void function(data){ |
| 52 |
| 53 myDiv.style.display = 'grid' |
| 54 |
| 55 Object.keys(data).forEach(function(prop){ |
| 56 test(function(){ |
| 57 assert_own_property(myDiv.style, prop) |
| 58 }, prop) |
| 59 |
| 60 if ('initial' in data[prop]) test(function(){ |
| 61 var initial = data[prop].initial |
| 62 delete data[prop].initial |
| 63 assert_equals(getComputedStyle(myDiv)[prop], initial, 'initial value o
f ' + prop + ' should be ' + initial) |
| 64 }, prop + '.initial') |
| 65 |
| 66 var syntaxTests = data[prop] |
| 67 Object.keys(syntaxTests).forEach(function(testcase){ |
| 68 test(function(){ |
| 69 assert_own_property(myDiv.style, prop) |
| 70 myDiv.style[prop] = syntaxTests[testcase][0] |
| 71 assert_equals(myDiv.style[prop], syntaxTests[testcase][0], testcase) |
| 72 assert_equals(getComputedStyle(myDiv)[prop], syntaxTests[testcase][1
], testcase) |
| 73 }, prop + '.' + testcase) |
| 74 }) |
| 75 }) |
| 76 |
| 77 }({ |
| 78 'grid-template-columns': { // named 'grid-definition-columns' in last draf
t |
| 79 initial: '150px', |
| 80 'none': ['none', '150px'], |
| 81 '<line-names>': ['[a] auto [b] auto [c]', '[a] 150px [b] 100px [c]'], |
| 82 '<track-size>.auto': ['auto', '150px'], |
| 83 '<track-size>.<track-breadth>.<length>': ['100px', '100px'], |
| 84 '<track-size>.<track-breadth>.<percentage>': ['100%', '800px'], |
| 85 '<track-size>.<track-breadth>.<flex>': ['1fr', '800px'], |
| 86 '<track-size>.<track-breadth>.min-content': ['min-content', '100px'], |
| 87 '<track-size>.<track-breadth>.max-content': ['max-content', '150px'], |
| 88 '<track-size>.<track-breadth>.minmax()': ['minmax(100px, 200px)', '200px
'], |
| 89 'reset': ['none', '150px'], |
| 90 }, |
| 91 'grid-template-rows': { // named 'grid-definition-rows' in last draft |
| 92 initial: '50px 50px 50px', |
| 93 'none': ['none', '50px 50px 50px'], |
| 94 '<line-names>': ['[a] auto [b] auto [c]', '[a] 50px [b] 50px [c] 50px'], |
| 95 '<track-size>.auto': ['auto', '50px 50px 50px'], |
| 96 '<track-size>.<track-breadth>.<length>': ['100px', '100px 50px 50px'], |
| 97 '<track-size>.<track-breadth>.<percentage>': ['100%', '50px 50px 50px'], |
| 98 '<track-size>.<track-breadth>.<flex>': ['1fr', '50px 50px 50px'], |
| 99 '<track-size>.<track-breadth>.min-content': ['min-content', '50px 50px 5
0px'], |
| 100 '<track-size>.<track-breadth>.max-content': ['max-content', '50px 50px 5
0px'], |
| 101 '<track-size>.<track-breadth>.minmax()': ['minmax(100px, 200px)', '200px
50px 50px'], |
| 102 'reset': ['none', '50px 50px 50px'], |
| 103 }, |
| 104 'grid-template-areas': { |
| 105 initial: 'none', |
| 106 'none': ['none', 'none'], |
| 107 '<string>+': ['"a"', '"a"'], |
| 108 'reset': ['none', 'none'], |
| 109 }, |
| 110 'grid-template': { |
| 111 initial: '150px / 50px 50px 50px', |
| 112 'none': ['', '150px / 50px 50px 50px'], |
| 113 '<grid-template-rows> / <grid-template-columns>': ['100px 100px / 200px
200px', '100px 100px / 200px 200px'], |
| 114 '<line-names>': ['[a] auto [b] auto [c] / [d] auto [e] auto [f]', '[a] a
uto [b] auto [c] / [d] auto [e] auto [f]'], |
| 115 '<string>+': ['"a b" "a b"', '"a b" "a b"'], |
| 116 '<string><track-size>+': ['100px / "a b" 50px', '100px / "a b" 50px'], |
| 117 'reset': ['', '150px / 50px 50px 50px'], |
| 118 }, |
| 119 'grid-auto-columns': { |
| 120 initial: 'auto', |
| 121 '<track-size>.auto': ['auto', 'auto'], |
| 122 '<track-size>.<track-breadth>.<length>': ['100px', '100px'], |
| 123 '<track-size>.<track-breadth>.<percentage>': ['100%', '100%'], |
| 124 '<track-size>.<track-breadth>.<flex>': ['1fr', '1fr'], |
| 125 '<track-size>.<track-breadth>.min-content': ['min-content', 'min-content
'], |
| 126 '<track-size>.<track-breadth>.max-content': ['max-content', 'max-content
'], |
| 127 '<track-size>.<track-breadth>.minmax()': ['minmax(100px, 200px)', 'minma
x(100px, 200px)'], |
| 128 'reset': ['auto', 'auto'], |
| 129 }, |
| 130 'grid-auto-rows': { |
| 131 initial: 'auto', |
| 132 '<track-size>.auto': ['auto', 'auto'], |
| 133 '<track-size>.<track-breadth>.<length>': ['100px', '100px'], |
| 134 '<track-size>.<track-breadth>.<percentage>': ['100%', '100%'], |
| 135 '<track-size>.<track-breadth>.<flex>': ['1fr', '1fr'], |
| 136 '<track-size>.<track-breadth>.min-content': ['min-content', 'min-content
'], |
| 137 '<track-size>.<track-breadth>.max-content': ['max-content', 'max-content
'], |
| 138 '<track-size>.<track-breadth>.minmax()': ['minmax(100px, 200px)', 'minma
x(100px, 200px)'], |
| 139 'reset': ['auto', 'auto'], |
| 140 }, |
| 141 'grid-auto-flow': { |
| 142 initial: 'row', |
| 143 'row': ['row', 'row'], |
| 144 'column': ['column', 'column'], |
| 145 'dense': ['dense', 'row dense'], |
| 146 'row dense': ['row dense', 'row dense'], |
| 147 'column dense': ['column dense', 'column dense'], |
| 148 'reset': ['row', 'row'], |
| 149 }, |
| 150 'grid-row-start': { |
| 151 initial: 'auto', |
| 152 'auto': ['auto', 'auto'], |
| 153 '<custom-ident>': ['a', 'a'], |
| 154 '<integer>': ['1', '1'], |
| 155 '<integer> <ident>': ['1 a', '1 a'], |
| 156 'span <integer>': ['span 1', 'span 1'], |
| 157 'span <custom-ident>': ['span a', 'span 1 a'], |
| 158 'span <integer> <custom-ident>': ['span 2 a', 'span 2 a'], |
| 159 'reset': ['auto', 'auto'], |
| 160 }, |
| 161 'grid-column-start': { |
| 162 initial: 'auto', |
| 163 'auto': ['auto', 'auto'], |
| 164 '<custom-ident>': ['a', 'a'], |
| 165 '<integer>': ['1', '1'], |
| 166 '<integer> <ident>': ['1 a', '1 a'], |
| 167 'span <integer>': ['span 1', 'span 1'], |
| 168 'span <custom-ident>': ['span a', 'span 1 a'], |
| 169 'span <integer> <custom-ident>': ['span 2 a', 'span 2 a'], |
| 170 'reset': ['auto', 'auto'], |
| 171 }, |
| 172 'grid-row-end': { |
| 173 initial: 'auto', |
| 174 'auto': ['auto', 'auto'], |
| 175 '<custom-ident>': ['a', 'a'], |
| 176 '<integer>': ['1', '1'], |
| 177 '<integer> <ident>': ['1 a', '1 a'], |
| 178 'span <integer>': ['span 1', 'span 1'], |
| 179 'span <custom-ident>': ['span a', 'span 1 a'], |
| 180 'span <integer> <custom-ident>': ['span 2 a', 'span 2 a'], |
| 181 'reset': ['auto', 'auto'], |
| 182 }, |
| 183 'grid-column-end': { |
| 184 initial: 'auto', |
| 185 'auto': ['auto', 'auto'], |
| 186 '<custom-ident>': ['a', 'a'], |
| 187 '<integer>': ['1', '1'], |
| 188 '<integer> <ident>': ['1 a', '1 a'], |
| 189 'span <integer>': ['span 1', 'span 1'], |
| 190 'span <custom-ident>': ['span a', 'span 1 a'], |
| 191 'span <integer> <custom-ident>': ['span 2 a', 'span 2 a'], |
| 192 'reset': ['auto', 'auto'], |
| 193 }, |
| 194 'grid-column': { |
| 195 initial: 'auto', |
| 196 'auto': ['auto', 'auto'], |
| 197 '<custom-ident>': ['a / b', 'a / b'], |
| 198 '<integer> start': ['1', '1'], |
| 199 '<integer>': ['1 / 3', '1 / 3'], |
| 200 '<integer> <ident>': ['1 a / 2 b', '1 a / 2 b'], |
| 201 'span <integer>': ['span 1 / span 2', 'span 1 / span 2'], |
| 202 'span <custom-ident>': ['span a / span b', 'span 1 a / span 1 b'], |
| 203 'span <integer> <custom-ident>': ['span 2 a / span 3 b', 'span 2 a / spa
n 3 b'], |
| 204 'reset': ['auto', 'auto'], |
| 205 }, |
| 206 'grid-row': { |
| 207 initial: 'auto', |
| 208 'auto': ['auto', 'auto'], |
| 209 '<custom-ident>': ['a / b', 'a / b'], |
| 210 '<integer> start': ['1', '1'], |
| 211 '<integer>': ['1 / 3', '1 / 3'], |
| 212 '<integer> <ident>': ['1 a / 2 b', '1 a / 2 b'], |
| 213 'span <integer>': ['span 1 / span 2', 'span 1 / span 2'], |
| 214 'span <custom-ident>': ['span a / span b', 'span 1 a / span 1 b'], |
| 215 'span <integer> <custom-ident>': ['span 2 a / span 3 b', 'span 2 a / spa
n 3 b'], |
| 216 'reset': ['auto', 'auto'], |
| 217 }, |
| 218 'grid-area': { |
| 219 initial: 'auto', |
| 220 'auto': ['auto', 'auto'], |
| 221 '<custom-ident>': ['a / b / c / d', 'a / b / c / d'], |
| 222 '<integer> start': ['1 / 2', '1 / 2'], |
| 223 '<integer>': ['1 / 2 / 3 / 4', '1 / 2 / 3 / 4'], |
| 224 '<integer> <ident>': ['1 a / 2 b / 3 c / 4 d', '1 a / 2 b / 3 c / 4 d'], |
| 225 'span <integer>': ['span 1 / span 2 / span 3 / span 4', 'span 1 / span 2
/ span 3 / span 4'], |
| 226 'span <custom-ident>': ['span a / span b / span c / span d', 'span 1 a /
span 1 b / span 1 c / span 1 d'], |
| 227 'span <integer> <custom-ident>': ['span 2 a / span 3 b / span 4 c / span
5 d', 'span 2 a / span 3 b / span 4 c / span 5 d'], |
| 228 'reset': ['auto', 'auto'], |
| 229 }, |
| 230 }) |
| 231 </script> |
| 232 </body> |
| 233 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2670473003:
[css-grid] Import W3C Test Suite (Closed)
