blob: 5b9d9e3d8a00f71551be44763894d3fea2c0c657 [file] [log] [blame]
<!DOCTYPE html>
<style>
#alignItemsBaseline {
align-items: baseline;
}
#alignItemsFirstBaseline {
align-items: first baseline;
}
#alignItemsLastBaseline {
align-items: last baseline;
}
#alignItemsStretch {
align-items: stretch;
}
#alignItemsStart {
align-items: start;
}
#alignItemsEnd {
align-items: end;
}
#alignItemsCenter {
align-items: center;
}
#alignItemsSelfStart {
align-items: self-start;
}
#alignItemsSelfEnd {
align-items: self-end;
}
#alignItemsLeft {
align-items: left;
}
#alignItemsRight {
align-items: right;
}
#alignItemsFlexStart {
align-items: flex-start;
}
#alignItemsFlexEnd {
align-items: flex-end;
}
#alignItemsEndUnsafe {
align-items: end unsafe;
}
#alignItemsCenterUnsafe {
align-items: center unsafe;
}
#alignItemsSelfEndSafe {
align-items: self-end safe;
}
#alignItemsSelfStartSafe {
align-items: self-start safe;
}
#alignItemsRightSafe {
align-items: right safe;
}
#alignItemsLeftUnsafe {
align-items: left unsafe;
}
#alignItemsFlexStartUnsafe {
align-items: flex-start unsafe;
}
#alignItemsFlexEndSafe {
align-items: flex-end safe;
}
</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="alignItemsStart"></div>
<div id="alignItemsEnd"></div>
<div id="alignItemsCenter"></div>
<div id="alignItemsSelfStart"></div>
<div id="alignItemsSelfEnd"></div>
<div id="alignItemsLeft"></div>
<div id="alignItemsRight"></div>
<div id="alignItemsFlexStart"></div>
<div id="alignItemsFlexEnd"></div>
<div id="alignItemsEndUnsafe"></div>
<div id="alignItemsCenterUnsafe"></div>
<div id="alignItemsSelfEndSafe"></div>
<div id="alignItemsSelfStartSafe"></div>
<div id="alignItemsRightSafe"></div>
<div id="alignItemsLeftUnsafe"></div>
<div id="alignItemsFlexStartUnsafe"></div>
<div id="alignItemsFlexEndSafe"></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 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 alignItemsLeft = document.getElementById("alignItemsLeft");
checkValues(alignItemsLeft, "alignItems", "align-items", "", "left");
var alignItemsRight = document.getElementById("alignItemsRight");
checkValues(alignItemsRight, "alignItems", "align-items", "", "right");
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 alignItemsEndUnsafe = document.getElementById("alignItemsEndUnsafe");
checkValues(alignItemsEndUnsafe, "alignItems", "align-items", "", "end unsafe");
var alignItemsCenterUnsafe = document.getElementById("alignItemsCenterUnsafe");
checkValues(alignItemsCenterUnsafe, "alignItems", "align-items", "", "center unsafe");
var alignItemsSelfEndSafe = document.getElementById("alignItemsSelfEndSafe");
checkValues(alignItemsSelfEndSafe, "alignItems", "align-items", "", "self-end safe");
var alignItemsSelfStartSafe = document.getElementById("alignItemsSelfStartSafe");
checkValues(alignItemsSelfStartSafe, "alignItems", "align-items", "", "self-start safe");
var alignItemsRightSafe = document.getElementById("alignItemsRightSafe");
checkValues(alignItemsRightSafe, "alignItems", "align-items", "", "right safe");
var alignItemsLeftUnsafe = document.getElementById("alignItemsLeftUnsafe");
checkValues(alignItemsLeftUnsafe, "alignItems", "align-items", "", "left unsafe");
var alignItemsFlexStartUnsafe = document.getElementById("alignItemsFlexStartUnsafe");
checkValues(alignItemsFlexStartUnsafe, "alignItems", "align-items", "", "flex-start unsafe");
var alignItemsFlexEndSafe = document.getElementById("alignItemsFlexEndSafe");
checkValues(alignItemsFlexEndSafe, "alignItems", "align-items", "", "flex-end safe");
}, "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", "start unsafe", "start unsafe");
element.style.alignItems = "flex-end safe";
checkValues(element, "alignItems", "align-items", "flex-end safe", "flex-end safe");
element.style.alignItems = "right";
checkValues(element, "alignItems", "align-items", "right", "right");
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");
// 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", "unsafe auto");
checkBadValues(element, "alignItems", "align-items", "auto safe");
checkBadValues(element, "alignItems", "align-items", "auto left");
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");
}, "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", "left safe", "normal");
}, "Test the value 'initial' for grid containers");
test(function() {
element.style.display = "flex";
checkInitialValues(element, "alignItems", "align-items", "right unsafe", "normal");
}, "Test the value 'initial' for flex containers");
test(function() {
checkInheritValues("alignItems", "align-items", "end");
checkInheritValues("alignItems", "align-items", "left safe");
checkInheritValues("alignItems", "align-items", "center unsafe");
}, "Test the value 'inherit'");
</script>