blob: 3c94886ddcf2e0aa3817f9af56b70666ae943b8c [file] [log] [blame]
<!DOCTYPE html>
<style>
#alignContentAuto {
align-content: auto;
}
#alignContentBaseline {
align-content: baseline;
}
#alignContentFirstBaseline {
align-content: first baseline;
}
#alignContentLastBaseline {
align-content: last baseline;
}
#alignContentSpaceBetween {
align-content: space-between;
}
#alignContentSpaceAround {
align-content: space-around;
}
#alignContentSpaceEvenly {
align-content: space-evenly;
}
#alignContentStretch {
align-content: stretch;
}
#alignContentStart {
align-content: start;
}
#alignContentEnd {
align-content: end;
}
#alignContentCenter {
align-content: center;
}
#alignContentFlexStart {
align-content: flex-start;
}
#alignContentFlexEnd {
align-content: flex-end;
}
#alignContentUnsafeEnd {
align-content: unsafe end ;
}
#alignContentUnsafeCenter {
align-content: unsafe center ;
}
#alignContentUnsafeFlexStart {
align-content: unsafe flex-start;
}
#alignContentSafeFlexEnd {
align-content: safe flex-end;
}
<!-- Invalid CSS cases -->
#alignContentSpaceBetweenLeft {
align-content: space-between left;
}
#alignContentSpaceAroundCenter {
align-content: space-around center;
}
#alignContentSpaceEvenlyRight {
align-content: space-evenly right;
}
#alignContentStretchStartSafe {
align-content: stretch start safe;
}
#alignContentSpaceAroundEndUnsafe {
align-content: space-around end unsafe;
}
#alignContentSpaceEvenlyFlexStartSafe {
align-content: space-evenly flex-start safe;
}
#alignContentSpaceBetweenSafe {
align-content: space-between safe;
}
#alignContentSpaceBetweenStretch {
align-content: space-between stretch;
}
#alignContentSafe {
align-content: safe;
}
#alignContentRightSafeUnsafe {
align-content: right safe unsafe;
}
#alignContentCenterLeft {
align-content: center left;
}
</style>
<p>Test that setting and getting align-content works as expected</p>
<div id="alignContentAuto"></div>
<div id="alignContentBaseline"></div>
<div id="alignContentFirstBaseline"></div>
<div id="alignContentLastBaseline"></div>
<div id="alignContentSpaceBetween"></div>
<div id="alignContentSpaceAround"></div>
<div id="alignContentSpaceEvenly"></div>
<div id="alignContentStretch"></div>
<div id="alignContentStart"></div>
<div id="alignContentEnd"></div>
<div id="alignContentCenter"></div>
<div id="alignContentFlexStart"></div>
<div id="alignContentFlexEnd"></div>
<div id="alignContentUnsafeEnd"></div>
<div id="alignContentUnsafeCenter"></div>
<div id="alignContentSafeSelfEnd"></div>
<div id="alignContentSafeSelfStart"></div>
<div id="alignContentUnsafeFlexStart"></div>
<div id="alignContentSafeFlexEnd"></div>
<div id="alignContentEndUnsafe"></div>
<div id="alignContentCenterUnsafe"></div>
<div id="alignContentFlexStartUnsafe"></div>
<div id="alignContentFlexEndSafe"></div>
<div id="alignContentSpaceBetweenLeft"></div>
<div id="alignContentSpaceAroundCenter"></div>
<div id="alignContentSpaceEvenlyRight"></div>
<div id="alignContentStretchStartSafe"></div>
<div id="alignContentSpaceAroundEndUnsafe"></div>
<div id="alignContentSpaceEvenlyFlexStartSafe"></div>
<div id="alignContentSpaceBetweenSafe"></div>
<div id="alignContentSpaceBetweenStretch"></div>
<div id="alignContentSafe"></div>
<div id="alignContentRightSafeUnsafe"></div>
<div id="alignContentCenterLeft"></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 alignContentAuto = document.getElementById("alignContentAuto");
checkValues(alignContentAuto, "alignContent", "align-content", "", "normal");
var alignContentBaseline = document.getElementById("alignContentBaseline");
checkValues(alignContentBaseline, "alignContent", "align-content", "", "baseline");
var alignContentLastBaseline = document.getElementById("alignContentFirstBaseline");
checkValues(alignContentLastBaseline, "alignContent", "align-content", "", "baseline");
var alignContentLastBaseline = document.getElementById("alignContentLastBaseline");
checkValues(alignContentLastBaseline, "alignContent", "align-content", "", "last baseline");
var alignContentSpaceBetween = document.getElementById("alignContentSpaceBetween");
checkValues(alignContentSpaceBetween, "alignContent", "align-content", "", "space-between");
var alignContentSpaceAround = document.getElementById("alignContentSpaceAround");
checkValues(alignContentSpaceAround, "alignContent", "align-content", "", "space-around");
var alignContentSpaceEvenly = document.getElementById("alignContentSpaceEvenly");
checkValues(alignContentSpaceEvenly, "alignContent", "align-content", "", "space-evenly");
var alignContentStretch = document.getElementById("alignContentStretch");
checkValues(alignContentStretch, "alignContent", "align-content", "", "stretch");
var alignContentStart = document.getElementById("alignContentStart");
checkValues(alignContentStart, "alignContent", "align-content", "", "start");
var alignContentEnd = document.getElementById("alignContentEnd");
checkValues(alignContentEnd, "alignContent", "align-content", "", "end");
var alignContentCenter = document.getElementById("alignContentCenter");
checkValues(alignContentCenter, "alignContent", "align-content", "", "center");
var alignContentFlexStart = document.getElementById("alignContentFlexStart");
checkValues(alignContentFlexStart, "alignContent", "align-content", "", "flex-start");
var alignContentFlexEnd = document.getElementById("alignContentFlexEnd");
checkValues(alignContentFlexEnd, "alignContent", "align-content", "", "flex-end");
var alignContentUnsafeEnd = document.getElementById("alignContentUnsafeEnd");
checkValues(alignContentUnsafeEnd, "alignContent", "align-content", "", "unsafe end");
var alignContentUnsafeCenter = document.getElementById("alignContentUnsafeCenter");
checkValues(alignContentUnsafeCenter, "alignContent", "align-content", "", "unsafe center");
var alignContentUnsafeFlexStart = document.getElementById("alignContentUnsafeFlexStart");
checkValues(alignContentUnsafeFlexStart, "alignContent", "align-content", "", "unsafe flex-start");
var alignContentSafeFlexEnd = document.getElementById("alignContentSafeFlexEnd");
checkValues(alignContentSafeFlexEnd, "alignContent", "align-content", "", "safe flex-end");
}, "Test getting align-content values previously set through CSS.");
test(function() {
var alignContentEndUnsafe = document.getElementById("alignContentEndUnsafe");
checkValues(alignContentEndUnsafe, "alignContent", "align-content", "", "normal");
var alignContentCenterUnsafe = document.getElementById("alignContentCenterUnsafe");
checkValues(alignContentCenterUnsafe, "alignContent", "align-content", "", "normal");
var alignContentFlexStartUnsafe = document.getElementById("alignContentFlexStartUnsafe");
checkValues(alignContentFlexStartUnsafe, "alignContent", "align-content", "", "normal");
var alignContentFlexEndSafe = document.getElementById("alignContentFlexEndSafe");
checkValues(alignContentFlexEndSafe, "alignContent", "align-content", "", "normal");
var alignContentSpaceBetweenLeft = document.getElementById("alignContentSpaceBetweenLeft");
checkValues(alignContentSpaceBetweenLeft, "alignContent", "align-content", "", "normal");
var alignContentSpaceAroundCenter = document.getElementById("alignContentSpaceAroundCenter");
checkValues(alignContentSpaceAroundCenter, "alignContent", "align-content", "", "normal");
var alignContentSpaceEvenlyRight = document.getElementById("alignContentSpaceEvenlyRight");
checkValues(alignContentSpaceEvenlyRight, "alignContent", "align-content", "", "normal");
var alignContentStretchStartSafe = document.getElementById("alignContentStretchStartSafe");
checkValues(alignContentStretchStartSafe, "alignContent", "align-content", "", "normal");
var alignContentSpaceAroundEndUnsafe = document.getElementById("alignContentSpaceAroundEndUnsafe");
checkValues(alignContentSpaceAroundEndUnsafe, "alignContent", "align-content", "", "normal");
var alignContentSpaceEvenlyFlexStartSafe = document.getElementById("alignContentSpaceEvenlyFlexStartSafe");
checkValues(alignContentSpaceEvenlyFlexStartSafe, "alignContent", "align-content", "", "normal");
var alignContentSpaceBetweenSafe = document.getElementById("alignContentSpaceBetweenSafe");
checkValues(alignContentSpaceBetweenSafe, "alignContent", "align-content", "", "normal");
var alignContentSpaceBetweenStretch = document.getElementById("alignContentSpaceBetweenStretch");
checkValues(alignContentSpaceBetweenStretch, "alignContent", "align-content", "", "normal");
var alignContentSafe = document.getElementById("alignContentSafe");
checkValues(alignContentSafe, "alignContent", "align-content", "", "normal");
var alignContentRightSafeUnsafe = document.getElementById("alignContentRightSafeUnsafe");
checkValues(alignContentRightSafeUnsafe, "alignContent", "align-content", "", "normal");
var alignContentCenterLeft = document.getElementById("alignContentCenterLeft");
checkValues(alignContentCenterLeft, "alignContent", "align-content", "", "normal");
}, "Test setting invalid values to align-content through CSS.");
test(function() {
element = document.createElement("div");
document.body.appendChild(element);
checkValues(element, "alignContent", "align-content", "", "normal");
}, "Test initial value of align-content through JS");
test(function() {
element = document.createElement("div");
document.body.appendChild(element);
element.style.alignContent = "center";
checkValues(element, "alignContent", "align-content", "center", "center");
element.style.alignContent = "unsafe start";
checkValues(element, "alignContent", "align-content", "unsafe start", "unsafe start");
element.style.alignContent = "safe flex-end";
checkValues(element, "alignContent", "align-content", "safe flex-end", "safe flex-end");
element.style.alignContent = "unsafe end";
checkValues(element, "alignContent", "align-content", "unsafe end", "unsafe end");
element.style.alignContent = "first baseline";
checkValues(element, "alignContent", "align-content", "baseline", "baseline");
element.style.alignContent = "last baseline";
checkValues(element, "alignContent", "align-content", "last baseline", "last baseline");
element.style.alignContent = "normal";
checkValues(element, "alignContent", "align-content", "normal", "normal");
element.style.display = "flex";
element.style.alignContent = "normal";
checkValues(element, "alignContent", "align-content", "normal", "normal");
element.style.display = "grid";
element.style.alignContent = "normal";
checkValues(element, "alignContent", "align-content", "normal", "normal");
element.style.alignContent = "flex-end";
checkValues(element, "alignContent", "align-content", "flex-end", "flex-end");
}, "Test getting and setting align-content through JS");
test(function() {
element = document.createElement("div");
document.body.appendChild(element);
checkBadValues(element, "alignContent", "align-content", "left");
checkBadValues(element, "alignContent", "align-content", "right");
checkBadValues(element, "alignContent", "align-content", "auto");
checkBadValues(element, "alignContent", "align-content", "unsafe auto");
checkBadValues(element, "alignContent", "align-content", "auto safe");
checkBadValues(element, "alignContent", "align-content", "auto left");
checkBadValues(element, "alignContent", "align-content", "safe left");
checkBadValues(element, "alignContent", "align-content", "unsafe right");
checkBadValues(element, "alignContent", "align-content", "baseline safe");
checkBadValues(element, "alignContent", "align-content", "last-baseline center");
checkBadValues(element, "alignContent", "align-content", "unsafe unsafe");
checkBadValues(element, "alignContent", "align-content", "unsafe safe");
checkBadValues(element, "alignContent", "align-content", "center start");
checkBadValues(element, "alignContent", "align-content", "baseline safe");
checkBadValues(element, "alignContent", "align-content", "unsafe baseline");
checkBadValues(element, "alignContent", "align-content", "unsafe safe left");
checkBadValues(element, "alignContent", "align-content", "unsafe left safe");
checkBadValues(element, "alignContent", "align-content", "left safe unsafe safe");
checkBadValues(element, "alignContent", "align-content", "start right space-between");
checkBadValues(element, "alignContent", "align-content", "safe stretch");
checkBadValues(element, "alignContent", "align-content", "normal space-between");
checkBadValues(element, "alignContent", "align-content", "stretch normal");
checkBadValues(element, "alignContent", "align-content", "stretch center");
checkBadValues(element, "alignContent", "align-content", "space-between right safe");
checkBadValues(element, "alignContent", "align-content", "normal safe");
checkBadValues(element, "alignContent", "align-content", "space-around stretch");
checkBadValues(element, "alignContent", "align-content", "end space-between start");
checkBadValues(element, "alignContent", "align-content", "right safe left");
checkBadValues(element, "alignContent", "align-content", "unsafe");
checkBadValues(element, "alignContent", "align-content", "safe");
checkBadValues(element, "alignContent", "align-content", "start safe");
checkBadValues(element, "alignContent", "align-content", "end unsafe");
}, "Test bad combinations of align-content");
test(function() {
element.style.display = "";
checkInitialValues(element, "alignContent", "align-content", "center", "normal");
}, "Test the value 'initial'");
test(function() {
element.style.display = "grid";
checkInitialValues(element, "alignContent", "align-content", "safe start", "normal");
}, "Test the value 'initial' for grid containers");
test(function() {
element.style.display = "flex";
checkInitialValues(element, "alignContent", "align-content", "unsafe end", "normal");
}, "Test the value 'initial' for flex containers");
test(function() {
checkInheritValues("alignContent", "align-content", "end");
checkInheritValues("alignContent", "align-content", "safe start");
checkInheritValues("alignContent", "align-content", "unsafe center");
}, "Test the value 'inherit'");
</script>