LayoutTests/fast/alignment/parse-align-self_t01.dart

/*
 * Copyright (c) 2014, the Dart project authors.  Please see the AUTHORS file
 * for details. All rights reserved. Use of this source code is governed by a
 * BSD-style license that can be found in the LICENSE file.
 */
/**
 * @description Test that setting and getting align-self works as expected
 */
import "dart:html";
import "../../testcommon.dart";

main() {
  var style = new Element.html('''
      <style>
      #alignSelfBaseline {
          align-self: baseline;
      }

      #alignSelfStretch {
          align-self: stretch;
      }

      #alignSelfStart {
          align-self: start;
      }

      #alignSelfEnd {
          align-self: end;
      }

      #alignSelfCenter {
          align-self: center;
      }

      #alignSelfSelfStart {
          align-self: self-start;
      }

      #alignSelfSelfEnd {
          align-self: self-end;
      }

      #alignSelfLeft {
          align-self: left;
      }

      #alignSelfRight {
          align-self: right;
      }

      #alignSelfEndTrue {
          align-self: end true;
      }

      #alignSelfCenterTrue {
          align-self: center true;
      }

      #alignSelfSelfEndSafe {
          align-self: self-end safe;
      }

      #alignSelfSelfStartSafe {
          align-self: self-start safe;
      }

      #alignSelfRightSafe {
          align-self: right safe;
      }

      #alignSelfLeftTrue {
          align-self: left true;
      }
      </style>
      ''', treeSanitizer: new NullTreeSanitizer());
  document.head.append(style);

  document.body.setInnerHtml('''
      <div id="alignSelfBaseline"></div>
      <div id="alignSelfStretch"></div>
      <div id="alignSelfStart"></div>
      <div id="alignSelfEnd"></div>
      <div id="alignSelfCenter"></div>
      <div id="alignSelfSelfStart"></div>
      <div id="alignSelfSelfEnd"></div>
      <div id="alignSelfLeft"></div>
      <div id="alignSelfRight"></div>

      <div id="alignSelfEndTrue"></div>
      <div id="alignSelfCenterTrue"></div>
      <div id="alignSelfSelfEndSafe"></div>
      <div id="alignSelfSelfStartSafe"></div>
      <div id="alignSelfRightSafe"></div>
      <div id="alignSelfLeftTrue"></div>
      ''', treeSanitizer: new NullTreeSanitizer());

  getComputedStyle(elt, [unused]) => elt.getComputedStyle();

  debug("Test getting align-self set through CSS");
  var alignSelfBaseline = document.getElementById("alignSelfBaseline");
  shouldBe(getComputedStyle(alignSelfBaseline, '').getPropertyValue('align-self'), 'baseline');

  var alignSelfStretch = document.getElementById("alignSelfStretch");
  shouldBe(getComputedStyle(alignSelfStretch, '').getPropertyValue('align-self'), 'stretch');

  var alignSelfStart = document.getElementById("alignSelfStart");
  shouldBe(getComputedStyle(alignSelfStart, '').getPropertyValue('align-self'), 'start');

  var alignSelfEnd = document.getElementById("alignSelfEnd");
  shouldBe(getComputedStyle(alignSelfEnd, '').getPropertyValue('align-self'), 'end');

  var alignSelfCenter = document.getElementById("alignSelfCenter");
  shouldBe(getComputedStyle(alignSelfCenter, '').getPropertyValue('align-self'), 'center');

  var alignSelfSelfEnd = document.getElementById("alignSelfSelfEnd");
  shouldBe(getComputedStyle(alignSelfSelfEnd, '').getPropertyValue('align-self'), 'self-end');

  var alignSelfSelfStart = document.getElementById("alignSelfSelfStart");
  shouldBe(getComputedStyle(alignSelfSelfStart, '').getPropertyValue('align-self'), 'self-start');

  var alignSelfLeft = document.getElementById("alignSelfLeft");
  shouldBe(getComputedStyle(alignSelfLeft, '').getPropertyValue('align-self'), 'left');

  var alignSelfRight = document.getElementById("alignSelfRight");
  shouldBe(getComputedStyle(alignSelfRight, '').getPropertyValue('align-self'), 'right');

  var alignSelfEndTrue = document.getElementById("alignSelfEndTrue");
  shouldBe(getComputedStyle(alignSelfEndTrue, '').getPropertyValue('align-self'), 'end true');

  var alignSelfCenterTrue = document.getElementById("alignSelfCenterTrue");
  shouldBe(getComputedStyle(alignSelfCenterTrue, '').getPropertyValue('align-self'), 'center true');

  var alignSelfSelfEndSafe = document.getElementById("alignSelfSelfEndSafe");
  shouldBe(getComputedStyle(alignSelfSelfEndSafe, '').getPropertyValue('align-self'), 'self-end safe');

  var alignSelfSelfStartSafe = document.getElementById("alignSelfSelfStartSafe");
  shouldBe(getComputedStyle(alignSelfSelfStartSafe, '').getPropertyValue('align-self'), 'self-start safe');

  var alignSelfRightSafe = document.getElementById("alignSelfRightSafe");
  shouldBe(getComputedStyle(alignSelfRightSafe, '').getPropertyValue('align-self'), 'right safe');

  var alignSelfLeftTrue = document.getElementById("alignSelfLeftTrue");
  shouldBe(getComputedStyle(alignSelfLeftTrue, '').getPropertyValue('align-self'), 'left true');

  debug("Test initial value of align-self through JS");
  var element = document.createElement("div");
  document.body.append(element);
  // align-self: auto ends up returning the default value of align-items which is 'stretch'.
  shouldBe(getComputedStyle(element, '').getPropertyValue('align-self'), 'stretch');

  debug("Test getting and setting align-self through JS");
  element = document.createElement("div");
  document.body.append(element);
  element.style.alignSelf = "center";
  shouldBe(getComputedStyle(element, '').getPropertyValue('align-self'), 'center');

  element = document.createElement("div");
  document.body.append(element);
  element.style.alignSelf = "true start";
  shouldBe(getComputedStyle(element, '').getPropertyValue('align-self'), 'start true');

  element.style.alignSelf = "auto";
  // See explanation for the initial value as to why this is correct.
  shouldBe(getComputedStyle(element, '').getPropertyValue('align-self'), 'stretch');

  debug("Test bad combinaisons of align-self");
  element = document.createElement("div");
  document.body.append(element);
  element.style.alignSelf = "true auto";
  shouldBe(getComputedStyle(element, '').getPropertyValue('align-self'), 'stretch');

  element.style.alignSelf = "auto safe";
  shouldBe(getComputedStyle(element, '').getPropertyValue('align-self'), 'stretch');

  element.style.alignSelf = "auto left";
  shouldBe(getComputedStyle(element, '').getPropertyValue('align-self'), 'stretch');

  element.style.alignSelf = "baseline safe";
  shouldBe(getComputedStyle(element, '').getPropertyValue('align-self'), 'stretch');

  element.style.alignSelf = "baseline center";
  shouldBe(getComputedStyle(element, '').getPropertyValue('align-self'), 'stretch');

  element.style.alignSelf = "stretch true";
  shouldBe(getComputedStyle(element, '').getPropertyValue('align-self'), 'stretch');

  element.style.alignSelf = "stretch right";
  shouldBe(getComputedStyle(element, '').getPropertyValue('align-self'), 'stretch');

  element.style.alignSelf = "true true";
  shouldBe(getComputedStyle(element, '').getPropertyValue('align-self'), 'stretch');

  element.style.alignSelf = "true safe";
  shouldBe(getComputedStyle(element, '').getPropertyValue('align-self'), 'stretch');

  element.style.alignSelf = "center start";
  shouldBe(getComputedStyle(element, '').getPropertyValue('align-self'), 'stretch');

  element.style.alignSelf = "stretch true";
  shouldBe(getComputedStyle(element, '').getPropertyValue('align-self'), 'stretch');

  element.style.alignSelf = "safe stretch";
  shouldBe(getComputedStyle(element, '').getPropertyValue('align-self'), 'stretch');

  element.style.alignSelf = "baseline safe";
  shouldBe(getComputedStyle(element, '').getPropertyValue('align-self'), 'stretch');

  element.style.alignSelf = "true baseline";
  shouldBe(getComputedStyle(element, '').getPropertyValue('align-self'), 'stretch');

  element.style.alignSelf = "true safe";
  shouldBe(getComputedStyle(element, '').getPropertyValue('align-self'), 'stretch');

  element.style.alignSelf = "true safe left";
  shouldBe(getComputedStyle(element, '').getPropertyValue('align-self'), 'stretch');

  element.style.alignSelf = "true left safe";
  shouldBe(getComputedStyle(element, '').getPropertyValue('align-self'), 'stretch');

  element.style.alignSelf = "left safe true safe";
  shouldBe(getComputedStyle(element, '').getPropertyValue('align-self'), 'stretch');

  debug("Test the value 'initial'");
  element.style.alignSelf = "center";
  shouldBe(getComputedStyle(element, '').getPropertyValue('align-self'), 'center');
  element.style.alignSelf = "initial";
  shouldBe(getComputedStyle(element, '').getPropertyValue('align-self'), 'stretch');

  debug("Test the value 'inherit'");
  var parentElement = document.createElement("div");
  document.body.append(parentElement);
  parentElement.style.alignSelf = "end";
  shouldBe(getComputedStyle(parentElement, '').getPropertyValue('align-self'), 'end');

  element = document.createElement("div");
  parentElement.append(element);
  element.style.alignSelf = "inherit";
  shouldBe(getComputedStyle(element, '').getPropertyValue('align-self'), 'end');
}