grid-layout-properties.html (9917B)
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 exist."> 12 <script src="/resources/testharness.js"></script> 13 <script src="/resources/testharnessreport.js"></script> 14 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 15 <style> 16 #container { 17 width: 800px; 18 height: 600px; 19 } 20 #myDiv { 21 font: 50px/1 Ahem; 22 justify-content: start; 23 align-content: start; 24 } 25 </style> 26 </head> 27 <body> 28 <div id="log"></div> 29 <div id="container"> 30 <div id="myDiv"> 31 <div>I T</div> 32 <div>IT</div> 33 <div>I</div> 34 </div> 35 </div> 36 37 <script> 38 setup({explicit_done: true}); 39 document.fonts.ready.then(()=> { 40 var myDiv = document.getElementById('myDiv') 41 42 test(function(){ 43 myDiv.style.display = 'grid' 44 assert_equals(myDiv.style.display, 'grid', 45 'display should be "grid"') 46 }, 'display: grid') 47 48 test(function(){ 49 myDiv.style.display = 'inline-grid' 50 assert_equals(myDiv.style.display, 'inline-grid', 51 'display should be "inline-grid"') 52 }, 'display: inline-grid') 53 54 void function(data){ 55 56 myDiv.style.display = 'grid' 57 58 Object.keys(data).forEach(function(prop){ 59 test(function(){ 60 assert_true(prop in myDiv.style) 61 }, prop) 62 63 if ('initial' in data[prop]) test(function(){ 64 var initial = data[prop].initial 65 delete data[prop].initial 66 assert_equals(getComputedStyle(myDiv)[prop], initial, 'initial value of ' + prop + ' should be ' + initial) 67 }, prop + '.initial') 68 69 var syntaxTests = data[prop] 70 Object.keys(syntaxTests).forEach(function(testcase){ 71 test(function(){ 72 assert_true(prop in myDiv.style) 73 myDiv.style[prop] = syntaxTests[testcase][0] 74 assert_equals(myDiv.style[prop], syntaxTests[testcase][0], testcase) 75 assert_equals(getComputedStyle(myDiv)[prop], syntaxTests[testcase][1], testcase) 76 }, prop + '.' + testcase) 77 }) 78 }) 79 80 }({ 81 'grid-template-columns': { // named 'grid-definition-columns' in last draft 82 initial: '150px', 83 'none': ['none', '150px'], 84 '<line-names>': ['[a] auto [b] auto [c]', '[a] 150px [b] 100px [c]'], 85 '<track-size>.auto': ['auto', '150px'], 86 '<track-size>.<track-breadth>.<length>': ['100px', '100px'], 87 '<track-size>.<track-breadth>.<percentage>': ['100%', '800px'], 88 '<track-size>.<track-breadth>.<flex>': ['1fr', '800px'], 89 '<track-size>.<track-breadth>.min-content': ['min-content', '100px'], 90 '<track-size>.<track-breadth>.max-content': ['max-content', '150px'], 91 '<track-size>.<track-breadth>.minmax()': ['minmax(100px, 200px)', '200px'], 92 'reset': ['none', '150px'], 93 }, 94 'grid-template-rows': { // named 'grid-definition-rows' in last draft 95 initial: '50px 50px 50px', 96 'none': ['none', '50px 50px 50px'], 97 '<line-names>': ['[a] auto [b] auto [c]', '[a] 50px [b] 50px [c] 50px'], 98 '<track-size>.auto': ['auto', '50px 50px 50px'], 99 '<track-size>.<track-breadth>.<length>': ['100px', '100px 50px 50px'], 100 '<track-size>.<track-breadth>.<percentage>': ['100%', '150px 50px 50px'], 101 '<track-size>.<track-breadth>.<flex>': ['1fr', '50px 50px 50px'], 102 '<track-size>.<track-breadth>.min-content': ['min-content', '50px 50px 50px'], 103 '<track-size>.<track-breadth>.max-content': ['max-content', '50px 50px 50px'], 104 '<track-size>.<track-breadth>.minmax()': ['minmax(100px, 200px)', '200px 50px 50px'], 105 'reset': ['none', '50px 50px 50px'], 106 }, 107 'grid-template-areas': { 108 initial: 'none', 109 'none': ['none', 'none'], 110 '<string>+': ['"a"', '"a"'], 111 'reset': ['none', 'none'], 112 }, 113 'grid-template': { 114 initial: '50px 50px 50px / 150px', 115 'none': ['', '50px 50px 50px / 150px'], 116 '<grid-template-rows> / <grid-template-columns>': ['100px 100px / 200px 200px', '100px 100px / 200px 200px'], 117 '<line-names>': ['[a] auto [b] auto [c] / [d] auto [e] auto [f]', '[a] auto [b] auto [c] / [d] auto [e] auto [f]'], 118 '<string>+': ['"a b" "a b" / 50px 50px', '"a b" "a b" / 50px 50px'], 119 '<string><track-size>+': ['"a b" 100px / 50px', '"a b" 100px / 50px'], 120 'reset': ['', '50px 50px 50px / 150px'], 121 }, 122 'grid-auto-columns': { 123 initial: 'auto', 124 '<track-size>.auto': ['auto', 'auto'], 125 '<track-size>.<track-breadth>.<length>': ['100px', '100px'], 126 '<track-size>.<track-breadth>.<percentage>': ['100%', '100%'], 127 '<track-size>.<track-breadth>.<flex>': ['1fr', '1fr'], 128 '<track-size>.<track-breadth>.min-content': ['min-content', 'min-content'], 129 '<track-size>.<track-breadth>.max-content': ['max-content', 'max-content'], 130 '<track-size>.<track-breadth>.minmax()': ['minmax(100px, 200px)', 'minmax(100px, 200px)'], 131 'reset': ['auto', 'auto'], 132 }, 133 'grid-auto-rows': { 134 initial: 'auto', 135 '<track-size>.auto': ['auto', 'auto'], 136 '<track-size>.<track-breadth>.<length>': ['100px', '100px'], 137 '<track-size>.<track-breadth>.<percentage>': ['100%', '100%'], 138 '<track-size>.<track-breadth>.<flex>': ['1fr', '1fr'], 139 '<track-size>.<track-breadth>.min-content': ['min-content', 'min-content'], 140 '<track-size>.<track-breadth>.max-content': ['max-content', 'max-content'], 141 '<track-size>.<track-breadth>.minmax()': ['minmax(100px, 200px)', 'minmax(100px, 200px)'], 142 'reset': ['auto', 'auto'], 143 }, 144 'grid-auto-flow': { 145 initial: 'row', 146 'row': ['row', 'row'], 147 'column': ['column', 'column'], 148 'dense': ['dense', 'dense'], 149 'row dense': ['dense', 'dense'], 150 'column dense': ['column dense', 'column dense'], 151 'reset': ['row', 'row'], 152 }, 153 'grid-row-start': { 154 initial: 'auto', 155 'auto': ['auto', 'auto'], 156 '<custom-ident>': ['a', 'a'], 157 '<integer>': ['1', '1'], 158 '<integer> <ident>': ['1 a', '1 a'], 159 'span <integer>': ['span 1', 'span 1'], 160 'span <custom-ident>': ['span a', 'span a'], 161 'span <integer> <custom-ident>': ['span 2 a', 'span 2 a'], 162 'reset': ['auto', 'auto'], 163 }, 164 'grid-column-start': { 165 initial: 'auto', 166 'auto': ['auto', 'auto'], 167 '<custom-ident>': ['a', 'a'], 168 '<integer>': ['1', '1'], 169 '<integer> <ident>': ['1 a', '1 a'], 170 'span <integer>': ['span 1', 'span 1'], 171 'span <custom-ident>': ['span a', 'span a'], 172 'span <integer> <custom-ident>': ['span 2 a', 'span 2 a'], 173 'reset': ['auto', 'auto'], 174 }, 175 'grid-row-end': { 176 initial: 'auto', 177 'auto': ['auto', 'auto'], 178 '<custom-ident>': ['a', 'a'], 179 '<integer>': ['1', '1'], 180 '<integer> <ident>': ['1 a', '1 a'], 181 'span <integer>': ['span 1', 'span 1'], 182 'span <custom-ident>': ['span a', 'span a'], 183 'span <integer> <custom-ident>': ['span 2 a', 'span 2 a'], 184 'reset': ['auto', 'auto'], 185 }, 186 'grid-column-end': { 187 initial: 'auto', 188 'auto': ['auto', 'auto'], 189 '<custom-ident>': ['a', 'a'], 190 '<integer>': ['1', '1'], 191 '<integer> <ident>': ['1 a', '1 a'], 192 'span <integer>': ['span 1', 'span 1'], 193 'span <custom-ident>': ['span a', 'span a'], 194 'span <integer> <custom-ident>': ['span 2 a', 'span 2 a'], 195 'reset': ['auto', 'auto'], 196 }, 197 'grid-column': { 198 initial: 'auto', 199 'auto': ['auto', 'auto'], 200 '<custom-ident>': ['a / b', 'a / b'], 201 '<integer> start': ['1', '1'], 202 '<integer>': ['1 / 3', '1 / 3'], 203 '<integer> <ident>': ['1 a / 2 b', '1 a / 2 b'], 204 'span <integer>': ['span 1 / span 2', 'span 1 / span 2'], 205 'span <custom-ident>': ['span a / span b', 'span a / span b'], 206 'span <integer> <custom-ident>': ['span 2 a / span 3 b', 'span 2 a / span 3 b'], 207 'reset': ['auto', 'auto'], 208 }, 209 'grid-row': { 210 initial: 'auto', 211 'auto': ['auto', 'auto'], 212 '<custom-ident>': ['a / b', 'a / b'], 213 '<integer> start': ['1', '1'], 214 '<integer>': ['1 / 3', '1 / 3'], 215 '<integer> <ident>': ['1 a / 2 b', '1 a / 2 b'], 216 'span <integer>': ['span 1 / span 2', 'span 1 / span 2'], 217 'span <custom-ident>': ['span a / span b', 'span a / span b'], 218 'span <integer> <custom-ident>': ['span 2 a / span 3 b', 'span 2 a / span 3 b'], 219 'reset': ['auto', 'auto'], 220 }, 221 'grid-area': { 222 initial: 'auto', 223 'auto': ['auto', 'auto'], 224 '<custom-ident>': ['a / b / c / d', 'a / b / c / d'], 225 '<integer> start': ['1 / 2', '1 / 2'], 226 '<integer>': ['1 / 2 / 3 / 4', '1 / 2 / 3 / 4'], 227 '<integer> <ident>': ['1 a / 2 b / 3 c / 4 d', '1 a / 2 b / 3 c / 4 d'], 228 'span <integer>': ['span 1 / span 2 / span 3 / span 4', 'span 1 / span 2 / span 3 / span 4'], 229 'span <custom-ident>': ['span a / span b / span c / span d', 'span a / span b / span c / span d'], 230 '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'], 231 'reset': ['auto', 'auto'], 232 }, 233 }) 234 done(); 235 }); 236 </script> 237 </body> 238 </html>