122 lines
4.5 KiB
HTML
122 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link href="resources/grid.css" rel="stylesheet">
|
|
<style>
|
|
.grid {
|
|
grid-template-areas: "firstArea secondArea"
|
|
"thirdArea thirdArea";
|
|
}
|
|
|
|
#oneValueGridArea {
|
|
grid-area: 1;
|
|
}
|
|
|
|
#oneValueIdentGridArea {
|
|
grid-area: thirdArea;
|
|
}
|
|
|
|
#twoValueGridArea {
|
|
grid-area: -1 / span 1;
|
|
}
|
|
|
|
#twoValueIdentGridArea {
|
|
grid-area: firstArea / secondArea;
|
|
}
|
|
|
|
#threeValueGridArea {
|
|
grid-area: span 1 / 10 / -1;
|
|
}
|
|
|
|
#fourValueGridArea {
|
|
grid-area: -5 / 5 span / span 8 / 9;
|
|
}
|
|
|
|
#fourValueMixedGridArea {
|
|
grid-area: firstArea / span 1 / nonexistent / 1 foobar;
|
|
}
|
|
</style>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="grid">
|
|
<div id="oneValueGridArea"></div>
|
|
<div id="oneValueIdentGridArea"></div>
|
|
<div id="twoValueGridArea"></div>
|
|
<div id="twoValueIdentGridArea"></div>
|
|
<div id="threeValueGridArea"></div>
|
|
<div id="fourValueGridArea"></div>
|
|
<div id="fourValueMixedGridArea"></div>
|
|
</div>
|
|
<script>
|
|
description('This test checks that grid-area is properly parsed and stored internally.');
|
|
function valueOrDefaultGridPosition(gridPosition)
|
|
{
|
|
return gridPosition === undefined ? "auto" : gridPosition;
|
|
}
|
|
|
|
function checkColumnRowValues(gridItem, gridRowStart, gridColumnStart, gridRowEnd, gridColumnEnd)
|
|
{
|
|
this.gridItem = gridItem;
|
|
shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('grid-row-start')", gridRowStart);
|
|
shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('grid-column-start')", valueOrDefaultGridPosition(gridColumnStart));
|
|
|
|
shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('grid-row-end')", valueOrDefaultGridPosition(gridRowEnd));
|
|
shouldBeEqualToString("getComputedStyle(gridItem, '').getPropertyValue('grid-column-end')", valueOrDefaultGridPosition(gridColumnEnd));
|
|
}
|
|
|
|
function testGridAreaCSSParsing(gridItemId, gridRowStart, gridColumnStart, gridRowEnd, gridColumnEnd)
|
|
{
|
|
checkColumnRowValues(document.getElementById(gridItemId), gridRowStart, gridColumnStart, gridRowEnd, gridColumnEnd);
|
|
}
|
|
|
|
function testGridAreaJSParsing(gridAreaValue)
|
|
{
|
|
var element = document.createElement("div");
|
|
document.body.appendChild(element);
|
|
// Pre-fill it with values to detect that we properly handle and reset unset values.
|
|
element.style.gridArea = "1 / 2 / 3 / 4";
|
|
element.style.gridArea = gridAreaValue;
|
|
|
|
// Get the different values.
|
|
var gridColumnRowValues = gridAreaValue.split("/");
|
|
var gridColumnStart = gridColumnRowValues[1] ? gridColumnRowValues[1].trim() : undefined;
|
|
var gridRowEnd = gridColumnRowValues[2] ? gridColumnRowValues[2].trim() : undefined;
|
|
var gridColumnEnd = gridColumnRowValues[3] ? gridColumnRowValues[3].trim() : undefined;
|
|
checkColumnRowValues(element, gridColumnRowValues[0].trim(), gridColumnStart, gridRowEnd, gridColumnEnd);
|
|
document.body.removeChild(element);
|
|
}
|
|
|
|
function testGridAreaInvalidJSParsing(gridAreaValue)
|
|
{
|
|
var element = document.createElement("div");
|
|
document.body.appendChild(element);
|
|
checkColumnRowValues(element, "auto", "auto", "auto", "auto");
|
|
document.body.removeChild(element);
|
|
}
|
|
|
|
debug("Test getting grid-area set through CSS");
|
|
testGridAreaCSSParsing("oneValueGridArea", "1");
|
|
testGridAreaCSSParsing("oneValueIdentGridArea", "thirdArea", "thirdArea", "thirdArea", "thirdArea");
|
|
testGridAreaCSSParsing("twoValueGridArea", "-1", "span 1");
|
|
testGridAreaCSSParsing("twoValueIdentGridArea", "firstArea", "secondArea", "firstArea", "secondArea");
|
|
testGridAreaCSSParsing("threeValueGridArea", "span 1", "10", "-1");
|
|
testGridAreaCSSParsing("fourValueGridArea", "-5", "span 5", "span 8", "9");
|
|
testGridAreaCSSParsing("fourValueMixedGridArea", "firstArea", "span 1", "nonexistent", "1 foobar");
|
|
|
|
debug("");
|
|
debug("Test getting and setting grid-area set through JS");
|
|
testGridAreaJSParsing("-1");
|
|
testGridAreaJSParsing("-1 / span 5");
|
|
testGridAreaJSParsing("-1 / 10 / span 3");
|
|
|
|
debug("");
|
|
debug("Test setting some positions to invalid values through JS");
|
|
testGridAreaInvalidJSParsing("span / span / span /");
|
|
testGridAreaInvalidJSParsing("1/ span span / 1 / span");
|
|
testGridAreaInvalidJSParsing("span / 1 / -1 / 1 -1");
|
|
testGridAreaInvalidJSParsing("span / 1 / -1 / 1 span -1");
|
|
</script>
|
|
</body>
|
|
</html>
|