<!DOCTYPE html>
<style>
#alignItemsBaseline {
    align-items: baseline;
}

#alignItemsFirstBaseline {
    align-items: first baseline;
}

#alignItemsLastBaseline {
    align-items: last baseline;
}

#alignItemsStretch {
    align-items: stretch;
}

#alignItemsStart {
    align-items: start;
}

#alignItemsEnd {
    align-items: end;
}

#alignItemsCenter {
    align-items: center;
}

#alignItemsSelfStart {
    align-items: self-start;
}

#alignItemsSelfEnd {
    align-items: self-end;
}

#alignItemsLeft {
    align-items: left;
}

#alignItemsRight {
    align-items: right;
}

#alignItemsFlexStart {
    align-items: flex-start;
}

#alignItemsFlexEnd {
    align-items: flex-end;
}

#alignItemsEndUnsafe {
    align-items: end unsafe;
}

#alignItemsCenterUnsafe {
    align-items: center unsafe;
}

#alignItemsSelfEndSafe {
    align-items: self-end safe;
}

#alignItemsSelfStartSafe {
    align-items: self-start safe;
}

#alignItemsRightSafe {
    align-items: right safe;
}

#alignItemsLeftUnsafe {
    align-items: left unsafe;
}

#alignItemsFlexStartUnsafe {
    align-items: flex-start unsafe;
}

#alignItemsFlexEndSafe {
    align-items: flex-end safe;
}
</style>
<p>Test that setting and getting align-items works as expected</p>
<div id="alignItemsBaseline"></div>
<div id="alignItemsFirstBaseline"></div>
<div id="alignItemsLastBaseline"></div>
<div id="alignItemsStretch"></div>
<div id="alignItemsStart"></div>
<div id="alignItemsEnd"></div>
<div id="alignItemsCenter"></div>
<div id="alignItemsSelfStart"></div>
<div id="alignItemsSelfEnd"></div>
<div id="alignItemsLeft"></div>
<div id="alignItemsRight"></div>
<div id="alignItemsFlexStart"></div>
<div id="alignItemsFlexEnd"></div>

<div id="alignItemsEndUnsafe"></div>
<div id="alignItemsCenterUnsafe"></div>
<div id="alignItemsSelfEndSafe"></div>
<div id="alignItemsSelfStartSafe"></div>
<div id="alignItemsRightSafe"></div>
<div id="alignItemsLeftUnsafe"></div>
<div id="alignItemsFlexStartUnsafe"></div>
<div id="alignItemsFlexEndSafe"></div>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/alignment-parsing-utils-th.js"></script>
<script>
test(function() {
    var alignItemsBaseline = document.getElementById("alignItemsBaseline");
    checkValues(alignItemsBaseline, "alignItems", "align-items", "", "baseline");
    var alignItemsFirstBaseline = document.getElementById("alignItemsFirstBaseline");
    checkValues(alignItemsFirstBaseline, "alignItems", "align-items", "", "baseline");
    var alignItemsLastBaseline = document.getElementById("alignItemsLastBaseline");
    checkValues(alignItemsLastBaseline, "alignItems", "align-items", "", "last baseline");
    var alignItemsStretch = document.getElementById("alignItemsStretch");
    checkValues(alignItemsStretch, "alignItems", "align-items", "", "stretch");
    var alignItemsStart = document.getElementById("alignItemsStart");
    checkValues(alignItemsStart, "alignItems", "align-items", "", "start");
    var alignItemsEnd = document.getElementById("alignItemsEnd");
    checkValues(alignItemsEnd, "alignItems", "align-items", "", "end");
    var alignItemsCenter = document.getElementById("alignItemsCenter");
    checkValues(alignItemsCenter, "alignItems", "align-items", "", "center");
    var alignItemsSelfEnd = document.getElementById("alignItemsSelfEnd");
    checkValues(alignItemsSelfEnd, "alignItems", "align-items", "", "self-end");
    var alignItemsSelfStart = document.getElementById("alignItemsSelfStart");
    checkValues(alignItemsSelfStart, "alignItems", "align-items", "", "self-start");
    var alignItemsLeft = document.getElementById("alignItemsLeft");
    checkValues(alignItemsLeft, "alignItems", "align-items", "", "left");
    var alignItemsRight = document.getElementById("alignItemsRight");
    checkValues(alignItemsRight, "alignItems", "align-items", "", "right");
    var alignItemsFlexStart = document.getElementById("alignItemsFlexStart");
    checkValues(alignItemsFlexStart, "alignItems", "align-items", "", "flex-start");
    var alignItemsFlexEnd = document.getElementById("alignItemsFlexEnd");
    checkValues(alignItemsFlexEnd, "alignItems", "align-items", "", "flex-end");

    var alignItemsEndUnsafe = document.getElementById("alignItemsEndUnsafe");
    checkValues(alignItemsEndUnsafe, "alignItems", "align-items", "", "end unsafe");
    var alignItemsCenterUnsafe = document.getElementById("alignItemsCenterUnsafe");
    checkValues(alignItemsCenterUnsafe, "alignItems", "align-items", "", "center unsafe");
    var alignItemsSelfEndSafe = document.getElementById("alignItemsSelfEndSafe");
    checkValues(alignItemsSelfEndSafe, "alignItems", "align-items", "", "self-end safe");
    var alignItemsSelfStartSafe = document.getElementById("alignItemsSelfStartSafe");
    checkValues(alignItemsSelfStartSafe, "alignItems", "align-items", "", "self-start safe");
    var alignItemsRightSafe = document.getElementById("alignItemsRightSafe");
    checkValues(alignItemsRightSafe, "alignItems", "align-items", "", "right safe");
    var alignItemsLeftUnsafe = document.getElementById("alignItemsLeftUnsafe");
    checkValues(alignItemsLeftUnsafe, "alignItems", "align-items", "", "left unsafe");
    var alignItemsFlexStartUnsafe = document.getElementById("alignItemsFlexStartUnsafe");
    checkValues(alignItemsFlexStartUnsafe, "alignItems", "align-items", "", "flex-start unsafe");
    var alignItemsFlexEndSafe = document.getElementById("alignItemsFlexEndSafe");
    checkValues(alignItemsFlexEndSafe, "alignItems", "align-items", "", "flex-end safe");
}, "Test getting align-items set through CSS.");

test(function() {
    element = document.createElement("div");
    document.body.appendChild(element);
    checkValues(element, "alignItems", "align-items", "", "normal");
}, "Test initial value of align-items through JS");

test(function() {
    element = document.createElement("div");
    document.body.appendChild(element);
    element.style.alignItems = "center";
    checkValues(element, "alignItems", "align-items",  "center", "center");

    element.style.alignItems = "unsafe start";
    checkValues(element, "alignItems", "align-items",  "start unsafe", "start unsafe");

    element.style.alignItems = "flex-end safe";
    checkValues(element, "alignItems", "align-items",  "flex-end safe", "flex-end safe");

    element.style.alignItems = "right";
    checkValues(element, "alignItems", "align-items",  "right", "right");

    element.style.alignItems = "center";
    checkValues(element, "alignItems", "align-items",  "center", "center");

    element.style.alignItems = "self-start";
    checkValues(element, "alignItems", "align-items",  "self-start", "self-start");

    // The 'auto' value is not valid for the align-items property.
    element.style.alignItems = "";
    element.style.alignItems = "auto";
    checkValues(element, "alignItems", "align-items",  "", "normal");

    element.style.display = "flex";
    element.style.alignItems = "auto";
    checkValues(element, "alignItems", "align-items",  "", "normal");

    element.style.display = "grid";
    element.style.alignItems = "auto";
    checkValues(element, "alignItems", "align-items",  "", "normal");

    element.style.alignItems = "self-end";
    checkValues(element, "alignItems", "align-items",  "self-end", "self-end");
}, "Test getting and setting align-items through JS");

test(function() {
    element = document.createElement("div");
    document.body.appendChild(element);

    checkBadValues(element, "alignItems", "align-items",  "auto");
    checkBadValues(element, "alignItems", "align-items",  "unsafe auto");
    checkBadValues(element, "alignItems", "align-items",  "auto safe");
    checkBadValues(element, "alignItems", "align-items",  "auto left");
    checkBadValues(element, "alignItems", "align-items",  "baseline safe");
    checkBadValues(element, "alignItems", "align-items",  "baseline center");
    checkBadValues(element, "alignItems", "align-items",  "first baseline center");
    checkBadValues(element, "alignItems", "align-items",  "last baseline center");
    checkBadValues(element, "alignItems", "align-items",  "baseline last");
    checkBadValues(element, "alignItems", "align-items",  "baseline first");
    checkBadValues(element, "alignItems", "align-items",  "stretch unsafe");
    checkBadValues(element, "alignItems", "align-items",  "stretch right");
    checkBadValues(element, "alignItems", "align-items",  "unsafe unsafe");
    checkBadValues(element, "alignItems", "align-items",  "unsafe safe");
    checkBadValues(element, "alignItems", "align-items",  "center start");
    checkBadValues(element, "alignItems", "align-items",  "stretch unsafe");
    checkBadValues(element, "alignItems", "align-items",  "safe stretch");
    checkBadValues(element, "alignItems", "align-items",  "baseline safe");
    checkBadValues(element, "alignItems", "align-items",  "unsafe baseline");
    checkBadValues(element, "alignItems", "align-items",  "unsafe safe left");
    checkBadValues(element, "alignItems", "align-items",  "unsafe left safe");
    checkBadValues(element, "alignItems", "align-items",  "left safe unsafe safe");
    checkBadValues(element, "alignItems", "align-items",  "legacy start");
    checkBadValues(element, "alignItems", "align-items",  "legacy end");
    checkBadValues(element, "alignItems", "align-items",  "legacy right unsafe");
    checkBadValues(element, "alignItems", "align-items",  "legacy auto");
    checkBadValues(element, "alignItems", "align-items",  "legacy stretch");
    checkBadValues(element, "alignItems", "align-items",  "legacy");
    checkBadValues(element, "alignItems", "align-items",  "legacy left right");
}, "Test bad combinations of align-items");

test(function() {
    element.style.display = "";
    checkInitialValues(element, "alignItems", "align-items", "center", "normal");
}, "Test the value 'initial'");

test(function() {
    element.style.display = "grid";
    checkInitialValues(element, "alignItems", "align-items", "left safe", "normal");
}, "Test the value 'initial' for grid containers");

test(function() {
    element.style.display = "flex";
    checkInitialValues(element, "alignItems", "align-items", "right unsafe", "normal");
}, "Test the value 'initial' for flex containers");

test(function() {
    checkInheritValues("alignItems", "align-items", "end");
    checkInheritValues("alignItems", "align-items", "left safe");
    checkInheritValues("alignItems", "align-items", "center unsafe");
}, "Test the value 'inherit'");
</script>