335 lines
14 KiB
HTML
335 lines
14 KiB
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>
|