blob: 476f5f471cbdd6c0c5738b2fa9294af0b10c3944 [file] [log] [blame]
<!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>