2017-04-05 20:44:10 +00:00
|
|
|
<!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;
|
|
|
|
|
}
|
2018-02-09 14:57:12 +00:00
|
|
|
#placeItemsCenterAuto {
|
|
|
|
|
place-items: center auto;
|
|
|
|
|
}
|
2017-04-05 20:44:10 +00:00
|
|
|
#placeItemsNone {
|
|
|
|
|
place-items: none;
|
|
|
|
|
}
|
|
|
|
|
#placeItemsSafe {
|
|
|
|
|
place-items: safe;
|
|
|
|
|
}
|
|
|
|
|
#placeItemsStartSafe {
|
|
|
|
|
place-items: start safe;
|
|
|
|
|
}
|
2017-05-25 17:40:49 +00:00
|
|
|
#placeItemsBaselineSafe {
|
|
|
|
|
place-items: baseline safe;
|
|
|
|
|
}
|
2017-04-05 20:44:10 +00:00
|
|
|
#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>
|
2018-02-09 14:57:12 +00:00
|
|
|
<div id="placeItemsCenterAuto"></div>
|
2017-04-05 20:44:10 +00:00
|
|
|
<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");
|
2018-02-09 14:57:12 +00:00
|
|
|
}, "Test setting 'auto' as incorrect value through CSS.");
|
2017-04-05 20:44:10 +00:00
|
|
|
|
|
|
|
|
test(function() {
|
2018-02-09 14:57:12 +00:00
|
|
|
checkValues(placeItemsCenterAuto, "placeItems", "place-items", "", "normal normal");
|
|
|
|
|
checkPlaceItemsValues(placeItemsCenterAuto, "", "normal", "normal");
|
|
|
|
|
}, "Test setting 'center auto' as incorrect value through CSS.");
|
2017-04-05 20:44:10 +00:00
|
|
|
|
|
|
|
|
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() {
|
2017-05-25 17:40:49 +00:00
|
|
|
checkValues(placeItemsBaselineSafe, "placeItems", "place-items", "", "normal normal");
|
|
|
|
|
checkPlaceItemsValues(placeItemsBaselineSafe, "", "normal", "normal");
|
2017-04-05 20:44:10 +00:00
|
|
|
}, "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() {
|
2018-02-09 14:57:12 +00:00
|
|
|
checkPlaceItemsValuesBadJS("auto");
|
2017-07-10 23:56:21 +00:00
|
|
|
checkPlaceItemsValuesBadJS("auto normal");
|
2018-02-09 14:57:12 +00:00
|
|
|
checkPlaceItemsValuesBadJS("center auto");
|
|
|
|
|
checkPlaceItemsValuesBadJS("legacy");
|
|
|
|
|
checkPlaceItemsValuesBadJS("left legacy");
|
2017-07-10 23:56:21 +00:00
|
|
|
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("");
|
2017-04-05 20:44:10 +00:00
|
|
|
}, "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>
|
