layout/style/test/test_align_justify_computed_values.html

   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>