258 lines
10 KiB
HTML
258 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
#placeContentNormal {
|
|
place-content: normal;
|
|
}
|
|
#placeContentStart {
|
|
place-content: start;
|
|
}
|
|
#placeContentFlexStart {
|
|
place-content: flex-start;
|
|
}
|
|
#placeContentEnd {
|
|
place-content: end;
|
|
}
|
|
#placeContentSpaceBetween {
|
|
place-content: space-between;
|
|
}
|
|
#placeContentStretch {
|
|
place-content: stretch;
|
|
}
|
|
#placeContentStartEnd {
|
|
place-content: start end;
|
|
}
|
|
#placeContentStartSpaceEvenly {
|
|
place-content: start space-evenly;
|
|
}
|
|
#placeContentBaselineStart {
|
|
place-content: baseline start;
|
|
}
|
|
|
|
<!-- Invalid CSS cases -->
|
|
#placeContentEmpty {
|
|
place-content:;
|
|
}
|
|
#placeContentAuto {
|
|
place-content: auto;
|
|
}
|
|
#placeContentNone {
|
|
place-content: none;
|
|
}
|
|
#placeContentSafe {
|
|
place-content: safe;
|
|
}
|
|
#placeContentStartSafe {
|
|
place-content: start safe;
|
|
}
|
|
#placeContentBaselineSafe {
|
|
place-content: baseline safe;
|
|
}
|
|
#placeContentStartEndLeft {
|
|
place-content: start end left;
|
|
}
|
|
#placeContentBaseline {
|
|
place-content: baseline;
|
|
}
|
|
#placeContentStartBaseline {
|
|
place-content: start baseline;
|
|
}
|
|
</style>
|
|
<script src="../resources/testharness.js"></script>
|
|
<script src="../resources/testharnessreport.js"></script>
|
|
<script src="resources/alignment-parsing-utils-th.js"></script>
|
|
</head>
|
|
<body>
|
|
<p>Test to verify that the new place-content alignment shorthand is parsed as expected and correctly sets the longhand values.</p>
|
|
<div id="log"></div>
|
|
|
|
<div id="placeContentNormal"></div>
|
|
<div id="placeContentStart"></div>
|
|
<div id="placeContentFlexStart"></div>
|
|
<div id="placeContentEnd"></div>
|
|
<div id="placeContentSpaceBetween"></div>
|
|
<div id="placeContentStretch"></div>
|
|
<div id="placeContentStartEnd"></div>
|
|
<div id="placeContentStartSpaceEvenly"></div>
|
|
<div id="placeContentBaselineStart"></div>
|
|
|
|
<div id="placeContentEmpty"></div>
|
|
<div id="placeContentAuto"></div>
|
|
<div id="placeContentNone"></div>
|
|
<div id="placeContentSafe"></div>
|
|
<div id="placeContentStartSafe"></div>
|
|
<div id="placeContentBaselineSafe"></div>
|
|
<div id="placeContentStartEndLeft"></div>
|
|
<div id="placeContentBaseline"></div>
|
|
<div id="placeContentStartBaseline"></div>
|
|
<script>
|
|
function checkPlaceContentValues(element, value, alignValue, justifyValue)
|
|
{
|
|
var res = value.split(" ");
|
|
if (res.length < 2)
|
|
res[1] = res[0];
|
|
checkValues(element, "alignContent", "align-content", res[0], alignValue);
|
|
checkValues(element, "justifyContent", "justify-content", res[1], justifyValue);
|
|
}
|
|
|
|
function checkPlaceContentValuesJS(value, alignValue, justifyValue)
|
|
{
|
|
element = document.createElement("div");
|
|
document.body.appendChild(element);
|
|
element.style.placeContent = value;
|
|
checkValues(element, "placeContent", "place-content", value, alignValue + ' ' + justifyValue)
|
|
checkPlaceContentValues(element, value, alignValue, justifyValue)
|
|
}
|
|
|
|
function checkPlaceContentValuesBadJS(value)
|
|
{
|
|
element.style.placeContent = "";
|
|
element.style.placeContent = value;
|
|
checkPlaceContentValues(element, "", "normal", "normal")
|
|
}
|
|
|
|
function checkPlaceContentInitialValue()
|
|
{
|
|
element = document.createElement("div");
|
|
document.body.appendChild(element);
|
|
checkValues(element, "placeContent", "place-content", "", "normal normal");
|
|
element.style.placeContent = "center";
|
|
checkPlaceContentValues(element, "center", "center", "center");
|
|
element.style.placeContent = "initial";
|
|
checkValues(element, "placeContent", "place-content", "initial", "normal normal");
|
|
checkPlaceContentValues(element, "initial", "normal", "normal");
|
|
}
|
|
|
|
function checkPlaceContentInheritValue()
|
|
{
|
|
document.body.style.placeContent = "start";
|
|
var anotherElement = document.createElement("div");
|
|
document.body.appendChild(anotherElement);
|
|
checkPlaceContentValues(anotherElement, "", "normal", "normal");
|
|
anotherElement.style.placeContent = "inherit";
|
|
checkPlaceContentValues(anotherElement, "inherit", "start", "start");
|
|
}
|
|
|
|
|
|
test(function() {
|
|
checkValues(placeContentNormal, "placeContent", "place-content", "", "normal normal");
|
|
checkPlaceContentValues(placeContentNormal, "", "normal", "normal");
|
|
}, "Test getting the Computed Value of place-content's longhand properties when setting 'normal' value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeContentStart, "placeContent", "place-content", "", "start start");
|
|
checkPlaceContentValues(placeContentStart, "", "start", "start");
|
|
}, "Test getting the Computed Value of place-content's longhand properties when setting 'start' value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeContentFlexStart, "placeContent", "place-content", "", "flex-start flex-start");
|
|
checkPlaceContentValues(placeContentFlexStart, "", "flex-start", "flex-start");
|
|
}, "Test getting the Computed Value of place-content's longhand properties when setting 'flex-start' value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeContentEnd, "placeContent", "place-content", "", "end end");
|
|
checkPlaceContentValues(placeContentEnd, "", "end", "end");
|
|
}, "Test getting the Computed Value of place-content's longhand properties when setting 'end' value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeContentSpaceBetween, "placeContent", "place-content", "", "space-between space-between");
|
|
checkPlaceContentValues(placeContentSpaceBetween, "", "space-between", "space-between");
|
|
}, "Test getting the Computed Value of place-content's longhand properties when setting 'space-between' value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeContentStretch, "placeContent", "place-content", "", "stretch stretch");
|
|
checkPlaceContentValues(placeContentStretch, "", "stretch", "stretch");
|
|
}, "Test getting the Computed Value of place-content's longhand properties when setting 'stretch' value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeContentStartEnd, "placeContent", "place-content", "", "start end");
|
|
checkPlaceContentValues(placeContentStartEnd, "", "start", "end");
|
|
}, "Test getting the Computed Value of place-content's longhand properties when setting 'start end' value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeContentStartSpaceEvenly, "placeContent", "place-content", "", "start space-evenly");
|
|
checkPlaceContentValues(placeContentStartSpaceEvenly, "", "start", "space-evenly");
|
|
}, "Test getting the Computed Value of place-content's longhand properties when setting 'start space-evenly' value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeContentBaselineStart, "placeContent", "place-content", "", "baseline start");
|
|
checkPlaceContentValues(placeContentBaselineStart, "", "baseline", "start");
|
|
}, "Test getting the Computed Value of place-content's longhand properties when setting 'baseline start' value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeContentAuto, "placeContent", "place-content", "", "normal normal");
|
|
checkPlaceContentValues(placeContentAuto, "", "normal", "normal");
|
|
}, "Test setting '' as incorrect value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeContentAuto, "placeContent", "place-content", "", "normal normal");
|
|
checkPlaceContentValues(placeContentAuto, "", "normal", "normal");
|
|
}, "Test setting 'auto' as incorrect value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeContentNone, "placeContent", "place-content", "", "normal normal");
|
|
checkPlaceContentValues(placeContentNone, "", "normal", "normal");
|
|
}, "Test setting 'none' as incorrect value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeContentSafe, "placeContent", "place-content", "", "normal normal");
|
|
checkPlaceContentValues(placeContentSafe, "", "normal", "normal");
|
|
}, "Test setting 'safe' as incorrect value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeContentStartSafe, "placeContent", "place-content", "", "normal normal");
|
|
checkPlaceContentValues(placeContentStartSafe, "", "normal", "normal");
|
|
}, "Test setting 'start safe' as incorrect value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeContentBaseline, "placeContent", "place-content", "", "normal normal");
|
|
checkPlaceContentValues(placeContentBaseline, "", "normal", "normal");
|
|
}, "Test setting 'baseline' as incorrect value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeContentBaselineSafe, "placeContent", "place-content", "", "normal normal");
|
|
checkPlaceContentValues(placeContentBaselineSafe, "", "normal", "normal");
|
|
}, "Test setting 'baseline safe' as incorrect value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeContentStartBaseline, "placeContent", "place-content", "", "normal normal");
|
|
checkPlaceContentValues(placeContentStartBaseline, "", "normal", "normal");
|
|
}, "Test setting 'start baseline' as incorrect value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeContentStartEndLeft, "placeContent", "place-content", "", "normal normal");
|
|
checkPlaceContentValues(placeContentStartEndLeft, "", "normal", "normal");
|
|
}, "Test setting 'start end left' as incorrect value through CSS.");
|
|
|
|
test(function() {
|
|
checkPlaceContentValuesJS("center", "center", "center");
|
|
checkPlaceContentValuesJS("center start", "center", "start");
|
|
checkPlaceContentValuesJS("space-between end", "space-between", "end");
|
|
checkPlaceContentValuesJS("normal end", "normal", "end");
|
|
}, "Test setting values through JS.");
|
|
|
|
test(function() {
|
|
checkPlaceContentValuesBadJS("center safe", "normal", "normal");
|
|
checkPlaceContentValuesBadJS("center space-between center", "normal", "normal");
|
|
checkPlaceContentValuesBadJS("asrt", "normal", "normal");
|
|
checkPlaceContentValuesBadJS("auto", "normal", "normal");
|
|
checkPlaceContentValuesBadJS("10px", "normal", "normal");
|
|
checkPlaceContentValuesBadJS("stretch safe", "normal", "normal");
|
|
checkPlaceContentValuesBadJS("space-between start end", "normal", "normal");
|
|
checkPlaceContentValuesBadJS("", "normal", "normal");
|
|
}, "Test setting incorrect values through JS.");
|
|
|
|
test(function() {
|
|
checkPlaceContentInitialValue();
|
|
}, "Test the 'initial' value of the place-content shorthand and its longhand properties' Computed value");
|
|
|
|
test(function() {
|
|
checkPlaceContentInheritValue();
|
|
}, "Test the 'inherit' value of the place-content shorthand and its longhand properties' Computed value");
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|