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

#alignItemsFirstBaseline {
    align-items: first baseline;
}

#alignItemsLastBaseline {
    align-items: last baseline;
}

#alignItemsStretch {
    align-items: stretch;
}

#alignItemsNormal {
    align-items: normal;
}

#alignItemsStart {
    align-items: start;
}

#alignItemsEnd {
    align-items: end;
}

#alignItemsCenter {
    align-items: center;
}

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

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

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

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

#alignItemsUnsafeEnd {
    align-items: unsafe end ;
}

#alignItemsUnsafeCenter {
    align-items: unsafe center ;
}

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

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

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

#alignItemsSafeFlexEnd {
    align-items: safe flex-end;
}
</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="alignItemsNormal"></div>
<div id="alignItemsStart"></div>
<div id="alignItemsEnd"></div>
<div id="alignItemsCenter"></div>
<div id="alignItemsSelfStart"></div>
<div id="alignItemsSelfEnd"></div>
<div id="alignItemsFlexStart"></div>
<div id="alignItemsFlexEnd"></div>

<div id="alignItemsUnsafeEnd"></div>
<div id="alignItemsUnsafeCenter"></div>
<div id="alignItemsSafeSelfEnd"></div>
<div id="alignItemsSafeSelfStart"></div>
<div id="alignItemsUnsafeFlexStart"></div>
<div id="alignItemsSafeFlexEnd"></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 alignItemsNormal = document.getElementById("alignItemsNormal");
    checkValues(alignItemsNormal, "alignItems", "align-items", "", "normal");
    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 alignItemsFlexStart = document.getElementById("alignItemsFlexStart");
    checkValues(alignItemsFlexStart, "alignItems", "align-items", "", "flex-start");
    var alignItemsFlexEnd = document.getElementById("alignItemsFlexEnd");
    checkValues(alignItemsFlexEnd, "alignItems", "align-items", "", "flex-end");

    var alignItemsUnsafeEnd = document.getElementById("alignItemsUnsafeEnd");
    checkValues(alignItemsUnsafeEnd, "alignItems", "align-items", "", "unsafe end");
    var alignItemsUnsafeCenter = document.getElementById("alignItemsUnsafeCenter");
    checkValues(alignItemsUnsafeCenter, "alignItems", "align-items", "", "unsafe center");
    var alignItemsSafeSelfEnd = document.getElementById("alignItemsSafeSelfEnd");
    checkValues(alignItemsSafeSelfEnd, "alignItems", "align-items", "", "safe self-end");
    var alignItemsSafeSelfStart = document.getElementById("alignItemsSafeSelfStart");
    checkValues(alignItemsSafeSelfStart, "alignItems", "align-items", "", "safe self-start");
    var alignItemsUnsafeFlexStart = document.getElementById("alignItemsUnsafeFlexStart");
    checkValues(alignItemsUnsafeFlexStart, "alignItems", "align-items", "", "unsafe flex-start");
    var alignItemsSafeFlexEnd = document.getElementById("alignItemsSafeFlexEnd");
    checkValues(alignItemsSafeFlexEnd, "alignItems", "align-items", "", "safe flex-end");
}, "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",  "unsafe start", "unsafe start");

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

    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");

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

    // 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",  "left");
    checkBadValues(element, "alignItems", "align-items",  "right");
    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",  "safe left");
    checkBadValues(element, "alignItems", "align-items",  "unsafe right");
    checkBadValues(element, "alignItems", "align-items",  "unsafe normal");
    checkBadValues(element, "alignItems", "align-items",  "normal stretch");
    checkBadValues(element, "alignItems", "align-items",  "baseline normal");
    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");
    checkBadValues(element, "alignItems", "align-items",  "start safe");
    checkBadValues(element, "alignItems", "align-items",  "end unsafe");
}, "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", "safe start", "normal");
}, "Test the value 'initial' for grid containers");

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

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