blob: 8215dea3ef4715f9962228e64b89e354fb32fe36 [file] [log] [blame]
<!DOCTYPE html>
<style>
#justifyContentAuto {
justify-content: auto;
}
#justifyContentSpaceBetween {
justify-content: space-between;
}
#justifyContentSpaceAround {
justify-content: space-around;
}
#justifyContentSpaceEvenly {
justify-content: space-evenly;
}
#justifyContentStretch {
justify-content: stretch;
}
#justifyContentStart {
justify-content: start;
}
#justifyContentEnd {
justify-content: end;
}
#justifyContentCenter {
justify-content: center;
}
#justifyContentLeft {
justify-content: left;
}
#justifyContentRight {
justify-content: right;
}
#justifyContentFlexStart {
justify-content: flex-start;
}
#justifyContentFlexEnd {
justify-content: flex-end;
}
#justifyContentUnsafeEnd {
justify-content: unsafe end ;
}
#justifyContentUnsafeCenter {
justify-content: unsafe center ;
}
#justifyContentSafeRight {
justify-content: safe right;
}
#justifyContentUnsafeLeft {
justify-content: unsafe left;
}
#justifyContentUnsafeFlexStart {
justify-content: unsafe flex-start;
}
#justifyContentSafeFlexEnd {
justify-content: safe flex-end;
}
<!-- Invalid CSS cases -->
#justifyContentBaseline {
justify-content: baseline;
}
#justifyContentFirstBaseline {
justify-content: first baseline;
}
#justifyContentLastBaseline {
justify-content: last baseline;
}
#justifyContentSpaceBetweenLeft {
justify-content: space-between left;
}
#justifyContentSpaceAroundCenter {
justify-content: space-around center;
}
#justifyContentSpaceEvenlyRight {
justify-content: space-evenly right;
}
#justifyContentStretchStartSafe {
justify-content: stretch start safe;
}
#justifyContentSpaceAroundEndUnsafe {
justify-content: space-around end unsafe;
}
#justifyContentSpaceEvenlyFlexStartSafe {
justify-content: space-evenly flex-start safe;
}
#justifyContentSpaceBetweenSafe {
justify-content: space-between safe;
}
#justifyContentSpaceBetweenStretch {
justify-content: space-between stretch;
}
#justifyContentSafe {
justify-content: safe;
}
#justifyContentRightSafeUnsafe {
justify-content: right safe unsafe;
}
#justifyContentCenterLeft {
justify-content: center left;
}
</style>
<p>Test that setting and getting justify-content works as expected</p>
<div id="justifyContentAuto"></div>
<div id="justifyContentSpaceBetween"></div>
<div id="justifyContentSpaceAround"></div>
<div id="justifyContentSpaceEvenly"></div>
<div id="justifyContentStretch"></div>
<div id="justifyContentStart"></div>
<div id="justifyContentEnd"></div>
<div id="justifyContentCenter"></div>
<div id="justifyContentLeft"></div>
<div id="justifyContentRight"></div>
<div id="justifyContentFlexStart"></div>
<div id="justifyContentFlexEnd"></div>
<div id="justifyContentUnsafeEnd"></div>
<div id="justifyContentUnsafeCenter"></div>
<div id="justifyContentSafeSelfEnd"></div>
<div id="justifyContentSafeSelfStart"></div>
<div id="justifyContentSafeRight"></div>
<div id="justifyContentUnsafeLeft"></div>
<div id="justifyContentUnsafeFlexStart"></div>
<div id="justifyContentSafeFlexEnd"></div>
<div id="justifyContentEndUnsafe"></div>
<div id="justifyContentCenterUnsafe"></div>
<div id="justifyContentRightSafe"></div>
<div id="justifyContentLeftUnsafe"></div>
<div id="justifyContentFlexStartUnsafe"></div>
<div id="justifyContentFlexEndSafe"></div>
<div id="justifyContentBaseline"></div>
<div id="justifyContentFirstBaseline"></div>
<div id="justifyContentLastBaseline"></div>
<div id="justifyContentSpaceBetweenLeft"></div>
<div id="justifyContentSpaceAroundCenter"></div>
<div id="justifyContentSpaceEvenlyRight"></div>
<div id="justifyContentStretchStartSafe"></div>
<div id="justifyContentSpaceAroundEndUnsafe"></div>
<div id="justifyContentSpaceEvenlyFlexStartSafe"></div>
<div id="justifyContentSpaceBetweenSafe"></div>
<div id="justifyContentSpaceBetweenStretch"></div>
<div id="justifyContentSafe"></div>
<div id="justifyContentRightSafeUnsafe"></div>
<div id="justifyContentCenterLeft"></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 justifyContentAuto = document.getElementById("justifyContentAuto");
checkValues(justifyContentAuto, "justifyContent", "justify-content", "", "normal");
var justifyContentSpaceBetween = document.getElementById("justifyContentSpaceBetween");
checkValues(justifyContentSpaceBetween, "justifyContent", "justify-content", "", "space-between");
var justifyContentSpaceAround = document.getElementById("justifyContentSpaceAround");
checkValues(justifyContentSpaceAround, "justifyContent", "justify-content", "", "space-around");
var justifyContentSpaceEvenly = document.getElementById("justifyContentSpaceEvenly");
checkValues(justifyContentSpaceEvenly, "justifyContent", "justify-content", "", "space-evenly");
var justifyContentStretch = document.getElementById("justifyContentStretch");
checkValues(justifyContentStretch, "justifyContent", "justify-content", "", "stretch");
var justifyContentStart = document.getElementById("justifyContentStart");
checkValues(justifyContentStart, "justifyContent", "justify-content", "", "start");
var justifyContentEnd = document.getElementById("justifyContentEnd");
checkValues(justifyContentEnd, "justifyContent", "justify-content", "", "end");
var justifyContentCenter = document.getElementById("justifyContentCenter");
checkValues(justifyContentCenter, "justifyContent", "justify-content", "", "center");
var justifyContentLeft = document.getElementById("justifyContentLeft");
checkValues(justifyContentLeft, "justifyContent", "justify-content", "", "left");
var justifyContentRight = document.getElementById("justifyContentRight");
checkValues(justifyContentRight, "justifyContent", "justify-content", "", "right");
var justifyContentFlexStart = document.getElementById("justifyContentFlexStart");
checkValues(justifyContentFlexStart, "justifyContent", "justify-content", "", "flex-start");
var justifyContentFlexEnd = document.getElementById("justifyContentFlexEnd");
checkValues(justifyContentFlexEnd, "justifyContent", "justify-content", "", "flex-end");
var justifyContentUnsafeEnd = document.getElementById("justifyContentUnsafeEnd");
checkValues(justifyContentUnsafeEnd, "justifyContent", "justify-content", "", "unsafe end");
var justifyContentUnsafeCenter = document.getElementById("justifyContentUnsafeCenter");
checkValues(justifyContentUnsafeCenter, "justifyContent", "justify-content", "", "unsafe center");
var justifyContentSafeRight = document.getElementById("justifyContentSafeRight");
checkValues(justifyContentSafeRight, "justifyContent", "justify-content", "", "safe right");
var justifyContentUnsafeLeft = document.getElementById("justifyContentUnsafeLeft");
checkValues(justifyContentUnsafeLeft, "justifyContent", "justify-content", "", "unsafe left");
var justifyContentUnsafeFlexStart = document.getElementById("justifyContentUnsafeFlexStart");
checkValues(justifyContentUnsafeFlexStart, "justifyContent", "justify-content", "", "unsafe flex-start");
var justifyContentSafeFlexEnd = document.getElementById("justifyContentSafeFlexEnd");
checkValues(justifyContentSafeFlexEnd, "justifyContent", "justify-content", "", "safe flex-end");
}, "Test getting justify-content values previously set through CSS.");
test(function() {
var justifyContentBaseline = document.getElementById("justifyContentBaseline");
checkValues(justifyContentBaseline, "justifyContent", "justify-content", "", "normal");
var justifyContentLastBaseline = document.getElementById("justifyContentFirstBaseline");
checkValues(justifyContentLastBaseline, "justifyContent", "justify-content", "", "normal");
var justifyContentLastBaseline = document.getElementById("justifyContentLastBaseline");
checkValues(justifyContentLastBaseline, "justifyContent", "justify-content", "", "normal");
var justifyContentEndUnsafe = document.getElementById("justifyContentEndUnsafe");
checkValues(justifyContentEndUnsafe, "justifyContent", "justify-content", "", "normal");
var justifyContentCenterUnsafe = document.getElementById("justifyContentCenterUnsafe");
checkValues(justifyContentCenterUnsafe, "justifyContent", "justify-content", "", "normal");
var justifyContentRightSafe = document.getElementById("justifyContentRightSafe");
checkValues(justifyContentRightSafe, "justifyContent", "justify-content", "", "normal");
var justifyContentLeftUnsafe = document.getElementById("justifyContentLeftUnsafe");
checkValues(justifyContentLeftUnsafe, "justifyContent", "justify-content", "", "normal");
var justifyContentFlexStartUnsafe = document.getElementById("justifyContentFlexStartUnsafe");
checkValues(justifyContentFlexStartUnsafe, "justifyContent", "justify-content", "", "normal");
var justifyContentFlexEndSafe = document.getElementById("justifyContentFlexEndSafe");
checkValues(justifyContentFlexEndSafe, "justifyContent", "justify-content", "", "normal");
var justifyContentSpaceBetweenLeft = document.getElementById("justifyContentSpaceBetweenLeft");
checkValues(justifyContentSpaceBetweenLeft, "justifyContent", "justify-content", "", "normal");
var justifyContentSpaceAroundCenter = document.getElementById("justifyContentSpaceAroundCenter");
checkValues(justifyContentSpaceAroundCenter, "justifyContent", "justify-content", "", "normal");
var justifyContentSpaceEvenlyRight = document.getElementById("justifyContentSpaceEvenlyRight");
checkValues(justifyContentSpaceEvenlyRight, "justifyContent", "justify-content", "", "normal");
var justifyContentStretchStartSafe = document.getElementById("justifyContentStretchStartSafe");
checkValues(justifyContentStretchStartSafe, "justifyContent", "justify-content", "", "normal");
var justifyContentSpaceAroundEndUnsafe = document.getElementById("justifyContentSpaceAroundEndUnsafe");
checkValues(justifyContentSpaceAroundEndUnsafe, "justifyContent", "justify-content", "", "normal");
var justifyContentSpaceEvenlyFlexStartSafe = document.getElementById("justifyContentSpaceEvenlyFlexStartSafe");
checkValues(justifyContentSpaceEvenlyFlexStartSafe, "justifyContent", "justify-content", "", "normal");
var justifyContentSpaceBetweenSafe = document.getElementById("justifyContentSpaceBetweenSafe");
checkValues(justifyContentSpaceBetweenSafe, "justifyContent", "justify-content", "", "normal");
var justifyContentSpaceBetweenStretch = document.getElementById("justifyContentSpaceBetweenStretch");
checkValues(justifyContentSpaceBetweenStretch, "justifyContent", "justify-content", "", "normal");
var justifyContentSafe = document.getElementById("justifyContentSafe");
checkValues(justifyContentSafe, "justifyContent", "justify-content", "", "normal");
var justifyContentRightSafeUnsafe = document.getElementById("justifyContentRightSafeUnsafe");
checkValues(justifyContentRightSafeUnsafe, "justifyContent", "justify-content", "", "normal");
var justifyContentCenterLeft = document.getElementById("justifyContentCenterLeft");
checkValues(justifyContentCenterLeft, "justifyContent", "justify-content", "", "normal");
}, "Test setting invalid values to justify-content through CSS.");
test(function() {
element = document.createElement("div");
document.body.appendChild(element);
checkValues(element, "justifyContent", "justify-content", "", "normal");
}, "Test initial value of justify-content through JS");
test(function() {
element = document.createElement("div");
document.body.appendChild(element);
element.style.justifyContent = "center";
checkValues(element, "justifyContent", "justify-content", "center", "center");
element.style.justifyContent = "unsafe start";
checkValues(element, "justifyContent", "justify-content", "unsafe start", "unsafe start");
element.style.justifyContent = "safe flex-end";
checkValues(element, "justifyContent", "justify-content", "safe flex-end", "safe flex-end");
element.style.justifyContent = " unsafe right";
checkValues(element, "justifyContent", "justify-content", "unsafe right", "unsafe right");
element.style.justifyContent = "normal";
checkValues(element, "justifyContent", "justify-content", "normal", "normal");
element.style.display = "flex";
element.style.justifyContent = "normal";
checkValues(element, "justifyContent", "justify-content", "normal", "normal");
element.style.display = "grid";
element.style.justifyContent = "normal";
checkValues(element, "justifyContent", "justify-content", "normal", "normal");
element.style.justifyContent = "flex-end";
checkValues(element, "justifyContent", "justify-content", "flex-end", "flex-end");
}, "Test getting and setting justify-content through JS");
test(function() {
element = document.createElement("div");
document.body.appendChild(element);
checkBadValues(element, "justifyContent", "justify-content", "");
checkBadValues(element, "justifyContent", "justify-content", "auto");
checkBadValues(element, "justifyContent", "justify-content", "unsafe auto");
checkBadValues(element, "justifyContent", "justify-content", "auto safe");
checkBadValues(element, "justifyContent", "justify-content", "auto left");
checkBadValues(element, "justifyContent", "justify-content", "baseline safe");
checkBadValues(element, "justifyContent", "justify-content", "last-baseline center");
checkBadValues(element, "justifyContent", "justify-content", "unsafe unsafe");
checkBadValues(element, "justifyContent", "justify-content", "unsafe safe");
checkBadValues(element, "justifyContent", "justify-content", "center start");
checkBadValues(element, "justifyContent", "justify-content", "baseline safe");
checkBadValues(element, "justifyContent", "justify-content", "unsafe baseline");
checkBadValues(element, "justifyContent", "justify-content", "unsafe safe left");
checkBadValues(element, "justifyContent", "justify-content", "unsafe left safe");
checkBadValues(element, "justifyContent", "justify-content", "left safe unsafe safe");
checkBadValues(element, "justifyContent", "justify-content", "start right space-between");
checkBadValues(element, "justifyContent", "justify-content", "safe stretch");
checkBadValues(element, "justifyContent", "justify-content", "normal space-between");
checkBadValues(element, "justifyContent", "justify-content", "stretch normal");
checkBadValues(element, "justifyContent", "justify-content", "stretch center");
checkBadValues(element, "justifyContent", "justify-content", "space-between right safe");
checkBadValues(element, "justifyContent", "justify-content", "normal safe");
checkBadValues(element, "justifyContent", "justify-content", "space-around stretch");
checkBadValues(element, "justifyContent", "justify-content", "end space-between start");
checkBadValues(element, "justifyContent", "justify-content", "right safe left");
checkBadValues(element, "justifyContent", "justify-content", "unsafe");
checkBadValues(element, "justifyContent", "justify-content", "safe");
checkBadValues(element, "justifyContent", "justify-content", "start safe");
checkBadValues(element, "justifyContent", "justify-content", "end unsafe");
checkBadValues(element, "justifyContent", "justify-content", "baseline");
checkBadValues(element, "justifyContent", "justify-content", "first baseline");
checkBadValues(element, "justifyContent", "justify-content", "last baseline");
}, "Test bad combinations of justify-content");
test(function() {
element.style.display = "";
checkInitialValues(element, "justifyContent", "justify-content", "center", "normal");
}, "Test the value 'initial'");
test(function() {
element.style.display = "grid";
checkInitialValues(element, "justifyContent", "justify-content", "safe left", "normal");
}, "Test the value 'initial' for grid containers");
test(function() {
element.style.display = "flex";
checkInitialValues(element, "justifyContent", "justify-content", "unsafe right", "normal");
}, "Test the value 'initial' for flex containers");
test(function() {
checkInheritValues("justifyContent", "justify-content", "end");
checkInheritValues("justifyContent", "justify-content", "safe left");
checkInheritValues("justifyContent", "justify-content", "unsafe center");
}, "Test the value 'inherit'");
</script>