329 lines
14 KiB
HTML
329 lines
14 KiB
HTML
<!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>
|