356 lines
16 KiB
HTML
356 lines
16 KiB
HTML
<!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>
|