test_align_justify_computed_values.html (27553B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=696253 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>Test align/justify-items/self/content computed values</title> 9 <script src="/tests/SimpleTest/SimpleTest.js"></script> 10 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 11 </head> 12 <body style="position:relative"> 13 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=696253">Mozilla Bug 696253</a> 14 <style> 15 #flexContainer, #flexContainerGrid { display: flex; position:relative; } 16 #gridContainer, #gridContainerFlex { display: grid; position:relative; } 17 #display b, #absChild { position:absolute; } 18 </style> 19 <div id="display"> 20 <div id="myDiv"></div> 21 <div id="flexContainer"><a></a><b></b></div> 22 <div id="gridContainer"><a></a><b></b></div> 23 <div id="flexContainerGrid"><a style="diplay:grid"></a><b style="diplay:grid"></b></div> 24 <div id="gridContainerFlex"><a style="diplay:flex"></a><b style="diplay:flex"></b></div> 25 </div> 26 <div id="absChild"></div> 27 <pre id="test"> 28 <script type="application/javascript"> 29 "use strict"; 30 /* 31 * Utility function for getting computed style of "align-self": 32 */ 33 function getComputedAlignSelf(elem) { 34 return window.getComputedStyle(elem).alignSelf; 35 } 36 function getComputedAlignItems(elem) { 37 return window.getComputedStyle(elem).alignItems; 38 } 39 function getComputedAlignContent(elem) { 40 return window.getComputedStyle(elem).alignContent; 41 } 42 function getComputedJustifySelf(elem) { 43 return window.getComputedStyle(elem).justifySelf; 44 } 45 function getComputedJustifyItems(elem) { 46 return window.getComputedStyle(elem).justifyItems; 47 } 48 function getComputedJustifyContent(elem) { 49 return window.getComputedStyle(elem).justifyContent; 50 } 51 52 /** 53 * Test behavior of 'align-self:auto' (Bug 696253 and Bug 1304012) 54 * =============================================== 55 * 56 * In a previous revision of the CSS Alignment spec, align-self:auto 57 * was required to actually *compute* to the parent's align-items value -- 58 * but now, the spec says it simply computes to itself, and it should 59 * only get converted into the parent's align-items value when it's used 60 * in layout. This test verifies that we do indeed have it compute to 61 * itself, regardless of the parent's align-items value. 62 */ 63 64 /* 65 * Tests for a block node with a parent node: 66 */ 67 function testGeneralNode(elem) { 68 // Test initial computed style 69 // (Initial value should be 'auto', which should compute to itself) 70 is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " + 71 "initial computed value of 'align-self' should be 'auto'"); 72 73 // Test value after setting align-self explicitly to "auto" 74 elem.style.alignSelf = "auto"; 75 is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " + 76 "computed value of 'align-self: auto' should be 'auto'"); 77 elem.style.alignSelf = ""; // clean up 78 79 // Test value after setting align-self explicitly to "inherit" 80 elem.style.alignSelf = "inherit"; 81 if (elem.parentNode && elem.parentNode.style) { 82 is(getComputedAlignSelf(elem), getComputedAlignSelf(elem.parentNode), 83 elem.tagName + ": computed value of 'align-self: inherit' " + 84 "should match the value on the parent"); 85 } else { 86 is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " + 87 "computed value of 'align-self: inherit' should be 'auto', " + 88 "when there is no parent"); 89 } 90 elem.style.alignSelf = ""; // clean up 91 } 92 93 /* 94 * Tests that depend on us having a parent node: 95 */ 96 function testNodeThatHasParent(elem) { 97 // Sanity-check that we actually do have a styleable parent: 98 ok(elem.parentNode && elem.parentNode.style, elem.tagName + ": " + 99 "bug in test -- expecting caller to pass us a node with a parent"); 100 101 // Test initial computed style when "align-items" has been set on our parent. 102 // (elem's initial "align-self" value should be "auto", which should compute 103 // to its parent's "align-items" value, which in this case is "center".) 104 elem.parentNode.style.alignItems = "center"; 105 is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " + 106 "initial computed value of 'align-self' should be 'auto', even " + 107 "after changing parent's 'align-items' value"); 108 109 // ...and now test computed style after setting "align-self" explicitly to 110 // "auto" (with parent "align-items" still at "center") 111 elem.style.alignSelf = "auto"; 112 is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " + 113 "computed value of 'align-self: auto' should remain 'auto', after " + 114 "being explicitly set"); 115 116 elem.style.alignSelf = ""; // clean up 117 elem.parentNode.style.alignItems = ""; // clean up 118 119 // Finally: test computed style after setting "align-self" to "inherit" 120 // and leaving parent at its initial value which should be "auto". 121 elem.style.alignSelf = "inherit"; 122 is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " + 123 "computed value of 'align-self: inherit' should take parent's " + 124 "computed 'align-self' value (which should be 'auto', " + 125 "if we haven't explicitly set any other style"); 126 elem.style.alignSelf = ""; // clean up 127 } 128 129 /* 130 * Main test function 131 */ 132 function main() { 133 // Test the root node 134 // ================== 135 // (It's special because it has no parent ComputedStyle.) 136 137 var rootNode = document.documentElement; 138 139 // Sanity-check that we actually have the root node, as far as CSS is concerned. 140 // (Note: rootNode.parentNode is a HTMLDocument object -- not an element that 141 // we inherit style from.) 142 ok(!rootNode.parentNode.style, 143 "expecting root node to have no node to inherit style from"); 144 145 testGeneralNode(rootNode); 146 147 // Test the body node 148 // ================== 149 // (It's special because it has no grandparent ComputedStyle.) 150 151 var body = document.getElementsByTagName("body")[0]; 152 is(body.parentNode, document.documentElement, 153 "expecting body element's parent to be the root node"); 154 155 testGeneralNode(body); 156 testNodeThatHasParent(body); 157 158 // 159 // align-items/self tests: 160 // 161 //// Block tests 162 var element = document.body; 163 var child = document.getElementById("display"); 164 var absChild = document.getElementById("absChild"); 165 is(getComputedAlignItems(element), 'normal', "default align-items value for block container"); 166 is(getComputedAlignSelf(child), 'auto', "default align-self value for block child"); 167 is(getComputedAlignSelf(absChild), 'auto', "default align-self value for block container abs.pos. child"); 168 element.style.alignItems = "end"; 169 is(getComputedAlignSelf(child), 'auto', "align-self:auto value persists for block child"); 170 is(getComputedAlignSelf(absChild), 'auto', "align-self:auto value persists for block container abs.pos. child"); 171 element.style.alignItems = "left"; 172 is(getComputedAlignItems(element), 'end', "align-items:left is an invalid declaration"); 173 is(getComputedAlignSelf(child), 'auto', "align-self:auto persists for block child"); 174 is(getComputedAlignSelf(absChild), 'auto', "align-self:auto value persists for block container abs.pos. child"); 175 element.style.alignItems = "right"; 176 is(getComputedAlignItems(element), 'end', "align-items:right is an invalid declaration"); 177 is(getComputedAlignSelf(child), 'auto', "align-self:auto value persists for block child"); 178 is(getComputedAlignSelf(absChild), 'auto', "align-self:auto value persists for block container abs.pos. child"); 179 180 //// Flexbox tests 181 function testFlexAlignItemsSelf(elem) { 182 var item = elem.firstChild; 183 var abs = elem.children[1]; 184 is(getComputedAlignItems(elem), 'normal', "default align-items value for flex container"); 185 is(getComputedAlignSelf(item), 'auto', "default align-self value for flex item"); 186 is(getComputedAlignSelf(abs), 'auto', "default align-self value for flex container abs.pos. child"); 187 elem.style.alignItems = "flex-end"; 188 is(getComputedAlignSelf(item), 'auto', "align-self:auto value persists for flex container child"); 189 is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for flex container abs.pos. child"); 190 elem.style.alignItems = "left"; 191 is(getComputedAlignItems(elem), 'flex-end', "align-items:left is an invalid declaration"); 192 elem.style.alignItems = ""; 193 } 194 testFlexAlignItemsSelf(document.getElementById("flexContainer")); 195 testFlexAlignItemsSelf(document.getElementById("flexContainerGrid")); 196 197 //// Grid tests 198 function testGridAlignItemsSelf(elem) { 199 var item = elem.firstChild; 200 var abs = elem.children[1]; 201 is(getComputedAlignItems(elem), 'normal', "default align-items value for grid container"); 202 is(getComputedAlignSelf(item), 'auto', "default align-self value for grid item"); 203 is(getComputedAlignSelf(abs), 'auto', "default align-self value for grid container abs.pos. child"); 204 elem.style.alignItems = "end"; 205 is(getComputedAlignSelf(item), 'auto', "align-self:auto value persists for grid container child"); 206 is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for grid container abs.pos. child"); 207 208 elem.style.alignItems = "left"; 209 is(getComputedAlignItems(elem), 'end', "align-items:left is an invalid declaration"); 210 is(getComputedAlignSelf(item), 'auto', "align-self:auto value persists for grid container child"); 211 is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for grid container abs.pos. child"); 212 elem.style.alignItems = "right"; 213 is(getComputedAlignItems(elem), 'end', "align-items:right is an invalid declaration"); 214 is(getComputedAlignSelf(item), 'auto', "align-self:auto value persists for grid container child"); 215 is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for grid container abs.pos. child"); 216 217 item.style.alignSelf = ""; 218 abs.style.alignSelf = ""; 219 elem.style.alignItems = ""; 220 item.style.alignSelf = ""; 221 } 222 testGridAlignItemsSelf(document.getElementById("gridContainer")); 223 testGridAlignItemsSelf(document.getElementById("gridContainerFlex")); 224 225 // 226 // justify-items/self tests: 227 // 228 //// Block tests 229 element = document.body; 230 child = document.getElementById("display"); 231 absChild = document.getElementById("absChild"); 232 is(getComputedJustifyItems(element), 'normal', "default justify-items value for block container"); 233 is(getComputedJustifySelf(child), 'auto', "default justify-self value for block container child"); 234 is(getComputedJustifySelf(absChild), 'auto', "default justify-self value for block container abs.pos. child"); 235 element.style.justifyItems = "end"; 236 is(getComputedJustifySelf(child), 'auto', "justify-self:auto value persists for block child"); 237 is(getComputedJustifySelf(absChild), 'auto', "justify-self:auto value persists for block container abs.pos. child"); 238 element.style.justifyItems = "left"; 239 is(getComputedJustifyItems(element), 'left', "justify-items:left computes to itself on a block"); 240 is(getComputedJustifySelf(child), 'auto', "justify-self:auto value persists for block child"); 241 is(getComputedJustifySelf(absChild), 'auto', "justify-self:auto value persists for block container abs.pos. child"); 242 element.style.justifyItems = "right"; 243 is(getComputedJustifySelf(child), 'auto', "justify-self:auto value persists for block child"); 244 is(getComputedJustifySelf(absChild), 'auto', "justify-self:auto value persists for block container abs.pos. child"); 245 element.style.justifyItems = "safe right"; 246 is(getComputedJustifySelf(child), 'auto', "justify-self:auto value persists for block child"); 247 element.style.justifyItems = ""; 248 child.style.justifySelf = "left"; 249 is(getComputedJustifySelf(child), 'left', "justify-self:left computes to left on block child"); 250 child.style.justifySelf = "right"; 251 is(getComputedJustifySelf(child), 'right', "justify-self:right computes to right on block child"); 252 child.style.justifySelf = ""; 253 absChild.style.justifySelf = "right"; 254 is(getComputedJustifySelf(absChild), 'right', "justify-self:right computes to right on block container abs.pos. child"); 255 256 //// Flexbox tests 257 function testFlexJustifyItemsSelf(elem) { 258 var item = elem.firstChild; 259 var abs = elem.children[1]; 260 is(getComputedJustifyItems(elem), 'normal', "default justify-items value for flex container"); 261 is(getComputedJustifySelf(item), 'auto', "default justify-self value for flex item"); 262 is(getComputedJustifySelf(abs), 'auto', "default justify-self value for flex container abs.pos. child"); 263 elem.style.justifyItems = "flex-end"; 264 is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for flex container child"); 265 is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for flex container abs.pos. child"); 266 elem.style.justifyItems = "left"; 267 is(getComputedJustifyItems(elem), 'left', "justify-items:left computes to itself for flex container"); 268 elem.style.justifyItems = "safe right"; 269 is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for flex container child"); 270 // XXX TODO: add left/right tests (bug 1221565) 271 elem.style.justifyItems = ""; 272 } 273 testFlexJustifyItemsSelf(document.getElementById("flexContainer")); 274 testFlexJustifyItemsSelf(document.getElementById("flexContainerGrid")); 275 276 //// Grid tests 277 function testGridJustifyItemsSelf(elem) { 278 var item = elem.firstChild; 279 var abs = elem.children[1]; 280 is(getComputedJustifyItems(elem), 'normal', "default justify-items value for grid container"); 281 is(getComputedJustifySelf(item), 'auto', "default justify-self value for grid item"); 282 is(getComputedJustifySelf(abs), 'auto', "default justify-self value for grid container abs.pos. child"); 283 elem.style.justifyItems = "end"; 284 is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child"); 285 is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child"); 286 elem.style.justifyItems = "left"; 287 is(getComputedJustifyItems(elem), 'left', "justify-items:left computes to itself for grid container"); 288 is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child"); 289 is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child"); 290 elem.style.justifyItems = "legacy left"; 291 is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child"); 292 is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child"); 293 elem.style.justifyItems = "right"; 294 is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child"); 295 is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child"); 296 elem.style.justifyItems = "safe right"; 297 is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child"); 298 elem.style.justifyItems = "legacy right"; 299 is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child"); 300 is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child"); 301 elem.style.justifyItems = "legacy center"; 302 item.style.justifyItems = "inherit"; 303 abs.style.justifyItems = "inherit"; 304 is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child"); 305 is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child"); 306 is(getComputedJustifyItems(elem), 'legacy center', "justify-items computes to itself grid container"); 307 is(getComputedJustifyItems(item), 'legacy center', "justify-items inherits including legacy keyword to grid item"); 308 is(getComputedJustifyItems(abs), 'legacy center', "justify-items inherits including legacy keyword to grid container abs.pos. child"); 309 elem.style.justifyItems = ""; 310 item.style.justifySelf = "left"; 311 is(getComputedJustifySelf(item), 'left', "justify-self:left computes to left on grid item"); 312 item.style.justifySelf = "right"; 313 is(getComputedJustifySelf(item), 'right', "justify-self:right computes to right on grid item"); 314 item.style.justifySelf = "safe right"; 315 is(getComputedJustifySelf(item), 'safe right', "justify-self:'safe right' computes to 'safe right' on grid item"); 316 item.style.justifySelf = ""; 317 abs.style.justifySelf = "right"; 318 is(getComputedJustifySelf(abs), 'right', "justify-self:right computes to right on grid container abs.pos. child"); 319 abs.style.justifySelf = ""; 320 elem.style.justifyItems = ""; 321 item.style.justifySelf = ""; 322 } 323 testGridJustifyItemsSelf(document.getElementById("gridContainer")); 324 testGridJustifyItemsSelf(document.getElementById("gridContainerFlex")); 325 326 // 327 // align-content tests: 328 // 329 //// Block tests 330 element = document.body; 331 child = document.getElementById("display"); 332 absChild = document.getElementById("absChild"); 333 is(getComputedAlignContent(element), 'normal', "default align-content value for block container"); 334 is(getComputedAlignContent(child), 'normal', "default align-content value for block child"); 335 is(getComputedAlignContent(absChild), 'normal', "default align-content value for block container abs.pos. child"); 336 element.style.alignContent = "end"; 337 is(getComputedAlignContent(child), 'normal', "default align-content isn't affected by parent align-content value for in-flow child"); 338 is(getComputedAlignContent(absChild), 'normal', "default align-content isn't affected by parent align-content value for block container abs.pos. child"); 339 element.style.alignContent = "left"; 340 is(getComputedAlignContent(element), 'end', "align-content:left isn't a valid declaration"); 341 is(getComputedAlignContent(absChild), 'normal', "default align-content isn't affected by parent align-content value for block container abs.pos. child"); 342 element.style.alignContent = "right"; 343 is(getComputedAlignContent(element), 'end', "align-content:right isn't a valid declaration"); 344 is(getComputedAlignContent(absChild), 'normal', "default align-content isn't affected by parent align-content value for block container abs.pos. child"); 345 element.style.alignContent = ""; 346 347 //// Flexbox tests 348 function testFlexAlignContent(elem) { 349 var item = elem.firstChild; 350 var abs = elem.children[1]; 351 is(getComputedAlignContent(elem), 'normal', "default align-content value for flex container"); 352 is(getComputedAlignContent(item), 'normal', "default align-content value for flex item"); 353 is(getComputedAlignContent(abs), 'normal', "default align-content value for flex container abs.pos. child"); 354 elem.style.alignContent = "safe end"; 355 is(getComputedAlignContent(elem), 'safe end', "align-content:'safe end' computes to itself for flex container"); 356 is(getComputedAlignContent(item), 'normal', "default align-content isn't affected by parent align-content value for flex item"); 357 is(getComputedAlignContent(abs), 'normal', "default align-content isn't affected by parent align-content value for flex container abs.pos. child"); 358 elem.style.alignContent = ""; 359 } 360 testFlexAlignContent(document.getElementById("flexContainer")); 361 testFlexAlignContent(document.getElementById("flexContainerGrid")); 362 363 //// Grid tests 364 function testGridAlignContent(elem) { 365 var item = elem.firstChild; 366 var abs = elem.children[1]; 367 is(getComputedAlignContent(elem), 'normal', "default align-content value for grid container"); 368 is(getComputedAlignContent(item), 'normal', "default align-content value for grid item"); 369 is(getComputedAlignContent(abs), 'normal', "default align-content value for grid container abs.pos. child"); 370 elem.style.alignContent = "safe end"; 371 is(getComputedAlignContent(elem), 'safe end', "align-content:'safe end' computes to itself on grid container"); 372 is(getComputedAlignContent(item), 'normal', "default align-content isn't affected by parent align-content value for grid item"); 373 is(getComputedAlignContent(abs), 'normal', "default align-content isn't affected by parent align-content value for grid container abs.pos. child"); 374 elem.style.alignContent = "safe end"; 375 item.style.alignContent = "inherit"; 376 abs.style.alignContent = "inherit"; 377 is(getComputedAlignContent(elem), 'safe end', "align-content:'safe end' computes to 'align-content:safe end' on grid container"); 378 is(getComputedAlignContent(item), 'safe end', "align-content:'safe end' inherits as 'align-content:safe end' to grid item"); 379 is(getComputedAlignContent(abs), 'safe end', "align-content:'safe end' inherits as 'align-content:safe end' to grid container abs.pos. child"); 380 item.style.alignContent = ""; 381 abs.style.alignContent = ""; 382 elem.style.alignContent = ""; 383 item.style.alignContent = ""; 384 } 385 testGridAlignContent(document.getElementById("gridContainer")); 386 testGridAlignContent(document.getElementById("gridContainerFlex")); 387 388 389 // 390 // justify-content tests: 391 // 392 //// Block tests 393 element = document.body; 394 child = document.getElementById("display"); 395 absChild = document.getElementById("absChild"); 396 is(getComputedJustifyContent(element), 'normal', "default justify-content value for block container"); 397 is(getComputedJustifyContent(child), 'normal', "default justify-content value for block child"); 398 is(getComputedJustifyContent(absChild), 'normal', "default justify-content value for block container abs.pos. child"); 399 element.style.justifyContent = "end"; 400 is(getComputedJustifyContent(child), 'normal', "default justify-content isn't affected by parent justify-content value for in-flow child"); 401 is(getComputedJustifyContent(absChild), 'normal', "default justify-content isn't affected by parent justify-content value for block container abs.pos. child"); 402 element.style.justifyContent = "left"; 403 is(getComputedJustifyContent(element), 'left', "justify-content:left computes to left on block child"); 404 is(getComputedJustifyContent(absChild), 'normal', "default justify-content isn't affected by parent justify-content value for block container abs.pos. child"); 405 element.style.justifyContent = "right"; 406 is(getComputedJustifyContent(element), 'right', "justify-content:right computes to right on block child"); 407 is(getComputedJustifyContent(absChild), 'normal', "default justify-content isn't affected by parent justify-content value for block container abs.pos. child"); 408 element.style.justifyContent = "safe right"; 409 is(getComputedJustifyContent(element), 'safe right', "justify-content:'safe right' computes to 'justify-content:safe right'"); 410 element.style.justifyContent = ""; 411 child.style.justifyContent = "left"; 412 is(getComputedJustifyContent(child), 'left', "justify-content:left computes to left on block child"); 413 child.style.justifyContent = "right"; 414 is(getComputedJustifyContent(child), 'right', "justify-content:right computes to right on block child"); 415 child.style.justifyContent = "safe left"; 416 is(getComputedJustifyContent(child), 'safe left', "justify-content:safe left computes to 'safe left' on block child"); 417 child.style.justifyContent = ""; 418 absChild.style.justifyContent = "right"; 419 is(getComputedJustifyContent(absChild), 'right', "justify-content:right computes to right on block container abs.pos. child"); 420 absChild.style.justifyContent = ""; 421 422 //// Flexbox tests 423 function testFlexJustifyContent(elem) { 424 var item = elem.firstChild; 425 var abs = elem.children[1]; 426 is(getComputedJustifyContent(elem), 'normal', "default justify-content value for flex container"); 427 is(getComputedJustifyContent(item), 'normal', "default justify-content value for flex item"); 428 is(getComputedJustifyContent(abs), 'normal', "default justify-content value for flex container abs.pos. child"); 429 elem.style.justifyContent = "safe end"; 430 is(getComputedJustifyContent(elem), 'safe end', "justify-content:'safe end' computes to itself for flex container"); 431 is(getComputedJustifyContent(item), 'normal', "default justify-content isn't affected by parent justify-content value for flex item"); 432 is(getComputedJustifyContent(abs), 'normal', "default justify-content isn't affected by parent justify-content value for flex container abs.pos. child"); 433 // XXX TODO: add left/right tests (bug 1221565) 434 elem.style.justifyContent = ""; 435 } 436 testFlexJustifyContent(document.getElementById("flexContainer")); 437 testFlexJustifyContent(document.getElementById("flexContainerGrid")); 438 439 //// Grid tests 440 function testGridJustifyContent(elem) { 441 var item = elem.firstChild; 442 var abs = elem.children[1]; 443 is(getComputedJustifyContent(elem), 'normal', "default justify-content value for grid container"); 444 is(getComputedJustifyContent(item), 'normal', "default justify-content value for grid item"); 445 is(getComputedJustifyContent(abs), 'normal', "default justify-content value for grid container abs.pos. child"); 446 elem.style.justifyContent = "safe end"; 447 is(getComputedJustifyContent(elem), 'safe end', "justify-content:'safe end' computes to itself on grid container"); 448 is(getComputedJustifyContent(item), 'normal', "default justify-content isn't affected by parent justify-content value for grid item"); 449 is(getComputedJustifyContent(abs), 'normal', "default justify-content isn't affected by parent justify-content value for grid container abs.pos. child"); 450 elem.style.justifyContent = "left"; 451 is(getComputedJustifyContent(elem), 'left', "justify-content:left computes to left on grid container"); 452 is(getComputedJustifyContent(abs), 'normal', "default justify-content isn't affected by parent justify-content value for grid container abs.pos. child"); 453 elem.style.justifyContent = "right"; 454 is(getComputedJustifyContent(elem), 'right', "justify-content:right computes to right on grid container"); 455 is(getComputedJustifyContent(abs), 'normal', "default justify-content isn't affected by parent justify-content value for grid container abs.pos. child"); 456 elem.style.justifyContent = "safe right"; 457 item.style.justifyContent = "inherit"; 458 abs.style.justifyContent = "inherit"; 459 is(getComputedJustifyContent(elem), 'safe right', "justify-content:'safe right' computes to 'justify-content:safe right' on grid container"); 460 is(getComputedJustifyContent(item), 'safe right', "justify-content:'safe right' inherits as 'justify-content:safe right' to grid item"); 461 is(getComputedJustifyContent(abs), 'safe right', "justify-content:'safe right' inherits as 'justify-content:safe right' to grid container abs.pos. child"); 462 item.style.justifyContent = "left"; 463 is(getComputedJustifyContent(item), 'left', "justify-content:left computes to left on grid item"); 464 item.style.justifyContent = "right"; 465 is(getComputedJustifyContent(item), 'right', "justify-content:right computes to right on grid item"); 466 item.style.justifyContent = "safe right"; 467 is(getComputedJustifyContent(item), 'safe right', "justify-content:'safe right' computes to 'safe right' on grid item"); 468 item.style.justifyContent = ""; 469 abs.style.justifyContent = "right"; 470 is(getComputedJustifyContent(abs), 'right', "justify-content:right computes to right on grid container abs.pos. child"); 471 abs.style.justifyContent = ""; 472 elem.style.justifyContent = ""; 473 item.style.justifyContent = ""; 474 } 475 testGridJustifyContent(document.getElementById("gridContainer")); 476 testGridJustifyContent(document.getElementById("gridContainerFlex")); 477 } 478 479 main(); 480 481 </script> 482 </pre> 483 </body> 484 </html>