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

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

#justifyItemsLastBaseline {
    justify-items: last-baseline;
}

#justifyItemsStretch {
    justify-items: stretch;
}

#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;
}

#justifyItemsEndUnsafe {
    justify-items: end unsafe;
}

#justifyItemsCenterUnsafe {
    justify-items: center unsafe;
}

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

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

#justifyItemsRightSafe {
    justify-items: right safe;
}

#justifyItemsLeftUnsafe {
    justify-items: left unsafe;
}

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

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

#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>
<script src="../../resources/js-test.js"></script>
</head>
<body>
<div id="justifyItemsBaseline"></div>
<div id="justifyItemsLastBaseline"></div>
<div id="justifyItemsStretch"></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="justifyItemsEndUnsafe"></div>
<div id="justifyItemsCenterUnsafe"></div>
<div id="justifyItemsSelfEndSafe"></div>
<div id="justifyItemsSelfStartSafe"></div>
<div id="justifyItemsRightSafe"></div>
<div id="justifyItemsLeftUnsafe"></div>
<div id="justifyItemsFlexStartUnsafe"></div>
<div id="justifyItemsFlexEndSafe"></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/alignment-parsing-utils.js"></script>
<script>
description('Test that setting and getting justify-items works as expected');

debug("Test getting justify-items set through CSS");
var justifyItemsBaseline = document.getElementById("justifyItemsBaseline");
shouldBe("getComputedStyle(justifyItemsBaseline, '').getPropertyValue('justify-items')", "'baseline'");

var justifyItemsLastBaseline = document.getElementById("justifyItemsLastBaseline");
shouldBe("getComputedStyle(justifyItemsLastBaseline, '').getPropertyValue('justify-items')", "'last-baseline'");

var justifyItemsStretch = document.getElementById("justifyItemsStretch");
shouldBe("getComputedStyle(justifyItemsStretch, '').getPropertyValue('justify-items')", "'stretch'");

var justifyItemsStart = document.getElementById("justifyItemsStart");
shouldBe("getComputedStyle(justifyItemsStart, '').getPropertyValue('justify-items')", "'start'");

var justifyItemsEnd = document.getElementById("justifyItemsEnd");
shouldBe("getComputedStyle(justifyItemsEnd, '').getPropertyValue('justify-items')", "'end'");

var justifyItemsCenter = document.getElementById("justifyItemsCenter");
shouldBe("getComputedStyle(justifyItemsCenter, '').getPropertyValue('justify-items')", "'center'");

var justifyItemsSelfEnd = document.getElementById("justifyItemsSelfEnd");
shouldBe("getComputedStyle(justifyItemsSelfEnd, '').getPropertyValue('justify-items')", "'self-end'");

var justifyItemsSelfStart = document.getElementById("justifyItemsSelfStart");
shouldBe("getComputedStyle(justifyItemsSelfStart, '').getPropertyValue('justify-items')", "'self-start'");

var justifyItemsLeft = document.getElementById("justifyItemsLeft");
shouldBe("getComputedStyle(justifyItemsLeft, '').getPropertyValue('justify-items')", "'left'");

var justifyItemsRight = document.getElementById("justifyItemsRight");
shouldBe("getComputedStyle(justifyItemsRight, '').getPropertyValue('justify-items')", "'right'");

var justifyItemsFlexStart = document.getElementById("justifyItemsFlexStart");
shouldBe("getComputedStyle(justifyItemsFlexStart, '').getPropertyValue('justify-items')", "'flex-start'");

var justifyItemsFlexEnd = document.getElementById("justifyItemsFlexEnd");
shouldBe("getComputedStyle(justifyItemsFlexEnd, '').getPropertyValue('justify-items')", "'flex-end'");

var justifyItemsEndUnsafe = document.getElementById("justifyItemsEndUnsafe");
shouldBe("getComputedStyle(justifyItemsEndUnsafe, '').getPropertyValue('justify-items')", "'end unsafe'");

var justifyItemsCenterUnsafe = document.getElementById("justifyItemsCenterUnsafe");
shouldBe("getComputedStyle(justifyItemsCenterUnsafe, '').getPropertyValue('justify-items')", "'center unsafe'");

var justifyItemsSelfEndSafe = document.getElementById("justifyItemsSelfEndSafe");
shouldBe("getComputedStyle(justifyItemsSelfEndSafe, '').getPropertyValue('justify-items')", "'self-end safe'");

var justifyItemsSelfStartSafe = document.getElementById("justifyItemsSelfStartSafe");
shouldBe("getComputedStyle(justifyItemsSelfStartSafe, '').getPropertyValue('justify-items')", "'self-start safe'");

var justifyItemsRightSafe = document.getElementById("justifyItemsRightSafe");
shouldBe("getComputedStyle(justifyItemsRightSafe, '').getPropertyValue('justify-items')", "'right safe'");

var justifyItemsLeftUnsafe = document.getElementById("justifyItemsLeftUnsafe");
shouldBe("getComputedStyle(justifyItemsLeftUnsafe, '').getPropertyValue('justify-items')", "'left unsafe'");

var justifyItemsFlexStartUnsafe = document.getElementById("justifyItemsFlexStartUnsafe");
shouldBe("getComputedStyle(justifyItemsFlexStartUnsafe, '').getPropertyValue('justify-items')", "'flex-start unsafe'");

var justifyItemsFlexEndSafe = document.getElementById("justifyItemsFlexEndSafe");
shouldBe("getComputedStyle(justifyItemsFlexEndSafe, '').getPropertyValue('justify-items')", "'flex-end safe'");

var justifyItemsLegacyLeft = document.getElementById("justifyItemsLegacyLeft");
shouldBe("getComputedStyle(justifyItemsLegacyLeft, '').getPropertyValue('justify-items')", "'legacy left'");

var justifyItemsLegacyCenter = document.getElementById("justifyItemsLegacyCenter");
shouldBe("getComputedStyle(justifyItemsLegacyCenter, '').getPropertyValue('justify-items')", "'legacy center'");

var justifyItemsLegacyRight = document.getElementById("justifyItemsLegacyRight");
shouldBe("getComputedStyle(justifyItemsLegacyRight, '').getPropertyValue('justify-items')", "'legacy right'");

var justifyItemsLeftLegacy = document.getElementById("justifyItemsLeftLegacy");
shouldBe("getComputedStyle(justifyItemsLeftLegacy, '').getPropertyValue('justify-items')", "'legacy left'");

var justifyItemsCenterLegacy = document.getElementById("justifyItemsCenterLegacy");
shouldBe("getComputedStyle(justifyItemsCenterLegacy, '').getPropertyValue('justify-items')", "'legacy center'");

var justifyItemsRightLegacy = document.getElementById("justifyItemsRightLegacy");
shouldBe("getComputedStyle(justifyItemsRightLegacy, '').getPropertyValue('justify-items')", "'legacy right'");

debug("");
debug("Test initial value of justify-items through JS");
element = document.createElement("div");
document.body.appendChild(element);
shouldBe("getComputedStyle(element, '').getPropertyValue('justify-items')", "'normal'");

debug("");
debug("Test getting and setting justify-items through JS");
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",  "start unsafe", "start unsafe");

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

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 = "auto";
checkValues(element, "justifyItems", "justify-items",  "auto", "normal");

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

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

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

debug("");
debug("Test bad combinations of justify-items");
element = document.createElement("div");
document.body.appendChild(element);

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",  "baseline safe");
checkBadValues(element, "justifyItems", "justify-items",  "baseline center");
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",  "legacy");
checkBadValues(element, "justifyItems", "justify-items",  "legacy left right");

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

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

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

debug("");
debug("Test the value 'inherit'");
checkInheritValues("justifyItems", "justify-items", "end");
checkInheritValues("justifyItems", "justify-items", "left safe");
checkInheritValues("justifyItems", "justify-items", "legacy center");

debug("");
debug("Test the value 'legacy'");
checkLegacyValues("justifyItems", "justify-items", "legacy left");
checkLegacyValues("justifyItems", "justify-items", "legacy center");
checkLegacyValues("justifyItems", "justify-items", "legacy right");

</script>
</body>
</html>