263 lines
9.8 KiB
HTML
263 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
#placeSelfNormal {
|
|
place-self: normal;
|
|
}
|
|
#placeSelfCenterAuto {
|
|
place-self: center auto;
|
|
}
|
|
#placeSelfBaseline {
|
|
place-self: baseline;
|
|
}
|
|
#placeSelfFirstBaseline {
|
|
place-self: first baseline;
|
|
}
|
|
#placeSelfLastBaseline {
|
|
place-self: last baseline;
|
|
}
|
|
#placeSelfStart {
|
|
place-self: start;
|
|
}
|
|
#placeSelfFlexStart {
|
|
place-self: flex-start;
|
|
}
|
|
#placeSelfEnd {
|
|
place-self: end;
|
|
}
|
|
#placeSelfSelfStart {
|
|
place-self: self-start;
|
|
}
|
|
#placeSelfStretch {
|
|
place-self: stretch;
|
|
}
|
|
#placeSelfStartEnd {
|
|
place-self: start end;
|
|
}
|
|
#placeSelfStartSelfEnd {
|
|
place-self: start self-end;
|
|
}
|
|
#placeSelfStartBaseline {
|
|
place-self: start baseline;
|
|
}
|
|
|
|
<!-- Invalid CSS cases -->
|
|
#placeSelfEmpty {
|
|
place-self:;
|
|
}
|
|
#placeSelfAuto {
|
|
place-self: auto;
|
|
}
|
|
#placeSelfNone {
|
|
place-self: none;
|
|
}
|
|
#placeSelfSafe {
|
|
place-self: safe;
|
|
}
|
|
#placeSelfBaselineSafe {
|
|
place-self: baseline safe;
|
|
}
|
|
#placeSelfStartSafe {
|
|
place-self: start safe;
|
|
}
|
|
#placeSelfStartEndLeft {
|
|
place-self: 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-self alignment shorthand is parsed as expected and correctly sets the longhand values.</p>
|
|
<div id="log"></div>
|
|
|
|
<div id="placeSelfNormal"></div>
|
|
<div id="placeSelfCenterAuto"></div>
|
|
<div id="placeSelfBaseline"></div>
|
|
<div id="placeSelfFirstBaseline"></div>
|
|
<div id="placeSelfLastBaseline"></div>
|
|
<div id="placeSelfStart"></div>
|
|
<div id="placeSelfFlexStart"></div>
|
|
<div id="placeSelfEnd"></div>
|
|
<div id="placeSelfSelfStart"></div>
|
|
<div id="placeSelfStretch"></div>
|
|
<div id="placeSelfStartEnd"></div>
|
|
<div id="placeSelfStartSelfEnd"></div>
|
|
<div id="placeSelfStartBaseline"></div>
|
|
|
|
<div id="placeSelfEmpty"></div>
|
|
<div id="placeSelfAuto"></div>
|
|
<div id="placeSelfNone"></div>
|
|
<div id="placeSelfSafe"></div>
|
|
<div id="placeSelfStartSafe"></div>
|
|
<div id="placeSelfBaselineSafe"></div>
|
|
<div id="placeSelfStartEndLeft"></div>
|
|
<script>
|
|
function checkPlaceSelfValues(element, value, alignValue, justifyValue) {
|
|
var res = value.split(" ");
|
|
if (res.length < 2)
|
|
res[1] = res[0];
|
|
checkValues(element, "alignSelf", "align-self", res[0], alignValue);
|
|
checkValues(element, "justifySelf", "justify-self", res[1], justifyValue);
|
|
}
|
|
|
|
function checkPlaceSelfValuesJS(value, alignValue, justifyValue)
|
|
{
|
|
element = document.createElement("div");
|
|
document.body.appendChild(element);
|
|
element.style.placeSelf = value;
|
|
checkValues(element, "placeSelf", "place-self", value, alignValue + ' ' + justifyValue)
|
|
checkPlaceSelfValues(element, value, alignValue, justifyValue)
|
|
}
|
|
|
|
function checkPlaceSelfValuesBadJS(value)
|
|
{
|
|
element.style.placeSelf = "";
|
|
element.style.placeSelf = value;
|
|
checkPlaceSelfValues(element, "", "auto", "auto")
|
|
}
|
|
|
|
test(function() {
|
|
checkValues(placeSelfNormal, "placeSelf", "place-self", "", "normal normal");
|
|
checkPlaceSelfValues(placeSelfNormal, "", "normal", "normal");
|
|
}, "Test getting the Computed Value of place-self's longhand properties when setting 'normal' value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeSelfCenterAuto, "placeSelf", "place-self", "", "center auto");
|
|
checkPlaceSelfValues(placeSelfCenterAuto, "", "center", "auto");
|
|
}, "Test getting the Computed Value of place-self's longhand properties when setting 'center auto' value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeSelfBaseline, "placeSelf", "place-self", "", "baseline baseline");
|
|
checkPlaceSelfValues(placeSelfBaseline, "", "baseline", "baseline");
|
|
}, "Test getting the Computed Value of place-self's longhand properties when setting 'baseline' value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeSelfFirstBaseline, "placeSelf", "place-self", "", "baseline baseline");
|
|
checkPlaceSelfValues(placeSelfFirstBaseline, "", "baseline", "baseline");
|
|
}, "Test getting the Computed Value of place-self's longhand properties when setting 'first baseline' value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeSelfLastBaseline, "placeSelf", "place-self", "", "last baseline last baseline");
|
|
checkPlaceSelfValues(placeSelfLastBaseline, "", "last baseline", "last baseline");
|
|
}, "Test getting the Computed Value of place-self's longhand properties when setting 'last baseline' value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeSelfStart, "placeSelf", "place-self", "", "start start");
|
|
checkPlaceSelfValues(placeSelfStart, "", "start", "start");
|
|
}, "Test getting the Computed Value of place-self's longhand properties when setting 'start' value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeSelfFlexStart, "placeSelf", "place-self", "", "flex-start flex-start");
|
|
checkPlaceSelfValues(placeSelfFlexStart, "", "flex-start", "flex-start");
|
|
}, "Test getting the Computed Value of place-self's longhand properties when setting 'flex-start' value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeSelfEnd, "placeSelf", "place-self", "", "end end");
|
|
checkPlaceSelfValues(placeSelfEnd, "", "end", "end");
|
|
}, "Test getting the Computed Value of place-self's longhand properties when setting 'end' value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeSelfSelfStart, "placeSelf", "place-self", "", "self-start self-start");
|
|
checkPlaceSelfValues(placeSelfSelfStart, "", "self-start", "self-start");
|
|
}, "Test getting the Computed Value of place-self's longhand properties when setting 'self-start' value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeSelfStretch, "placeSelf", "place-self", "", "stretch stretch");
|
|
checkPlaceSelfValues(placeSelfStretch, "", "stretch", "stretch");
|
|
}, "Test getting the Computed Value of place-self's longhand properties when setting 'stretch' value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeSelfStartEnd, "placeSelf", "place-self", "", "start end");
|
|
checkPlaceSelfValues(placeSelfStartEnd, "", "start", "end");
|
|
}, "Test getting the Computed Value of place-self's longhand properties when setting 'start end' value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeSelfStartSelfEnd, "placeSelf", "place-self", "", "start self-end");
|
|
checkPlaceSelfValues(placeSelfStartSelfEnd, "", "start", "self-end");
|
|
}, "Test getting the Computed Value of place-self's longhand properties when setting 'start self-end' value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeSelfStartBaseline, "placeSelf", "place-self", "", "start baseline");
|
|
checkPlaceSelfValues(placeSelfStartBaseline, "", "start", "baseline");
|
|
}, "Test getting the Computed Value of place-self's longhand properties when setting 'start baseline' value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeSelfEmpty, "placeSelf", "place-self", "", "auto auto");
|
|
checkPlaceSelfValues(placeSelfEmpty, "", "auto", "auto");
|
|
}, "Test setting '' as incorrect value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeSelfAuto, "placeSelf", "place-self", "", "auto auto");
|
|
checkPlaceSelfValues(placeSelfAuto, "", "auto", "auto");
|
|
}, "Test setting 'auto' as incorrect value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeSelfNone, "placeSelf", "place-self", "", "auto auto");
|
|
checkPlaceSelfValues(placeSelfNone, "", "auto", "auto");
|
|
}, "Test setting 'none' as incorrect value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeSelfSafe, "placeSelf", "place-self", "", "auto auto");
|
|
checkPlaceSelfValues(placeSelfSafe, "", "auto", "auto");
|
|
}, "Test setting 'safe' as incorrect value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeSelfStartSafe, "placeSelf", "place-self", "", "auto auto");
|
|
checkPlaceSelfValues(placeSelfStartSafe, "", "auto", "auto");
|
|
}, "Test setting 'start safe' as incorrect value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeSelfBaselineSafe, "placeSelf", "place-self", "", "auto auto");
|
|
checkPlaceSelfValues(placeSelfBaselineSafe, "", "auto", "auto");
|
|
}, "Test setting 'baseline safe' as incorrect value through CSS.");
|
|
|
|
test(function() {
|
|
checkValues(placeSelfStartEndLeft, "placeSelf", "place-self", "", "auto auto");
|
|
checkPlaceSelfValues(placeSelfStartEndLeft, "", "auto", "auto");
|
|
}, "Test setting 'start end left' as incorrect value through CSS.");
|
|
|
|
test(function() {
|
|
checkPlaceSelfValuesJS("center", "center", "center");
|
|
checkPlaceSelfValuesJS("center start", "center", "start");
|
|
checkPlaceSelfValuesJS("self-start end", "self-start", "end");
|
|
checkPlaceSelfValuesJS("normal end", "normal", "end");
|
|
checkPlaceSelfValuesJS("auto right", "auto", "right");
|
|
}, "Test setting values through JS.");
|
|
|
|
test(function() {
|
|
checkPlaceSelfValuesBadJS("space-between");
|
|
checkPlaceSelfValuesBadJS("center safe");
|
|
checkPlaceSelfValuesBadJS("center self-start center");
|
|
checkPlaceSelfValuesBadJS("asrt");
|
|
checkPlaceSelfValuesBadJS("10px");
|
|
checkPlaceSelfValuesBadJS("stretch safe");
|
|
checkPlaceSelfValuesBadJS("self-start start end");
|
|
checkPlaceSelfValuesBadJS("");
|
|
}, "Test setting incorrect values through JS.");
|
|
|
|
test(function() {
|
|
element = document.createElement("div");
|
|
document.body.appendChild(element);
|
|
checkValues(element, "placeSelf", "place-self", "", "auto auto");
|
|
element.style.placeSelf = "center";
|
|
checkPlaceSelfValues(element, "center", "center", "center");
|
|
element.style.placeSelf = "initial";
|
|
checkValues(element, "placeSelf", "place-self", "initial", "auto auto");
|
|
checkPlaceSelfValues(element, "initial", "auto", "auto");
|
|
}, "Test the 'initial' value of the place-self shorthand and its longhand properties' Computed value");
|
|
|
|
test(function() {
|
|
document.body.style.placeSelf = "start";
|
|
var anotherElement = document.createElement("div");
|
|
document.body.appendChild(anotherElement);
|
|
checkPlaceSelfValues(anotherElement, "", "auto", "auto");
|
|
anotherElement.style.placeSelf = "inherit";
|
|
checkPlaceSelfValues(anotherElement, "inherit", "start", "start");
|
|
}, "Test the 'inherit' value of the place-self shorthand and its longhand properties' Computed value");
|
|
</script>
|
|
</body>
|
|
</html>
|