LayoutTests/fast/css/parse-justify-items.html

<!DOCTYPE html>
<style>
#justifyItemsBaseline {
    justify-items: baseline;
}

#justifyItemsFirstBaseline {
    justify-items: first baseline;
}

#justifyItemsLastBaseline {
    justify-items: last baseline;
}

#justifyItemsStretch {
    justify-items: stretch;
}

#justifyItemsNormal {
    justify-items: normal;
}

#justifyItemsStart {
    justify-items: start;
}

#justifyItemsEnd {
    justify-items: end;
}

#justifyItemsCenter {
    justify-items: center;
}

#justifyItemsSelfStart {
    justify-items: self-start;
}

#justifyItemsSelfEnd {
    justify-items: self-end;
}

#justifyItemsLeft {
    justify-items: left;
}

#justifyItemsRight {
    justify-items: right;
}

#justifyItemsFlexStart {
    justify-items: flex-start;
}

#justifyItemsFlexEnd {
    justify-items: flex-end;
}

#justifyItemsUnsafeEnd {
    justify-items: unsafe end ;
}

#justifyItemsUnsafeCenter {
    justify-items: unsafe center ;
}

#justifyItemsSafeSelfEnd {
    justify-items: safe self-end;
}

#justifyItemsSafeSelfStart {
    justify-items: safe self-start;
}

#justifyItemsSafeRight {
    justify-items: safe right;
}

#justifyItemsUnsafeLeft {
    justify-items: unsafe left;
}

#justifyItemsUnsafeFlexStart {
    justify-items: unsafe flex-start;
}

#justifyItemsSafeFlexEnd {
    justify-items: safe flex-end;
}

#justifyItemsLegacyLeft {
    justify-items: legacy left;
}

#justifyItemsLegacyCenter {
    justify-items: legacy center;
}

#justifyItemsLegacyRight {
    justify-items: legacy right;
}

#justifyItemsLeftLegacy {
    justify-items: left legacy;
}

#justifyItemsCenterLegacy {
    justify-items: center legacy;
}

#justifyItemsRightLegacy {
    justify-items: right legacy;
}
</style>
<p>Test that setting and getting justify-items works as expected</p>
<div id="justifyItemsBaseline"></div>
<div id="justifyItemsFirstBaseline"></div>
<div id="justifyItemsLastBaseline"></div>
<div id="justifyItemsStretch"></div>
<div id="justifyItemsNormal"></div>
<div id="justifyItemsStart"></div>
<div id="justifyItemsEnd"></div>
<div id="justifyItemsCenter"></div>
<div id="justifyItemsSelfStart"></div>
<div id="justifyItemsSelfEnd"></div>
<div id="justifyItemsLeft"></div>
<div id="justifyItemsRight"></div>
<div id="justifyItemsFlexStart"></div>
<div id="justifyItemsFlexEnd"></div>

<div id="justifyItemsUnsafeEnd"></div>
<div id="justifyItemsUnsafeCenter"></div>
<div id="justifyItemsSafeSelfEnd"></div>
<div id="justifyItemsSafeSelfStart"></div>
<div id="justifyItemsSafeRight"></div>
<div id="justifyItemsUnsafeLeft"></div>
<div id="justifyItemsUnsafeFlexStart"></div>
<div id="justifyItemsSafeFlexEnd"></div>
<div id="justifyItemsLegacyLeft"></div>
<div id="justifyItemsLegacyCenter"></div>
<div id="justifyItemsLegacyRight"></div>
<div id="justifyItemsLeftLegacy"></div>
<div id="justifyItemsCenterLegacy"></div>
<div id="justifyItemsRightLegacy"></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 justifyItemsBaseline = document.getElementById("justifyItemsBaseline");
    checkValues(justifyItemsBaseline, "justifyItems", "justify-items", "", "baseline");
    var justifyItemsFirstBaseline = document.getElementById("justifyItemsFirstBaseline");
    checkValues(justifyItemsFirstBaseline, "justifyItems", "justify-items", "", "baseline");
    var justifyItemsLastBaseline = document.getElementById("justifyItemsLastBaseline");
    checkValues(justifyItemsLastBaseline, "justifyItems", "justify-items", "", "last baseline");
    var justifyItemsStretch = document.getElementById("justifyItemsStretch");
    checkValues(justifyItemsStretch, "justifyItems", "justify-items", "", "stretch");
    var justifyItemsNormal = document.getElementById("justifyItemsNormal");
    checkValues(justifyItemsNormal, "justifyItems", "justify-items", "", "normal");
    var justifyItemsStart = document.getElementById("justifyItemsStart");
    checkValues(justifyItemsStart, "justifyItems", "justify-items", "", "start");
    var justifyItemsEnd = document.getElementById("justifyItemsEnd");
    checkValues(justifyItemsEnd, "justifyItems", "justify-items", "", "end");
    var justifyItemsCenter = document.getElementById("justifyItemsCenter");
    checkValues(justifyItemsCenter, "justifyItems", "justify-items", "", "center");
    var justifyItemsSelfEnd = document.getElementById("justifyItemsSelfEnd");
    checkValues(justifyItemsSelfEnd, "justifyItems", "justify-items", "", "self-end");
    var justifyItemsSelfStart = document.getElementById("justifyItemsSelfStart");
    checkValues(justifyItemsSelfStart, "justifyItems", "justify-items", "", "self-start");
    var justifyItemsLeft = document.getElementById("justifyItemsLeft");
    checkValues(justifyItemsLeft, "justifyItems", "justify-items", "", "left");
    var justifyItemsRight = document.getElementById("justifyItemsRight");
    checkValues(justifyItemsRight, "justifyItems", "justify-items", "", "right");
    var justifyItemsFlexStart = document.getElementById("justifyItemsFlexStart");
    checkValues(justifyItemsFlexStart, "justifyItems", "justify-items", "", "flex-start");
    var justifyItemsFlexEnd = document.getElementById("justifyItemsFlexEnd");
    checkValues(justifyItemsFlexEnd, "justifyItems", "justify-items", "", "flex-end");

    var justifyItemsUnsafeEnd = document.getElementById("justifyItemsUnsafeEnd");
    checkValues(justifyItemsUnsafeEnd, "justifyItems", "justify-items", "", "unsafe end");
    var justifyItemsUnsafeCenter = document.getElementById("justifyItemsUnsafeCenter");
    checkValues(justifyItemsUnsafeCenter, "justifyItems", "justify-items", "", "unsafe center");
    var justifyItemsSafeSelfEnd = document.getElementById("justifyItemsSafeSelfEnd");
    checkValues(justifyItemsSafeSelfEnd, "justifyItems", "justify-items", "", "safe self-end");
    var justifyItemsSafeSelfStart = document.getElementById("justifyItemsSafeSelfStart");
    checkValues(justifyItemsSafeSelfStart, "justifyItems", "justify-items", "", "safe self-start");
    var justifyItemsSafeRight = document.getElementById("justifyItemsSafeRight");
    checkValues(justifyItemsSafeRight, "justifyItems", "justify-items", "", "safe right");
    var justifyItemsUnsafeLeft = document.getElementById("justifyItemsUnsafeLeft");
    checkValues(justifyItemsUnsafeLeft, "justifyItems", "justify-items", "", "unsafe left");
    var justifyItemsUnsafeFlexStart = document.getElementById("justifyItemsUnsafeFlexStart");
    checkValues(justifyItemsUnsafeFlexStart, "justifyItems", "justify-items", "", "unsafe flex-start");
    var justifyItemsSafeFlexEnd = document.getElementById("justifyItemsSafeFlexEnd");
    checkValues(justifyItemsSafeFlexEnd, "justifyItems", "justify-items", "", "safe flex-end");
    var justifyItemsLegacyLeft = document.getElementById("justifyItemsLegacyLeft");
    checkValues(justifyItemsLegacyLeft, "justifyItems", "justify-items", "", "legacy left");
    var justifyItemsLegacyCenter = document.getElementById("justifyItemsLegacyCenter");
    checkValues(justifyItemsLegacyCenter, "justifyItems", "justify-items", "", "legacy center");
    var justifyItemsLegacyRight = document.getElementById("justifyItemsLegacyRight");
    checkValues(justifyItemsLegacyRight, "justifyItems", "justify-items", "", "legacy right");
    var justifyItemsLeftLegacy = document.getElementById("justifyItemsLeftLegacy");
    checkValues(justifyItemsLeftLegacy, "justifyItems", "justify-items", "", "legacy left");
    var justifyItemsCenterLegacy = document.getElementById("justifyItemsCenterLegacy");
    checkValues(justifyItemsCenterLegacy, "justifyItems", "justify-items", "", "legacy center");
    var justifyItemsRightLegacy = document.getElementById("justifyItemsRightLegacy");
    checkValues(justifyItemsRightLegacy, "justifyItems", "justify-items", "", "legacy right");
}, "Test getting justify-items set through CSS.");

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

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

    element.style.justifyItems = "unsafe start";
    checkValues(element, "justifyItems", "justify-items",  "unsafe start", "unsafe start");

    element.style.justifyItems = "safe flex-end";
    checkValues(element, "justifyItems", "justify-items",  "safe flex-end", "safe flex-end");

    element.style.justifyItems = "right legacy";
    checkValues(element, "justifyItems", "justify-items",  "legacy right", "legacy right");

    element.style.justifyItems = "center legacy";
    checkValues(element, "justifyItems", "justify-items",  "legacy center", "legacy center");

    element.style.justifyItems = "left legacy";
    checkValues(element, "justifyItems", "justify-items",  "legacy left", "legacy left");

    element.style.justifyItems = "right";
    checkValues(element, "justifyItems", "justify-items",  "right", "right");

    element.style.justifyItems = "center";
    checkValues(element, "justifyItems", "justify-items",  "center", "center");

    element.style.justifyItems = "self-start";
    checkValues(element, "justifyItems", "justify-items",  "self-start", "self-start");

    element.style.justifyItems = "normal";
    checkValues(element, "justifyItems", "justify-items",  "normal", "normal");

    element.style.justifyItems = "legacy";
    checkValues(element, "justifyItems", "justify-items",  "legacy", "normal");

    element.style.display = "flex";
    element.style.justifyItems = "legacy";
    checkValues(element, "justifyItems", "justify-items",  "legacy", "normal");

    element.style.display = "grid";
    element.style.justifyItems = "legacy";
    checkValues(element, "justifyItems", "justify-items",  "legacy", "normal");

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

test(function() {
    document.documentElement.style.justifyItems = "legacy";
    checkValues(document.documentElement, "justifyItems", "justify-items",  "legacy", "normal");
}, "Test 'legacy' value resolution for the root node");

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

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

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

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

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

test(function() {
    checkInheritValues("justifyItems", "justify-items", "end");
    checkInheritValues("justifyItems", "justify-items", "safe left");
    checkInheritValues("justifyItems", "justify-items", "unsafe center");
}, "Test the value 'inherit'");

test(function() {
    checkLegacyValues("justifyItems", "justify-items", "legacy left");
    checkLegacyValues("justifyItems", "justify-items", "legacy center");
    checkLegacyValues("justifyItems", "justify-items", "legacy right");
}, "Test the legacy alignment");
</script>