<!DOCTYPE html>
<html>
<head>
<style>
#placeItemsNormal {
  place-items: normal;
}
#placeItemsBaseline {
  place-items: baseline;
}
#placeItemsFirstBaseline {
  place-items: first baseline;
}
#placeItemsLastBaseline {
  place-items: last baseline;
}
#placeItemsStart {
  place-items: start;
}
#placeItemsFlexStart {
  place-items: flex-start;
}
#placeItemsEnd {
  place-items: end;
}
#placeItemsSelfStart {
  place-items: self-start;
}
#placeItemsStretch {
  place-items: stretch;
}
#placeItemsStartEnd {
  place-items: start end;
}
#placeItemsStartSelfEnd {
  place-items: start self-end;
}
#placeItemsStartBaseline {
  place-items: start baseline;
}

<!-- Invalid CSS cases -->
#placeItemsEmpty {
  place-items:;
}
#placeItemsAuto {
  place-items: auto;
}
#placeItemsCenterAuto {
  place-items: center auto;
}
#placeItemsNone {
  place-items: none;
}
#placeItemsSafe {
  place-items: safe;
}
#placeItemsStartSafe {
  place-items: start safe;
}
#placeItemsBaselineSafe {
  place-items: baseline safe;
}
#placeItemsStartEndLeft {
  place-items: start end left;
}
</style>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="resources/alignment-parsing-utils-th.js"></script>
</head>
<body>
  <p>Test to verify that the new place-items alignment shorthand is parsed as expected and correctly sets the longhand values.</p>
  <div id="log"></div>

  <div id="placeItemsNormal"></div>
  <div id="placeItemsBaseline"></div>
  <div id="placeItemsFirstBaseline"></div>
  <div id="placeItemsLastBaseline"></div>
  <div id="placeItemsStart"></div>
  <div id="placeItemsFlexStart"></div>
  <div id="placeItemsEnd"></div>
  <div id="placeItemsSelfStart"></div>
  <div id="placeItemsStretch"></div>
  <div id="placeItemsStartEnd"></div>
  <div id="placeItemsStartSelfEnd"></div>
  <div id="placeItemsStartBaseline"></div>

  <div id="placeItemsEmpty"></div>
  <div id="placeItemsAuto"></div>
  <div id="placeItemsCenterAuto"></div>
  <div id="placeItemsNone"></div>
  <div id="placeItemsSafe"></div>
  <div id="placeItemsStartSafe"></div>
  <div id="placeItemsBaselineSafe"></div>
  <div id="placeItemsStartEndLeft"></div>
<script>
function checkPlaceItemsValues(element, value, alignValue, justifyValue) {
  var res = value.split(" ");
  if (res.length < 2)
    res[1] = res[0];
  checkValues(element, "alignItems", "align-items", res[0], alignValue);
  checkValues(element, "justifyItems", "justify-items", res[1], justifyValue);
}

function checkPlaceItemsValuesJS(value, alignValue, justifyValue)
{
  element = document.createElement("div");
  document.body.appendChild(element);
  element.style.placeItems = value;
  checkValues(element, "placeItems", "place-items", value, alignValue + ' ' + justifyValue)
  checkPlaceItemsValues(element, value, alignValue, justifyValue)
}

function checkPlaceItemsValuesBadJS(value)
{
  element.style.placeItems = "";
  element.style.placeItems = value;
  checkPlaceItemsValues(element, "", "normal", "normal")
}

test(function() {
  checkValues(placeItemsNormal, "placeItems", "place-items", "", "normal");
  checkPlaceItemsValues(placeItemsNormal, "", "normal", "normal");
}, "Test getting the Computed Value of place-items's longhand properties when setting 'normal' value through CSS.");

test(function() {
  checkValues(placeItemsBaseline, "placeItems", "place-items", "", "baseline");
  checkPlaceItemsValues(placeItemsBaseline, "", "baseline", "baseline");
}, "Test getting the Computed Value of place-items's longhand properties when setting 'baseline' value through CSS.");

test(function() {
  checkValues(placeItemsFirstBaseline, "placeItems", "place-items", "", "baseline");
  checkPlaceItemsValues(placeItemsFirstBaseline, "", "baseline", "baseline");
}, "Test getting the Computed Value of place-items's longhand properties when setting 'first baseline' value through CSS.");

test(function() {
  checkValues(placeItemsLastBaseline, "placeItems", "place-items", "", "last baseline");
  checkPlaceItemsValues(placeItemsLastBaseline, "", "last baseline", "last baseline");
}, "Test getting the Computed Value of place-items's longhand properties when setting 'last baseline' value through CSS.");

test(function() {
  checkValues(placeItemsStart, "placeItems", "place-items", "", "start");
  checkPlaceItemsValues(placeItemsStart, "", "start", "start");
}, "Test getting the Computed Value of place-items's longhand properties when setting 'start' value through CSS.");

test(function() {
  checkValues(placeItemsFlexStart, "placeItems", "place-items", "", "flex-start");
  checkPlaceItemsValues(placeItemsFlexStart, "", "flex-start", "flex-start");
}, "Test getting the Computed Value of place-items's longhand properties when setting 'flex-start' value through CSS.");

test(function() {
  checkValues(placeItemsEnd, "placeItems", "place-items", "", "end");
  checkPlaceItemsValues(placeItemsEnd, "", "end", "end");
}, "Test getting the Computed Value of place-items's longhand properties when setting 'end' value through CSS.");

test(function() {
  checkValues(placeItemsSelfStart, "placeItems", "place-items", "", "self-start");
  checkPlaceItemsValues(placeItemsSelfStart, "", "self-start", "self-start");
}, "Test getting the Computed Value of place-items's longhand properties when setting 'self-start' value through CSS.");

test(function() {
  checkValues(placeItemsStretch, "placeItems", "place-items", "", "stretch");
  checkPlaceItemsValues(placeItemsStretch, "", "stretch", "stretch");
}, "Test getting the Computed Value of place-items's longhand properties when setting 'stretch' value through CSS.");

test(function() {
  checkValues(placeItemsStartEnd, "placeItems", "place-items", "", "start end");
  checkPlaceItemsValues(placeItemsStartEnd, "", "start", "end");
}, "Test getting the Computed Value of place-items's longhand properties when setting 'start end' value through CSS.");

test(function() {
  checkValues(placeItemsStartSelfEnd, "placeItems", "place-items", "", "start self-end");
  checkPlaceItemsValues(placeItemsStartSelfEnd, "", "start", "self-end");
}, "Test getting the Computed Value of place-items's longhand properties when setting 'start self-end' value through CSS.");

test(function() {
  checkValues(placeItemsStartBaseline, "placeItems", "place-items", "", "start baseline");
  checkPlaceItemsValues(placeItemsStartBaseline, "", "start", "baseline");
}, "Test getting the Computed Value of place-items's longhand properties when setting 'start baseline' value through CSS.");

test(function() {
  checkValues(placeItemsAuto, "placeItems", "place-items", "", "normal");
  checkPlaceItemsValues(placeItemsAuto, "", "normal", "normal");
}, "Test setting 'auto' as incorrect value through CSS.");

test(function() {
  checkValues(placeItemsCenterAuto, "placeItems", "place-items", "", "normal");
  checkPlaceItemsValues(placeItemsCenterAuto, "", "normal", "normal");
}, "Test setting 'center auto' as incorrect value through CSS.");

test(function() {
  checkValues(placeItemsNone, "placeItems", "place-items", "", "normal");
  checkPlaceItemsValues(placeItemsNone, "", "normal", "normal");
}, "Test setting 'none' as incorrect value through CSS.");

test(function() {
  checkValues(placeItemsSafe, "placeItems", "place-items", "", "normal");
  checkPlaceItemsValues(placeItemsSafe, "", "normal", "normal");
}, "Test setting 'safe' as incorrect value through CSS.");

test(function() {
  checkValues(placeItemsStartSafe, "placeItems", "place-items", "", "normal");
  checkPlaceItemsValues(placeItemsStartSafe, "", "normal", "normal");
}, "Test setting 'start safe' as incorrect value through CSS.");

test(function() {
  checkValues(placeItemsBaselineSafe, "placeItems", "place-items", "", "normal");
  checkPlaceItemsValues(placeItemsBaselineSafe, "", "normal", "normal");
}, "Test setting 'baseline safe' as incorrect value through CSS.");

test(function() {
  checkValues(placeItemsStartEndLeft, "placeItems", "place-items", "", "normal");
  checkPlaceItemsValues(placeItemsStartEndLeft, "", "normal", "normal");
}, "Test setting 'start end left' as incorrect value through CSS.");

test(function() {
  checkPlaceItemsValuesJS("center start", "center", "start");
  checkPlaceItemsValuesJS("self-start end", "self-start", "end");
  checkPlaceItemsValuesJS("normal end", "normal", "end");
}, "Test setting values through JS.");

test(function() {
  checkPlaceItemsValuesBadJS("auto");
  checkPlaceItemsValuesBadJS("auto normal");
  checkPlaceItemsValuesBadJS("center auto");
  checkPlaceItemsValuesBadJS("legacy");
  checkPlaceItemsValuesBadJS("left legacy");
  checkPlaceItemsValuesBadJS("space-between");
  checkPlaceItemsValuesBadJS("center safe");
  checkPlaceItemsValuesBadJS("center self-start center");
  checkPlaceItemsValuesBadJS("asrt", "normal");
  checkPlaceItemsValuesBadJS("auto", "normal");
  checkPlaceItemsValuesBadJS("10px", "normal");
  checkPlaceItemsValuesBadJS("stretch safe");
  checkPlaceItemsValuesBadJS("self-start start end");
  checkPlaceItemsValuesBadJS("");
}, "Test setting incorrect values through JS.");

test(function() {
  element = document.createElement("div");
  document.body.appendChild(element);
  checkValues(element, "placeItems", "place-items", "", "normal");
  element.style.placeItems = "center";
  checkPlaceItemsValues(element, "center", "center", "center");
  element.style.placeItems = "initial";
  checkValues(element, "placeItems", "place-items", "initial", "normal");
  checkPlaceItemsValues(element, "initial", "normal", "normal");
}, "Test the 'initial' value of the place-items shorthand and its longhand properties' Computed value");

test(function() {
  document.body.style.placeItems = "start";
  var anotherElement = document.createElement("div");
  document.body.appendChild(anotherElement);
  checkPlaceItemsValues(anotherElement, "", "normal", "normal");
  anotherElement.style.placeItems = "inherit";
  checkPlaceItemsValues(anotherElement, "inherit", "start", "start");
}, "Test the 'inherit' value of the place-items shorthand and its longhand properties' Computed value");
</script>
</body>
</html>