248 lines
10 KiB
HTML
248 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<style>
|
|
#alignItemsBaseline {
|
|
align-items: baseline;
|
|
}
|
|
|
|
#alignItemsFirstBaseline {
|
|
align-items: first baseline;
|
|
}
|
|
|
|
#alignItemsLastBaseline {
|
|
align-items: last baseline;
|
|
}
|
|
|
|
#alignItemsStretch {
|
|
align-items: stretch;
|
|
}
|
|
|
|
#alignItemsNormal {
|
|
align-items: normal;
|
|
}
|
|
|
|
#alignItemsStart {
|
|
align-items: start;
|
|
}
|
|
|
|
#alignItemsEnd {
|
|
align-items: end;
|
|
}
|
|
|
|
#alignItemsCenter {
|
|
align-items: center;
|
|
}
|
|
|
|
#alignItemsSelfStart {
|
|
align-items: self-start;
|
|
}
|
|
|
|
#alignItemsSelfEnd {
|
|
align-items: self-end;
|
|
}
|
|
|
|
#alignItemsFlexStart {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
#alignItemsFlexEnd {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
#alignItemsUnsafeEnd {
|
|
align-items: unsafe end ;
|
|
}
|
|
|
|
#alignItemsUnsafeCenter {
|
|
align-items: unsafe center ;
|
|
}
|
|
|
|
#alignItemsSafeSelfEnd {
|
|
align-items: safe self-end;
|
|
}
|
|
|
|
#alignItemsSafeSelfStart {
|
|
align-items: safe self-start;
|
|
}
|
|
|
|
#alignItemsUnsafeFlexStart {
|
|
align-items: unsafe flex-start;
|
|
}
|
|
|
|
#alignItemsSafeFlexEnd {
|
|
align-items: safe flex-end;
|
|
}
|
|
</style>
|
|
<p>Test that setting and getting align-items works as expected</p>
|
|
<div id="alignItemsBaseline"></div>
|
|
<div id="alignItemsFirstBaseline"></div>
|
|
<div id="alignItemsLastBaseline"></div>
|
|
<div id="alignItemsStretch"></div>
|
|
<div id="alignItemsNormal"></div>
|
|
<div id="alignItemsStart"></div>
|
|
<div id="alignItemsEnd"></div>
|
|
<div id="alignItemsCenter"></div>
|
|
<div id="alignItemsSelfStart"></div>
|
|
<div id="alignItemsSelfEnd"></div>
|
|
<div id="alignItemsFlexStart"></div>
|
|
<div id="alignItemsFlexEnd"></div>
|
|
|
|
<div id="alignItemsUnsafeEnd"></div>
|
|
<div id="alignItemsUnsafeCenter"></div>
|
|
<div id="alignItemsSafeSelfEnd"></div>
|
|
<div id="alignItemsSafeSelfStart"></div>
|
|
<div id="alignItemsUnsafeFlexStart"></div>
|
|
<div id="alignItemsSafeFlexEnd"></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 alignItemsBaseline = document.getElementById("alignItemsBaseline");
|
|
checkValues(alignItemsBaseline, "alignItems", "align-items", "", "baseline");
|
|
var alignItemsFirstBaseline = document.getElementById("alignItemsFirstBaseline");
|
|
checkValues(alignItemsFirstBaseline, "alignItems", "align-items", "", "baseline");
|
|
var alignItemsLastBaseline = document.getElementById("alignItemsLastBaseline");
|
|
checkValues(alignItemsLastBaseline, "alignItems", "align-items", "", "last baseline");
|
|
var alignItemsStretch = document.getElementById("alignItemsStretch");
|
|
checkValues(alignItemsStretch, "alignItems", "align-items", "", "stretch");
|
|
var alignItemsNormal = document.getElementById("alignItemsNormal");
|
|
checkValues(alignItemsNormal, "alignItems", "align-items", "", "normal");
|
|
var alignItemsStart = document.getElementById("alignItemsStart");
|
|
checkValues(alignItemsStart, "alignItems", "align-items", "", "start");
|
|
var alignItemsEnd = document.getElementById("alignItemsEnd");
|
|
checkValues(alignItemsEnd, "alignItems", "align-items", "", "end");
|
|
var alignItemsCenter = document.getElementById("alignItemsCenter");
|
|
checkValues(alignItemsCenter, "alignItems", "align-items", "", "center");
|
|
var alignItemsSelfEnd = document.getElementById("alignItemsSelfEnd");
|
|
checkValues(alignItemsSelfEnd, "alignItems", "align-items", "", "self-end");
|
|
var alignItemsSelfStart = document.getElementById("alignItemsSelfStart");
|
|
checkValues(alignItemsSelfStart, "alignItems", "align-items", "", "self-start");
|
|
var alignItemsFlexStart = document.getElementById("alignItemsFlexStart");
|
|
checkValues(alignItemsFlexStart, "alignItems", "align-items", "", "flex-start");
|
|
var alignItemsFlexEnd = document.getElementById("alignItemsFlexEnd");
|
|
checkValues(alignItemsFlexEnd, "alignItems", "align-items", "", "flex-end");
|
|
|
|
var alignItemsUnsafeEnd = document.getElementById("alignItemsUnsafeEnd");
|
|
checkValues(alignItemsUnsafeEnd, "alignItems", "align-items", "", "unsafe end");
|
|
var alignItemsUnsafeCenter = document.getElementById("alignItemsUnsafeCenter");
|
|
checkValues(alignItemsUnsafeCenter, "alignItems", "align-items", "", "unsafe center");
|
|
var alignItemsSafeSelfEnd = document.getElementById("alignItemsSafeSelfEnd");
|
|
checkValues(alignItemsSafeSelfEnd, "alignItems", "align-items", "", "safe self-end");
|
|
var alignItemsSafeSelfStart = document.getElementById("alignItemsSafeSelfStart");
|
|
checkValues(alignItemsSafeSelfStart, "alignItems", "align-items", "", "safe self-start");
|
|
var alignItemsUnsafeFlexStart = document.getElementById("alignItemsUnsafeFlexStart");
|
|
checkValues(alignItemsUnsafeFlexStart, "alignItems", "align-items", "", "unsafe flex-start");
|
|
var alignItemsSafeFlexEnd = document.getElementById("alignItemsSafeFlexEnd");
|
|
checkValues(alignItemsSafeFlexEnd, "alignItems", "align-items", "", "safe flex-end");
|
|
}, "Test getting align-items set through CSS.");
|
|
|
|
test(function() {
|
|
element = document.createElement("div");
|
|
document.body.appendChild(element);
|
|
checkValues(element, "alignItems", "align-items", "", "normal");
|
|
}, "Test initial value of align-items through JS");
|
|
|
|
test(function() {
|
|
element = document.createElement("div");
|
|
document.body.appendChild(element);
|
|
element.style.alignItems = "center";
|
|
checkValues(element, "alignItems", "align-items", "center", "center");
|
|
|
|
element.style.alignItems = "unsafe start";
|
|
checkValues(element, "alignItems", "align-items", "unsafe start", "unsafe start");
|
|
|
|
element.style.alignItems = "safe flex-end";
|
|
checkValues(element, "alignItems", "align-items", "safe flex-end", "safe flex-end");
|
|
|
|
element.style.alignItems = "center";
|
|
checkValues(element, "alignItems", "align-items", "center", "center");
|
|
|
|
element.style.alignItems = "self-start";
|
|
checkValues(element, "alignItems", "align-items", "self-start", "self-start");
|
|
|
|
element.style.alignItems = "normal";
|
|
checkValues(element, "alignItems", "align-items", "normal", "normal");
|
|
|
|
// The 'auto' value is not valid for the align-items property.
|
|
element.style.alignItems = "";
|
|
element.style.alignItems = "auto";
|
|
checkValues(element, "alignItems", "align-items", "", "normal");
|
|
|
|
element.style.display = "flex";
|
|
element.style.alignItems = "auto";
|
|
checkValues(element, "alignItems", "align-items", "", "normal");
|
|
|
|
element.style.display = "grid";
|
|
element.style.alignItems = "auto";
|
|
checkValues(element, "alignItems", "align-items", "", "normal");
|
|
|
|
element.style.alignItems = "self-end";
|
|
checkValues(element, "alignItems", "align-items", "self-end", "self-end");
|
|
}, "Test getting and setting align-items through JS");
|
|
|
|
test(function() {
|
|
element = document.createElement("div");
|
|
document.body.appendChild(element);
|
|
|
|
checkBadValues(element, "alignItems", "align-items", "auto");
|
|
checkBadValues(element, "alignItems", "align-items", "left");
|
|
checkBadValues(element, "alignItems", "align-items", "right");
|
|
checkBadValues(element, "alignItems", "align-items", "unsafe auto");
|
|
checkBadValues(element, "alignItems", "align-items", "auto safe");
|
|
checkBadValues(element, "alignItems", "align-items", "auto left");
|
|
checkBadValues(element, "alignItems", "align-items", "safe left");
|
|
checkBadValues(element, "alignItems", "align-items", "unsafe right");
|
|
checkBadValues(element, "alignItems", "align-items", "unsafe normal");
|
|
checkBadValues(element, "alignItems", "align-items", "normal stretch");
|
|
checkBadValues(element, "alignItems", "align-items", "baseline normal");
|
|
checkBadValues(element, "alignItems", "align-items", "baseline safe");
|
|
checkBadValues(element, "alignItems", "align-items", "baseline center");
|
|
checkBadValues(element, "alignItems", "align-items", "first baseline center");
|
|
checkBadValues(element, "alignItems", "align-items", "last baseline center");
|
|
checkBadValues(element, "alignItems", "align-items", "baseline last");
|
|
checkBadValues(element, "alignItems", "align-items", "baseline first");
|
|
checkBadValues(element, "alignItems", "align-items", "stretch unsafe");
|
|
checkBadValues(element, "alignItems", "align-items", "stretch right");
|
|
checkBadValues(element, "alignItems", "align-items", "unsafe unsafe");
|
|
checkBadValues(element, "alignItems", "align-items", "unsafe safe");
|
|
checkBadValues(element, "alignItems", "align-items", "center start");
|
|
checkBadValues(element, "alignItems", "align-items", "stretch unsafe");
|
|
checkBadValues(element, "alignItems", "align-items", "safe stretch");
|
|
checkBadValues(element, "alignItems", "align-items", "baseline safe");
|
|
checkBadValues(element, "alignItems", "align-items", "unsafe baseline");
|
|
checkBadValues(element, "alignItems", "align-items", "unsafe safe left");
|
|
checkBadValues(element, "alignItems", "align-items", "unsafe left safe");
|
|
checkBadValues(element, "alignItems", "align-items", "left safe unsafe safe");
|
|
checkBadValues(element, "alignItems", "align-items", "legacy start");
|
|
checkBadValues(element, "alignItems", "align-items", "legacy end");
|
|
checkBadValues(element, "alignItems", "align-items", "legacy right unsafe");
|
|
checkBadValues(element, "alignItems", "align-items", "legacy auto");
|
|
checkBadValues(element, "alignItems", "align-items", "legacy stretch");
|
|
checkBadValues(element, "alignItems", "align-items", "legacy");
|
|
checkBadValues(element, "alignItems", "align-items", "legacy left right");
|
|
checkBadValues(element, "alignItems", "align-items", "start safe");
|
|
checkBadValues(element, "alignItems", "align-items", "end unsafe");
|
|
}, "Test bad combinations of align-items");
|
|
|
|
test(function() {
|
|
element.style.display = "";
|
|
checkInitialValues(element, "alignItems", "align-items", "center", "normal");
|
|
}, "Test the value 'initial'");
|
|
|
|
test(function() {
|
|
element.style.display = "grid";
|
|
checkInitialValues(element, "alignItems", "align-items", "safe start", "normal");
|
|
}, "Test the value 'initial' for grid containers");
|
|
|
|
test(function() {
|
|
element.style.display = "flex";
|
|
checkInitialValues(element, "alignItems", "align-items", "unsafe end", "normal");
|
|
}, "Test the value 'initial' for flex containers");
|
|
|
|
test(function() {
|
|
checkInheritValues("alignItems", "align-items", "end");
|
|
checkInheritValues("alignItems", "align-items", "safe start");
|
|
checkInheritValues("alignItems", "align-items", "unsafe center");
|
|
}, "Test the value 'inherit'");
|
|
</script>
|