298 lines
12 KiB
HTML
298 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<style>
|
|
#justifySelfBaseline {
|
|
justify-self: baseline;
|
|
}
|
|
|
|
#justifySelfFirstBaseline {
|
|
justify-self: first baseline;
|
|
}
|
|
|
|
#justifySelfLastBaseline {
|
|
justify-self: last baseline;
|
|
}
|
|
|
|
#justifySelfStretch {
|
|
justify-self: stretch;
|
|
}
|
|
|
|
#justifySelfNormal {
|
|
justify-self: normal;
|
|
}
|
|
|
|
#justifySelfStart {
|
|
justify-self: start;
|
|
}
|
|
|
|
#justifySelfEnd {
|
|
justify-self: end;
|
|
}
|
|
|
|
#justifySelfCenter {
|
|
justify-self: center;
|
|
}
|
|
|
|
#justifySelfSelfStart {
|
|
justify-self: self-start;
|
|
}
|
|
|
|
#justifySelfSelfEnd {
|
|
justify-self: self-end;
|
|
}
|
|
|
|
#justifySelfLeft {
|
|
justify-self: left;
|
|
}
|
|
|
|
#justifySelfRight {
|
|
justify-self: right;
|
|
}
|
|
|
|
#justifySelfFlexStart {
|
|
justify-self: flex-start;
|
|
}
|
|
|
|
#justifySelfFlexEnd {
|
|
justify-self: flex-end;
|
|
}
|
|
|
|
#justifySelfUnsafeEnd {
|
|
justify-self: unsafe end ;
|
|
}
|
|
|
|
#justifySelfUnsafeCenter {
|
|
justify-self: unsafe center ;
|
|
}
|
|
|
|
#justifySelfSafeSelfEnd {
|
|
justify-self: safe self-end;
|
|
}
|
|
|
|
#justifySelfSafeSelfStart {
|
|
justify-self: safe self-start;
|
|
}
|
|
|
|
#justifySelfSafeRight {
|
|
justify-self: safe right;
|
|
}
|
|
|
|
#justifySelfUnsafeLeft {
|
|
justify-self: unsafe left;
|
|
}
|
|
|
|
#justifySelfUnsafeFlexStart {
|
|
justify-self: unsafe flex-start;
|
|
}
|
|
|
|
#justifySelfSafeFlexEnd {
|
|
justify-self: safe flex-end;
|
|
}
|
|
</style>
|
|
<p>Test that setting and getting justify-self works as expected</p>
|
|
<div id="justifySelfBaseline"></div>
|
|
<div id="justifySelfFirstBaseline"></div>
|
|
<div id="justifySelfLastBaseline"></div>
|
|
<div id="justifySelfStretch"></div>
|
|
<div id="justifySelfNormal"></div>
|
|
<div id="justifySelfStart"></div>
|
|
<div id="justifySelfEnd"></div>
|
|
<div id="justifySelfCenter"></div>
|
|
<div id="justifySelfSelfStart"></div>
|
|
<div id="justifySelfSelfEnd"></div>
|
|
<div id="justifySelfLeft"></div>
|
|
<div id="justifySelfRight"></div>
|
|
<div id="justifySelfFlexStart"></div>
|
|
<div id="justifySelfFlexEnd"></div>
|
|
|
|
<div id="justifySelfUnsafeEnd"></div>
|
|
<div id="justifySelfUnsafeCenter"></div>
|
|
<div id="justifySelfSafeSelfEnd"></div>
|
|
<div id="justifySelfSafeSelfStart"></div>
|
|
<div id="justifySelfSafeRight"></div>
|
|
<div id="justifySelfUnsafeLeft"></div>
|
|
<div id="justifySelfUnsafeFlexStart"></div>
|
|
<div id="justifySelfSafeFlexEnd"></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 justifySelfBaseline = document.getElementById("justifySelfBaseline");
|
|
checkValues(justifySelfBaseline, "justifySelf", "justify-self", "", "baseline");
|
|
var justifySelfFirstBaseline = document.getElementById("justifySelfFirstBaseline");
|
|
checkValues(justifySelfFirstBaseline, "justifySelf", "justify-self", "", "baseline");
|
|
var justifySelfLastBaseline = document.getElementById("justifySelfLastBaseline");
|
|
checkValues(justifySelfLastBaseline, "justifySelf", "justify-self", "", "last baseline");
|
|
var justifySelfStretch = document.getElementById("justifySelfStretch");
|
|
checkValues(justifySelfStretch, "justifySelf", "justify-self", "", "stretch");
|
|
var justifySelfNormal = document.getElementById("justifySelfNormal");
|
|
checkValues(justifySelfNormal, "justifySelf", "justify-self", "", "normal");
|
|
var justifySelfStart = document.getElementById("justifySelfStart");
|
|
checkValues(justifySelfStart, "justifySelf", "justify-self", "", "start");
|
|
var justifySelfEnd = document.getElementById("justifySelfEnd");
|
|
checkValues(justifySelfEnd, "justifySelf", "justify-self", "", "end");
|
|
var justifySelfCenter = document.getElementById("justifySelfCenter");
|
|
checkValues(justifySelfCenter, "justifySelf", "justify-self", "", "center");
|
|
var justifySelfSelfEnd = document.getElementById("justifySelfSelfEnd");
|
|
checkValues(justifySelfSelfEnd, "justifySelf", "justify-self", "", "self-end");
|
|
var justifySelfSelfStart = document.getElementById("justifySelfSelfStart");
|
|
checkValues(justifySelfSelfStart, "justifySelf", "justify-self", "", "self-start");
|
|
var justifySelfLeft = document.getElementById("justifySelfLeft");
|
|
checkValues(justifySelfLeft, "justifySelf", "justify-self", "", "left");
|
|
var justifySelfRight = document.getElementById("justifySelfRight");
|
|
checkValues(justifySelfRight, "justifySelf", "justify-self", "", "right");
|
|
var justifySelfFlexStart = document.getElementById("justifySelfFlexStart");
|
|
checkValues(justifySelfFlexStart, "justifySelf", "justify-self", "", "flex-start");
|
|
var justifySelfFlexEnd = document.getElementById("justifySelfFlexEnd");
|
|
checkValues(justifySelfFlexEnd, "justifySelf", "justify-self", "", "flex-end");
|
|
|
|
var justifySelfUnsafeEnd = document.getElementById("justifySelfUnsafeEnd");
|
|
checkValues(justifySelfUnsafeEnd, "justifySelf", "justify-self", "", "unsafe end");
|
|
var justifySelfUnsafeCenter = document.getElementById("justifySelfUnsafeCenter");
|
|
checkValues(justifySelfUnsafeCenter, "justifySelf", "justify-self", "", "unsafe center");
|
|
var justifySelfSafeSelfEnd = document.getElementById("justifySelfSafeSelfEnd");
|
|
checkValues(justifySelfSafeSelfEnd, "justifySelf", "justify-self", "", "safe self-end");
|
|
var justifySelfSafeSelfStart = document.getElementById("justifySelfSafeSelfStart");
|
|
checkValues(justifySelfSafeSelfStart, "justifySelf", "justify-self", "", "safe self-start");
|
|
var justifySelfSafeRight = document.getElementById("justifySelfSafeRight");
|
|
checkValues(justifySelfSafeRight, "justifySelf", "justify-self", "", "safe right");
|
|
var justifySelfUnsafeLeft = document.getElementById("justifySelfUnsafeLeft");
|
|
checkValues(justifySelfUnsafeLeft, "justifySelf", "justify-self", "", "unsafe left");
|
|
var justifySelfUnsafeFlexStart = document.getElementById("justifySelfUnsafeFlexStart");
|
|
checkValues(justifySelfUnsafeFlexStart, "justifySelf", "justify-self", "", "unsafe flex-start");
|
|
var justifySelfSafeFlexEnd = document.getElementById("justifySelfSafeFlexEnd");
|
|
checkValues(justifySelfSafeFlexEnd, "justifySelf", "justify-self", "", "safe flex-end");
|
|
}, "Test getting justify-self set through CSS.");
|
|
|
|
test(function() {
|
|
element = document.createElement("div");
|
|
document.body.appendChild(element);
|
|
checkValues(element, "justifySelf", "justify-self", "", "auto");
|
|
}, "Test initial value of justify-self through JS");
|
|
|
|
test(function() {
|
|
container = document.createElement("div");
|
|
element = document.createElement("div");
|
|
container.appendChild(element);
|
|
document.body.appendChild(container);
|
|
element.style.justifySelf = "center";
|
|
checkValues(element, "justifySelf", "justify-self", "center", "center");
|
|
|
|
element.style.justifySelf = "unsafe start";
|
|
checkValues(element, "justifySelf", "justify-self", "unsafe start", "unsafe start");
|
|
|
|
element.style.justifySelf = "safe flex-end";
|
|
checkValues(element, "justifySelf", "justify-self", "safe flex-end", "safe flex-end");
|
|
|
|
element.style.justifySelf = "right";
|
|
checkValues(element, "justifySelf", "justify-self", "right", "right");
|
|
|
|
element.style.justifySelf = "center";
|
|
checkValues(element, "justifySelf", "justify-self", "center", "center");
|
|
|
|
element.style.justifySelf = "self-start";
|
|
checkValues(element, "justifySelf", "justify-self", "self-start", "self-start");
|
|
|
|
element.style.justifySelf = "normal";
|
|
checkValues(element, "justifySelf", "justify-self", "normal", "normal");
|
|
|
|
element.style.justifySelf = "auto";
|
|
checkValues(element, "justifySelf", "justify-self", "auto", "auto");
|
|
|
|
container.style.display = "flex";
|
|
element.style.justifySelf = "auto";
|
|
checkValues(element, "justifySelf", "justify-self", "auto", "auto");
|
|
|
|
container.style.display = "grid";
|
|
element.style.justifySelf = "auto";
|
|
checkValues(element, "justifySelf", "justify-self", "auto", "auto");
|
|
|
|
element.style.justifySelf = "self-end";
|
|
checkValues(element, "justifySelf", "justify-self", "self-end", "self-end");
|
|
}, "Test getting and setting justify-self through JS");
|
|
|
|
test(function() {
|
|
document.documentElement.style.justifySelf = "auto";
|
|
checkValues(document.documentElement, "justifySelf", "justify-self", "auto", "auto");
|
|
}, "Test 'auto' value resolution for the root node");
|
|
|
|
test(function() {
|
|
container = document.createElement("div");
|
|
element = document.createElement("div");
|
|
container.appendChild(element);
|
|
document.body.appendChild(container);
|
|
|
|
checkBadValues(element, "justifySelf", "justify-self", "auto safe");
|
|
checkBadValues(element, "justifySelf", "justify-self", "auto left");
|
|
checkBadValues(element, "justifySelf", "justify-self", "normal unsafe");
|
|
checkBadValues(element, "justifySelf", "justify-self", "normal stretch");
|
|
checkBadValues(element, "justifySelf", "justify-self", "baseline normal");
|
|
checkBadValues(element, "justifySelf", "justify-self", "baseline safe");
|
|
checkBadValues(element, "justifySelf", "justify-self", "baseline center");
|
|
checkBadValues(element, "justifySelf", "justify-self", "first baseline center");
|
|
checkBadValues(element, "justifySelf", "justify-self", "last baseline center");
|
|
checkBadValues(element, "justifySelf", "justify-self", "baseline last");
|
|
checkBadValues(element, "justifySelf", "justify-self", "baseline first");
|
|
checkBadValues(element, "justifySelf", "justify-self", "stretch unsafe");
|
|
checkBadValues(element, "justifySelf", "justify-self", "stretch right");
|
|
checkBadValues(element, "justifySelf", "justify-self", "unsafe unsafe");
|
|
checkBadValues(element, "justifySelf", "justify-self", "unsafe safe");
|
|
checkBadValues(element, "justifySelf", "justify-self", "center start");
|
|
checkBadValues(element, "justifySelf", "justify-self", "stretch unsafe");
|
|
checkBadValues(element, "justifySelf", "justify-self", "safe stretch");
|
|
checkBadValues(element, "justifySelf", "justify-self", "baseline safe");
|
|
checkBadValues(element, "justifySelf", "justify-self", "unsafe baseline");
|
|
checkBadValues(element, "justifySelf", "justify-self", "unsafe safe left");
|
|
checkBadValues(element, "justifySelf", "justify-self", "unsafe left safe");
|
|
checkBadValues(element, "justifySelf", "justify-self", "left safe unsafe safe");
|
|
checkBadValues(element, "justifySelf", "justify-self", "legacy start");
|
|
checkBadValues(element, "justifySelf", "justify-self", "legacy end");
|
|
checkBadValues(element, "justifySelf", "justify-self", "legacy right unsafe");
|
|
checkBadValues(element, "justifySelf", "justify-self", "legacy auto");
|
|
checkBadValues(element, "justifySelf", "justify-self", "legacy stretch");
|
|
checkBadValues(element, "justifySelf", "justify-self", "legacy");
|
|
checkBadValues(element, "justifySelf", "justify-self", "legacy left right");
|
|
checkBadValues(element, "justifySelf", "justify-self", "start safe");
|
|
checkBadValues(element, "justifySelf", "justify-self", "end unsafe");
|
|
}, "Test bad combinations of justify-self");
|
|
|
|
test(function() {
|
|
container.style.display = "";
|
|
checkInitialValues(element, "justifySelf", "justify-self", "center", "auto");
|
|
}, "Test the value 'initial'");
|
|
|
|
test(function() {
|
|
container.style.display = "grid";
|
|
checkInitialValues(element, "justifySelf", "justify-self", "safe left", "auto");
|
|
}, "Test the value 'initial' for grid containers");
|
|
|
|
test(function() {
|
|
container.style.display = "flex";
|
|
checkInitialValues(element, "justifySelf", "justify-self", "unsafe right", "auto");
|
|
}, "Test the value 'initial' for flex containers");
|
|
|
|
test(function() {
|
|
container.style.display = "";
|
|
element.style.position = "absolute";
|
|
checkInitialValues(element, "justifySelf", "justify-self", "left", "auto");
|
|
}, "Test the value 'initial' for positioned elements");
|
|
|
|
test(function() {
|
|
container.style.display = "grid";
|
|
element.style.position = "absolute";
|
|
checkInitialValues(element, "justifySelf", "justify-self", "right", "auto");
|
|
}, "Test the value 'initial' for positioned elements in grid containers");
|
|
|
|
test(function() {
|
|
container.style.display = "flex";
|
|
element.style.position = "absolute";
|
|
checkInitialValues(element, "justifySelf", "justify-self", "end", "auto");
|
|
}, "Test the value 'initial' for positioned elements in grid containers 2");
|
|
|
|
test(function() {
|
|
checkInheritValues("justifySelf", "justify-self", "end");
|
|
checkInheritValues("justifySelf", "justify-self", "safe left");
|
|
checkInheritValues("justifySelf", "justify-self", "unsafe center");
|
|
}, "Test the value 'inherit'");
|
|
</script>
|