// For various specified values of the grid-column and grid-row shorthands,
// test the computed values of the corresponding longhands. var grid_column_row_test_cases = [
{
specified: "3 / 4",
expected_start: "3",
expected_end: "4",
},
{
specified: "foo / span bar",
expected_start: "foo",
expected_end: "span bar",
},
// http://dev.w3.org/csswg/css-grid/#placement-shorthands
// "When the second value is omitted,
// if the first value is a <custom-ident>,
// the grid-row-end/grid-column-end longhand
// is also set to that <custom-ident>;
// otherwise, it is set to auto."
{
specified: "foo",
expected_start: "foo",
expected_end: "foo",
},
{
specified: "7",
expected_start: "7",
expected_end: "auto",
},
{
specified: "foo 7",
expected_start: "7 foo",
expected_end: "auto",
},
{
specified: "span foo",
expected_start: "span foo",
expected_end: "auto",
},
{
specified: "foo 7 span",
expected_start: "span 7 foo",
expected_end: "auto",
},
{
specified: "7 span",
expected_start: "span 7",
expected_end: "auto",
},
];
grid_column_row_test_cases.forEach(function(test_case) {
["Column", "Row"].forEach(function(axis) { var shorthand = "grid" + axis; var start_longhand = "grid" + axis + "Start"; var end_longhand = "grid" + axis + "End";
test(function() { var element = document.createElement('div');
document.body.appendChild(element);
element.style[shorthand] = test_case.specified; var computed = window.getComputedStyle(element);
assert_equals(computed[start_longhand], test_case.expected_start);
assert_equals(computed[end_longhand], test_case.expected_end);
}, "test parsing of '" + shorthand + ": " + test_case.specified + "'");
});
});
grid_area_test_cases.forEach(function(test_case) {
test(function() { var element = document.createElement('div');
document.body.appendChild(element);
element.style.gridArea = test_case.specified; var computed = window.getComputedStyle(element);
[ "gridRowStart", "gridColumnStart", "gridRowEnd", "gridColumnEnd"
].forEach(function(longhand) {
assert_equals(computed[longhand], test_case[longhand], longhand);
});
}, "test parsing of 'grid-area: " + test_case.specified + "'");
});
</script>
</body>
</html>
Messung V0.5 in Prozent
¤ Die Informationen auf dieser Webseite wurden
nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit,
noch Qualität der bereit gestellten Informationen zugesichert.0.20Bemerkung:
(vorverarbeitet am 2026-04-26)
¤
Die Informationen auf dieser Webseite wurden
nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit,
noch Qualität der bereit gestellten Informationen zugesichert.
Bemerkung:
Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.