third_party/WebKit/LayoutTests/fast/alignment/overwrite-self-alignment.html

   1 <!DOCTYPE html>
   2 <style>
   3 .parent {
   4    display: flex;
   5    justify-items: flex-end true;
   6    align-items: flex-start safe;
   7 }
   8 .parent .child {
   9    display: flex;
  10    justify-self: flex-end true;
  11    align-self: flex-start safe;
  12 }
  13 #parentId {
  14    justify-items: center;
  15    align-items: stretch;
  16 }
  17 #parentId .child {
  18    justify-self: center;
  19    align-self: stretch;
  20 }
  21 </style>
  22 <script src="../../resources/js-test.js"></script>
  23 <div class="parent">
  24     <div id="childOfDefaultParent" class="child"></div>
  25 </div>
  26 <div id="parentId" class="parent">
  27     <div id="childOfParentId" class="child"></div>
  28 </div>
  29 <script src="resources/alignment-parsing-utils.js"></script>
  30 <script>
  31 description('Test overwriting justify-self and align-self works as expected');
  32
  33 var parent = document.getElementById("parentId");
  34 shouldBeEqualToString("getComputedStyle(parent, '').getPropertyValue('justify-items')", "center");
  35 shouldBeEqualToString("getComputedStyle(parent, '').getPropertyValue('align-items')", "stretch");
  36
  37 var childOfDefaultParent = document.getElementById("childOfDefaultParent");
  38 shouldBeEqualToString("getComputedStyle(childOfDefaultParent, '').getPropertyValue('justify-self')", "flex-end true");
  39 shouldBeEqualToString("getComputedStyle(childOfDefaultParent, '').getPropertyValue('align-self')", "flex-start safe");
  40
  41 var childOfParentId = document.getElementById("childOfParentId");
  42 shouldBeEqualToString("getComputedStyle(childOfParentId, '').getPropertyValue('justify-self')", "center");
  43 shouldBeEqualToString("getComputedStyle(childOfParentId, '').getPropertyValue('align-self')", "stretch");
  44 </script>