blob: e7a8bbff9a3cb072e80d32e4725cdd3d4217249c [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
#placeItemsNormal {
place-items: normal;
}
#placeItemsBaseline {
place-items: baseline;
}
#placeItemsFirstBaseline {
place-items: first baseline;
}
#placeItemsLastBaseline {
place-items: last baseline;
}
#placeItemsStart {
place-items: start;
}
#placeItemsFlexStart {
place-items: flex-start;
}
#placeItemsEnd {
place-items: end;
}
#placeItemsSelfStart {
place-items: self-start;
}
#placeItemsStretch {
place-items: stretch;
}
#placeItemsStartEnd {
place-items: start end;
}
#placeItemsStartSelfEnd {
place-items: start self-end;
}
#placeItemsStartBaseline {
place-items: start baseline;
}
<!-- Invalid CSS cases -->
#placeItemsEmpty {
place-items:;
}
#placeItemsAuto {
place-items: auto;
}
#placeItemsCenterAuto {
place-items: center auto;
}
#placeItemsNone {
place-items: none;
}
#placeItemsSafe {
place-items: safe;
}
#placeItemsStartSafe {
place-items: start safe;
}
#placeItemsBaselineSafe {
place-items: baseline safe;
}
#placeItemsStartEndLeft {
place-items: start end left;
}
</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-items alignment shorthand is parsed as expected and correctly sets the longhand values.</p>
<div id="log"></div>
<div id="placeItemsNormal"></div>
<div id="placeItemsBaseline"></div>
<div id="placeItemsFirstBaseline"></div>
<div id="placeItemsLastBaseline"></div>
<div id="placeItemsStart"></div>
<div id="placeItemsFlexStart"></div>
<div id="placeItemsEnd"></div>
<div id="placeItemsSelfStart"></div>
<div id="placeItemsStretch"></div>
<div id="placeItemsStartEnd"></div>
<div id="placeItemsStartSelfEnd"></div>
<div id="placeItemsStartBaseline"></div>
<div id="placeItemsEmpty"></div>
<div id="placeItemsAuto"></div>
<div id="placeItemsCenterAuto"></div>
<div id="placeItemsNone"></div>
<div id="placeItemsSafe"></div>
<div id="placeItemsStartSafe"></div>
<div id="placeItemsBaselineSafe"></div>
<div id="placeItemsStartEndLeft"></div>
<script>
function checkPlaceItemsValues(element, value, alignValue, justifyValue) {
var res = value.split(" ");
if (res.length < 2)
res[1] = res[0];
checkValues(element, "alignItems", "align-items", res[0], alignValue);
checkValues(element, "justifyItems", "justify-items", res[1], justifyValue);
}
function checkPlaceItemsValuesJS(value, alignValue, justifyValue)
{
element = document.createElement("div");
document.body.appendChild(element);
element.style.placeItems = value;
checkValues(element, "placeItems", "place-items", value, alignValue + ' ' + justifyValue)
checkPlaceItemsValues(element, value, alignValue, justifyValue)
}
function checkPlaceItemsValuesBadJS(value)
{
element.style.placeItems = "";
element.style.placeItems = value;
checkPlaceItemsValues(element, "", "normal", "normal")
}
test(function() {
checkValues(placeItemsNormal, "placeItems", "place-items", "", "normal normal");
checkPlaceItemsValues(placeItemsNormal, "", "normal", "normal");
}, "Test getting the Computed Value of place-items's longhand properties when setting 'normal' value through CSS.");
test(function() {
checkValues(placeItemsBaseline, "placeItems", "place-items", "", "baseline baseline");
checkPlaceItemsValues(placeItemsBaseline, "", "baseline", "baseline");
}, "Test getting the Computed Value of place-items's longhand properties when setting 'baseline' value through CSS.");
test(function() {
checkValues(placeItemsFirstBaseline, "placeItems", "place-items", "", "baseline baseline");
checkPlaceItemsValues(placeItemsFirstBaseline, "", "baseline", "baseline");
}, "Test getting the Computed Value of place-items's longhand properties when setting 'first baseline' value through CSS.");
test(function() {
checkValues(placeItemsLastBaseline, "placeItems", "place-items", "", "last baseline last baseline");
checkPlaceItemsValues(placeItemsLastBaseline, "", "last baseline", "last baseline");
}, "Test getting the Computed Value of place-items's longhand properties when setting 'last baseline' value through CSS.");
test(function() {
checkValues(placeItemsStart, "placeItems", "place-items", "", "start start");
checkPlaceItemsValues(placeItemsStart, "", "start", "start");
}, "Test getting the Computed Value of place-items's longhand properties when setting 'start' value through CSS.");
test(function() {
checkValues(placeItemsFlexStart, "placeItems", "place-items", "", "flex-start flex-start");
checkPlaceItemsValues(placeItemsFlexStart, "", "flex-start", "flex-start");
}, "Test getting the Computed Value of place-items's longhand properties when setting 'flex-start' value through CSS.");
test(function() {
checkValues(placeItemsEnd, "placeItems", "place-items", "", "end end");
checkPlaceItemsValues(placeItemsEnd, "", "end", "end");
}, "Test getting the Computed Value of place-items's longhand properties when setting 'end' value through CSS.");
test(function() {
checkValues(placeItemsSelfStart, "placeItems", "place-items", "", "self-start self-start");
checkPlaceItemsValues(placeItemsSelfStart, "", "self-start", "self-start");
}, "Test getting the Computed Value of place-items's longhand properties when setting 'self-start' value through CSS.");
test(function() {
checkValues(placeItemsStretch, "placeItems", "place-items", "", "stretch stretch");
checkPlaceItemsValues(placeItemsStretch, "", "stretch", "stretch");
}, "Test getting the Computed Value of place-items's longhand properties when setting 'stretch' value through CSS.");
test(function() {
checkValues(placeItemsStartEnd, "placeItems", "place-items", "", "start end");
checkPlaceItemsValues(placeItemsStartEnd, "", "start", "end");
}, "Test getting the Computed Value of place-items's longhand properties when setting 'start end' value through CSS.");
test(function() {
checkValues(placeItemsStartSelfEnd, "placeItems", "place-items", "", "start self-end");
checkPlaceItemsValues(placeItemsStartSelfEnd, "", "start", "self-end");
}, "Test getting the Computed Value of place-items's longhand properties when setting 'start self-end' value through CSS.");
test(function() {
checkValues(placeItemsStartBaseline, "placeItems", "place-items", "", "start baseline");
checkPlaceItemsValues(placeItemsStartBaseline, "", "start", "baseline");
}, "Test getting the Computed Value of place-items's longhand properties when setting 'start baseline' value through CSS.");
test(function() {
checkValues(placeItemsAuto, "placeItems", "place-items", "", "normal normal");
checkPlaceItemsValues(placeItemsAuto, "", "normal", "normal");
}, "Test setting 'auto' as incorrect value through CSS.");
test(function() {
checkValues(placeItemsCenterAuto, "placeItems", "place-items", "", "normal normal");
checkPlaceItemsValues(placeItemsCenterAuto, "", "normal", "normal");
}, "Test setting 'center auto' as incorrect value through CSS.");
test(function() {
checkValues(placeItemsNone, "placeItems", "place-items", "", "normal normal");
checkPlaceItemsValues(placeItemsNone, "", "normal", "normal");
}, "Test setting 'none' as incorrect value through CSS.");
test(function() {
checkValues(placeItemsSafe, "placeItems", "place-items", "", "normal normal");
checkPlaceItemsValues(placeItemsSafe, "", "normal", "normal");
}, "Test setting 'safe' as incorrect value through CSS.");
test(function() {
checkValues(placeItemsStartSafe, "placeItems", "place-items", "", "normal normal");
checkPlaceItemsValues(placeItemsStartSafe, "", "normal", "normal");
}, "Test setting 'start safe' as incorrect value through CSS.");
test(function() {
checkValues(placeItemsBaselineSafe, "placeItems", "place-items", "", "normal normal");
checkPlaceItemsValues(placeItemsBaselineSafe, "", "normal", "normal");
}, "Test setting 'baseline safe' as incorrect value through CSS.");
test(function() {
checkValues(placeItemsStartEndLeft, "placeItems", "place-items", "", "normal normal");
checkPlaceItemsValues(placeItemsStartEndLeft, "", "normal", "normal");
}, "Test setting 'start end left' as incorrect value through CSS.");
test(function() {
checkPlaceItemsValuesJS("center", "center", "center");
checkPlaceItemsValuesJS("center start", "center", "start");
checkPlaceItemsValuesJS("self-start end", "self-start", "end");
checkPlaceItemsValuesJS("normal end", "normal", "end");
}, "Test setting values through JS.");
test(function() {
checkPlaceItemsValuesBadJS("auto");
checkPlaceItemsValuesBadJS("auto normal");
checkPlaceItemsValuesBadJS("center auto");
checkPlaceItemsValuesBadJS("legacy");
checkPlaceItemsValuesBadJS("left legacy");
checkPlaceItemsValuesBadJS("space-between");
checkPlaceItemsValuesBadJS("center safe");
checkPlaceItemsValuesBadJS("center self-start center");
checkPlaceItemsValuesBadJS("asrt", "normal");
checkPlaceItemsValuesBadJS("auto", "normal");
checkPlaceItemsValuesBadJS("10px", "normal");
checkPlaceItemsValuesBadJS("stretch safe");
checkPlaceItemsValuesBadJS("self-start start end");
checkPlaceItemsValuesBadJS("");
}, "Test setting incorrect values through JS.");
test(function() {
element = document.createElement("div");
document.body.appendChild(element);
checkValues(element, "placeItems", "place-items", "", "normal normal");
element.style.placeItems = "center";
checkPlaceItemsValues(element, "center", "center", "center");
element.style.placeItems = "initial";
checkValues(element, "placeItems", "place-items", "initial", "normal normal");
checkPlaceItemsValues(element, "initial", "normal", "normal");
}, "Test the 'initial' value of the place-items shorthand and its longhand properties' Computed value");
test(function() {
document.body.style.placeItems = "start";
var anotherElement = document.createElement("div");
document.body.appendChild(anotherElement);
checkPlaceItemsValues(anotherElement, "", "normal", "normal");
anotherElement.style.placeItems = "inherit";
checkPlaceItemsValues(anotherElement, "inherit", "start", "start");
}, "Test the 'inherit' value of the place-items shorthand and its longhand properties' Computed value");
</script>
</body>
</html>