270 lines
11 KiB
HTML
270 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<style>
|
|
#alignSelfBaseline {
|
|
align-self: baseline;
|
|
}
|
|
|
|
#alignSelfFirstBaseline {
|
|
align-self: first baseline;
|
|
}
|
|
|
|
#alignSelfLastBaseline {
|
|
align-self: last baseline;
|
|
}
|
|
|
|
#alignSelfStretch {
|
|
align-self: stretch;
|
|
}
|
|
|
|
#alignSelfNormal {
|
|
align-self: normal;
|
|
}
|
|
|
|
#alignSelfStart {
|
|
align-self: start;
|
|
}
|
|
|
|
#alignSelfEnd {
|
|
align-self: end;
|
|
}
|
|
|
|
#alignSelfCenter {
|
|
align-self: center;
|
|
}
|
|
|
|
#alignSelfSelfStart {
|
|
align-self: self-start;
|
|
}
|
|
|
|
#alignSelfSelfEnd {
|
|
align-self: self-end;
|
|
}
|
|
|
|
#alignSelfFlexStart {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
#alignSelfFlexEnd {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
#alignSelfUnsafeEnd {
|
|
align-self: unsafe end ;
|
|
}
|
|
|
|
#alignSelfUnsafeCenter {
|
|
align-self: unsafe center ;
|
|
}
|
|
|
|
#alignSelfSafeSelfEnd {
|
|
align-self: safe self-end;
|
|
}
|
|
|
|
#alignSelfSafeSelfStart {
|
|
align-self: safe self-start;
|
|
}
|
|
|
|
#alignSelfUnsafeFlexStart {
|
|
align-self: unsafe flex-start;
|
|
}
|
|
|
|
#alignSelfSafeFlexEnd {
|
|
align-self: safe flex-end;
|
|
}
|
|
</style>
|
|
<p>Test that setting and getting align-self works as expected</p>
|
|
<div id="alignSelfBaseline"></div>
|
|
<div id="alignSelfFirstBaseline"></div>
|
|
<div id="alignSelfLastBaseline"></div>
|
|
<div id="alignSelfStretch"></div>
|
|
<div id="alignSelfNormal"></div>
|
|
<div id="alignSelfStart"></div>
|
|
<div id="alignSelfEnd"></div>
|
|
<div id="alignSelfCenter"></div>
|
|
<div id="alignSelfSelfStart"></div>
|
|
<div id="alignSelfSelfEnd"></div>
|
|
<div id="alignSelfFlexStart"></div>
|
|
<div id="alignSelfFlexEnd"></div>
|
|
|
|
<div id="alignSelfUnsafeEnd"></div>
|
|
<div id="alignSelfUnsafeCenter"></div>
|
|
<div id="alignSelfSafeSelfEnd"></div>
|
|
<div id="alignSelfSafeSelfStart"></div>
|
|
<div id="alignSelfUnsafeFlexStart"></div>
|
|
<div id="alignSelfSafeFlexEnd"></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 alignSelfBaseline = document.getElementById("alignSelfBaseline");
|
|
checkValues(alignSelfBaseline, "alignSelf", "align-self", "", "baseline");
|
|
var alignSelfFirstBaseline = document.getElementById("alignSelfFirstBaseline");
|
|
checkValues(alignSelfFirstBaseline, "alignSelf", "align-self", "", "baseline");
|
|
var alignSelfLastBaseline = document.getElementById("alignSelfLastBaseline");
|
|
checkValues(alignSelfLastBaseline, "alignSelf", "align-self", "", "last baseline");
|
|
var alignSelfStretch = document.getElementById("alignSelfStretch");
|
|
checkValues(alignSelfStretch, "alignSelf", "align-self", "", "stretch");
|
|
var alignSelfNormal = document.getElementById("alignSelfNormal");
|
|
checkValues(alignSelfNormal, "alignSelf", "align-self", "", "normal");
|
|
var alignSelfStart = document.getElementById("alignSelfStart");
|
|
checkValues(alignSelfStart, "alignSelf", "align-self", "", "start");
|
|
var alignSelfEnd = document.getElementById("alignSelfEnd");
|
|
checkValues(alignSelfEnd, "alignSelf", "align-self", "", "end");
|
|
var alignSelfCenter = document.getElementById("alignSelfCenter");
|
|
checkValues(alignSelfCenter, "alignSelf", "align-self", "", "center");
|
|
var alignSelfSelfEnd = document.getElementById("alignSelfSelfEnd");
|
|
checkValues(alignSelfSelfEnd, "alignSelf", "align-self", "", "self-end");
|
|
var alignSelfSelfStart = document.getElementById("alignSelfSelfStart");
|
|
checkValues(alignSelfSelfStart, "alignSelf", "align-self", "", "self-start");
|
|
var alignSelfFlexStart = document.getElementById("alignSelfFlexStart");
|
|
checkValues(alignSelfFlexStart, "alignSelf", "align-self", "", "flex-start");
|
|
var alignSelfFlexEnd = document.getElementById("alignSelfFlexEnd");
|
|
checkValues(alignSelfFlexEnd, "alignSelf", "align-self", "", "flex-end");
|
|
|
|
var alignSelfUnsafeEnd = document.getElementById("alignSelfUnsafeEnd");
|
|
checkValues(alignSelfUnsafeEnd, "alignSelf", "align-self", "", "unsafe end");
|
|
var alignSelfUnsafeCenter = document.getElementById("alignSelfUnsafeCenter");
|
|
checkValues(alignSelfUnsafeCenter, "alignSelf", "align-self", "", "unsafe center");
|
|
var alignSelfSafeSelfEnd = document.getElementById("alignSelfSafeSelfEnd");
|
|
checkValues(alignSelfSafeSelfEnd, "alignSelf", "align-self", "", "safe self-end");
|
|
var alignSelfSafeSelfStart = document.getElementById("alignSelfSafeSelfStart");
|
|
checkValues(alignSelfSafeSelfStart, "alignSelf", "align-self", "", "safe self-start");
|
|
var alignSelfUnsafeFlexStart = document.getElementById("alignSelfUnsafeFlexStart");
|
|
checkValues(alignSelfUnsafeFlexStart, "alignSelf", "align-self", "", "unsafe flex-start");
|
|
var alignSelfSafeFlexEnd = document.getElementById("alignSelfSafeFlexEnd");
|
|
checkValues(alignSelfSafeFlexEnd, "alignSelf", "align-self", "", "safe flex-end");
|
|
}, "Test getting align-self set through CSS.");
|
|
|
|
test(function() {
|
|
element = document.createElement("div");
|
|
document.body.appendChild(element);
|
|
checkValues(element, "alignSelf", "align-self", "", "auto");
|
|
}, "Test initial value of align-self through JS");
|
|
|
|
test(function() {
|
|
container = document.createElement("div");
|
|
element = document.createElement("div");
|
|
container.appendChild(element);
|
|
document.body.appendChild(container);
|
|
element.style.alignSelf = "center";
|
|
checkValues(element, "alignSelf", "align-self", "center", "center");
|
|
|
|
element.style.alignSelf = "unsafe start";
|
|
checkValues(element, "alignSelf", "align-self", "unsafe start", "unsafe start");
|
|
|
|
element.style.alignSelf = "safe flex-end";
|
|
checkValues(element, "alignSelf", "align-self", "safe flex-end", "safe flex-end");
|
|
|
|
element.style.alignSelf = "center";
|
|
checkValues(element, "alignSelf", "align-self", "center", "center");
|
|
|
|
element.style.alignSelf = "self-start";
|
|
checkValues(element, "alignSelf", "align-self", "self-start", "self-start");
|
|
|
|
element.style.alignSelf = "normal";
|
|
checkValues(element, "alignSelf", "align-self", "normal", "normal");
|
|
|
|
element.style.alignSelf = "auto";
|
|
checkValues(element, "alignSelf", "align-self", "auto", "auto");
|
|
|
|
container.style.display = "flex";
|
|
element.style.alignSelf = "auto";
|
|
checkValues(element, "alignSelf", "align-self", "auto", "auto");
|
|
|
|
container.style.display = "grid";
|
|
element.style.alignSelf = "auto";
|
|
checkValues(element, "alignSelf", "align-self", "auto", "auto");
|
|
|
|
element.style.alignSelf = "self-end";
|
|
checkValues(element, "alignSelf", "align-self", "self-end", "self-end");
|
|
}, "Test getting and setting align-self through JS");
|
|
|
|
test(function() {
|
|
document.documentElement.style.alignSelf = "auto";
|
|
checkValues(document.documentElement, "alignSelf", "align-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, "alignSelf", "align-self", "left");
|
|
checkBadValues(element, "alignSelf", "align-self", "right");
|
|
checkBadValues(element, "alignSelf", "align-self", "safe auto");
|
|
checkBadValues(element, "alignSelf", "align-self", "auto left");
|
|
checkBadValues(element, "alignSelf", "align-self", "safe right");
|
|
checkBadValues(element, "alignSelf", "align-self", "normal unsafe");
|
|
checkBadValues(element, "alignSelf", "align-self", "normal stretch");
|
|
checkBadValues(element, "alignSelf", "align-self", "baseline normal");
|
|
checkBadValues(element, "alignSelf", "align-self", "baseline safe");
|
|
checkBadValues(element, "alignSelf", "align-self", "baseline center");
|
|
checkBadValues(element, "alignSelf", "align-self", "first baseline center");
|
|
checkBadValues(element, "alignSelf", "align-self", "last baseline center");
|
|
checkBadValues(element, "alignSelf", "align-self", "baseline last");
|
|
checkBadValues(element, "alignSelf", "align-self", "baseline first");
|
|
checkBadValues(element, "alignSelf", "align-self", "stretch unsafe");
|
|
checkBadValues(element, "alignSelf", "align-self", "stretch right");
|
|
checkBadValues(element, "alignSelf", "align-self", "unsafe unsafe");
|
|
checkBadValues(element, "alignSelf", "align-self", "unsafe safe");
|
|
checkBadValues(element, "alignSelf", "align-self", "center start");
|
|
checkBadValues(element, "alignSelf", "align-self", "stretch unsafe");
|
|
checkBadValues(element, "alignSelf", "align-self", "safe stretch");
|
|
checkBadValues(element, "alignSelf", "align-self", "baseline safe");
|
|
checkBadValues(element, "alignSelf", "align-self", "unsafe baseline");
|
|
checkBadValues(element, "alignSelf", "align-self", "unsafe safe left");
|
|
checkBadValues(element, "alignSelf", "align-self", "unsafe left safe");
|
|
checkBadValues(element, "alignSelf", "align-self", "left safe unsafe safe");
|
|
checkBadValues(element, "alignSelf", "align-self", "legacy start");
|
|
checkBadValues(element, "alignSelf", "align-self", "legacy end");
|
|
checkBadValues(element, "alignSelf", "align-self", "legacy right unsafe");
|
|
checkBadValues(element, "alignSelf", "align-self", "legacy auto");
|
|
checkBadValues(element, "alignSelf", "align-self", "legacy stretch");
|
|
checkBadValues(element, "alignSelf", "align-self", "legacy");
|
|
checkBadValues(element, "alignSelf", "align-self", "legacy left right");
|
|
checkBadValues(element, "alignSelf", "align-self", "start safe");
|
|
checkBadValues(element, "alignSelf", "align-self", "end unsafe");
|
|
}, "Test bad combinations of align-self");
|
|
|
|
test(function() {
|
|
container.style.display = "";
|
|
checkInitialValues(element, "alignSelf", "align-self", "center", "auto");
|
|
}, "Test the value 'initial'");
|
|
|
|
test(function() {
|
|
container.style.display = "grid";
|
|
checkInitialValues(element, "alignSelf", "align-self", "safe start", "auto");
|
|
}, "Test the value 'initial' for grid containers");
|
|
|
|
test(function() {
|
|
container.style.display = "flex";
|
|
checkInitialValues(element, "alignSelf", "align-self", "unsafe end", "auto");
|
|
}, "Test the value 'initial' for flex containers");
|
|
|
|
test(function() {
|
|
container.style.display = "";
|
|
element.style.position = "absolute";
|
|
checkInitialValues(element, "alignSelf", "align-self", "start", "auto");
|
|
}, "Test the value 'initial' for positioned elements");
|
|
|
|
test(function() {
|
|
container.style.display = "grid";
|
|
element.style.position = "absolute";
|
|
checkInitialValues(element, "alignSelf", "align-self", "end", "auto");
|
|
}, "Test the value 'initial' for positioned elements in grid containers");
|
|
|
|
test(function() {
|
|
container.style.display = "flex";
|
|
element.style.position = "absolute";
|
|
checkInitialValues(element, "alignSelf", "align-self", "end", "auto");
|
|
}, "Test the value 'initial' for positioned elements in flex containers");
|
|
|
|
test(function() {
|
|
checkInheritValues("alignSelf", "align-self", "end");
|
|
checkInheritValues("alignSelf", "align-self", "safe start");
|
|
checkInheritValues("alignSelf", "align-self", "unsafe center");
|
|
}, "Test the value 'inherit'");
|
|
</script>
|