зеркало из https://github.com/mozilla/gecko-dev.git
Bug 989755: Fix up serialization of the grid-template shorthand. r=dholbert
* Refuse to serialize some combinations of values that the shorthand can not represent: 'grid-template-areas: (not none)' combined with 'grid-template-rows: subgrid' or 'grid-template-columns: subgrid'. (The former used to cause an assertion failure.) * Remove an extraneous trailing space that occured when a <track-list> was last. (ie. followed by an omitted <line-names>) * Add tests for the result of this serialization.
This commit is contained in:
Simon Sapin
Родитель
efc233bd6d
Коммит
5584e3271c
|
|
@ -1017,14 +1017,30 @@ Declaration::GetValue(nsCSSProperty aProperty, nsAString& aValue,
|
|||
aValue, aSerialization);
|
||||
break;
|
||||
}
|
||||
if (columnsValue.GetUnit() == eCSSUnit_List ||
|
||||
columnsValue.GetUnit() == eCSSUnit_ListDep) {
|
||||
const nsCSSValueList* columnsItem = columnsValue.GetListValue();
|
||||
if (columnsItem->mValue.GetUnit() == eCSSUnit_Enumerated &&
|
||||
columnsItem->mValue.GetIntValue() == NS_STYLE_GRID_TEMPLATE_SUBGRID) {
|
||||
// We have "grid-template-areas:[something]; grid-template-columns:subgrid"
|
||||
// which isn't a value that the shorthand can express. Bail.
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (rowsValue.GetUnit() != eCSSUnit_List &&
|
||||
rowsValue.GetUnit() != eCSSUnit_ListDep) {
|
||||
// We have "grid-template-areas:[something]; grid-template-rows:none"
|
||||
// which isn't a value that the shorthand can express. Bail.
|
||||
return;
|
||||
}
|
||||
const GridTemplateAreasValue* areas = areasValue.GetGridTemplateAreas();
|
||||
const nsCSSValueList* rowsItem = rowsValue.GetListValue();
|
||||
if (rowsItem->mValue.GetUnit() == eCSSUnit_Enumerated &&
|
||||
rowsItem->mValue.GetIntValue() == NS_STYLE_GRID_TEMPLATE_SUBGRID) {
|
||||
// We have "grid-template-areas:[something]; grid-template-rows:subgrid"
|
||||
// which isn't a value that the shorthand can express. Bail.
|
||||
return;
|
||||
}
|
||||
const GridTemplateAreasValue* areas = areasValue.GetGridTemplateAreas();
|
||||
uint32_t nRowItems = 0;
|
||||
while (rowsItem) {
|
||||
nRowItems++;
|
||||
|
|
@ -1064,6 +1080,12 @@ Declaration::GetValue(nsCSSProperty aProperty, nsAString& aValue,
|
|||
// <track-size>
|
||||
rowsItem->mValue.AppendToString(eCSSProperty_grid_template_rows,
|
||||
aValue, aSerialization);
|
||||
if (rowsItem->mNext &&
|
||||
rowsItem->mNext->mValue.GetUnit() == eCSSUnit_Null &&
|
||||
!rowsItem->mNext->mNext) {
|
||||
// Break out of the loop early to avoid a trailing space.
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
rowsItem = rowsItem->mNext;
|
||||
|
|
|
|||
|
|
@ -1708,6 +1708,13 @@ AppendGridTemplateToString(const nsCSSValueList* val,
|
|||
} else {
|
||||
// <track-size>
|
||||
val->mValue.AppendToString(aProperty, aResult, aSerialization);
|
||||
if (!isSubgrid &&
|
||||
val->mNext &&
|
||||
val->mNext->mValue.GetUnit() == eCSSUnit_Null &&
|
||||
!val->mNext->mNext) {
|
||||
// Break out of the loop early to avoid a trailing space.
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
val = val->mNext;
|
||||
|
|
|
|||
|
|
@ -134,6 +134,7 @@ support-files = flexbox_layout_testcases.js
|
|||
[test_garbage_at_end_of_declarations.html]
|
||||
[test_grid_item_shorthands.html]
|
||||
[test_grid_container_shorthands.html]
|
||||
[test_grid_shorthand_serialization.html]
|
||||
[test_group_insertRule.html]
|
||||
[test_html_attribute_computed_values.html]
|
||||
[test_ident_escaping.html]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,134 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset=utf-8>
|
||||
<title>Test serialization of CSS Grid shorthand properties</title>
|
||||
<link rel="author" title="Simon Sapin" href="mailto:simon.sapin@exyr.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link rel='stylesheet' href='/resources/testharness.css'>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
|
||||
var initial_values = {
|
||||
gridTemplateAreas: "none",
|
||||
gridTemplateColumns: "none",
|
||||
gridTemplateRows: "none",
|
||||
gridAutoFlow: "none",
|
||||
gridAutoColumns: "auto",
|
||||
gridAutoRows: "auto",
|
||||
};
|
||||
|
||||
// For various specified values of the grid-template subproperties,
|
||||
// test the serialization of the shorthand.
|
||||
var grid_template_test_cases = [
|
||||
{
|
||||
gridTemplateRows: "100px",
|
||||
shorthand: "none / 100px",
|
||||
},
|
||||
{
|
||||
gridTemplateColumns: "40px",
|
||||
shorthand: "40px / none",
|
||||
},
|
||||
{
|
||||
gridTemplateColumns: "40px",
|
||||
gridTemplateRows: "subgrid",
|
||||
shorthand: "40px / subgrid",
|
||||
},
|
||||
{
|
||||
gridTemplateColumns: "(foo) 40px (bar)",
|
||||
gridTemplateRows: "(baz) 100px (fizz)",
|
||||
shorthand: "(foo) 40px (bar) / (baz) 100px (fizz)",
|
||||
},
|
||||
{
|
||||
gridTemplateAreas: "\"a\"",
|
||||
gridTemplateRows: "20px",
|
||||
shorthand: "\"a\" 20px",
|
||||
},
|
||||
{
|
||||
gridTemplateAreas: "\"a\"",
|
||||
gridTemplateRows: "(foo) 20px (bar)",
|
||||
shorthand: "(foo) \"a\" 20px (bar)",
|
||||
},
|
||||
// Combinations of longhands that make the shorthand non-serializable:
|
||||
{
|
||||
gridTemplateAreas: "\"a\"",
|
||||
gridTemplateRows: "20px 100px",
|
||||
shorthand: "",
|
||||
},
|
||||
{
|
||||
gridTemplateAreas: "\"a\" \"b\"",
|
||||
gridTemplateRows: "20px",
|
||||
shorthand: "",
|
||||
},
|
||||
{
|
||||
gridTemplateAreas: "\"a\"",
|
||||
gridTemplateRows: "subgrid",
|
||||
shorthand: "",
|
||||
},
|
||||
{
|
||||
gridTemplateAreas: "\"a\"",
|
||||
gridTemplateRows: "subgrid (foo)",
|
||||
shorthand: "",
|
||||
},
|
||||
{
|
||||
gridTemplateAreas: "\"a\"",
|
||||
gridTemplateRows: "20px",
|
||||
gridTemplateColumns: "subgrid",
|
||||
shorthand: "",
|
||||
},
|
||||
];
|
||||
|
||||
grid_test_cases = grid_template_test_cases.concat([
|
||||
{
|
||||
gridAutoFlow: "row",
|
||||
shorthand: "row auto / auto",
|
||||
},
|
||||
{
|
||||
gridAutoColumns: "40px",
|
||||
shorthand: "none 40px / auto",
|
||||
},
|
||||
{
|
||||
gridAutoFlow: "column dense",
|
||||
gridAutoColumns: "minmax(min-content, max-content)",
|
||||
shorthand: "column dense minmax(min-content, max-content) / auto",
|
||||
},
|
||||
{
|
||||
gridAutoFlow: "row dense",
|
||||
gridAutoRows: "minmax(min-content, 2fr)",
|
||||
shorthand: "row dense auto / minmax(min-content, 2fr)",
|
||||
},
|
||||
{
|
||||
gridAutoFlow: "row",
|
||||
gridAutoColumns: "40px",
|
||||
gridAutoRows: "100px",
|
||||
shorthand: "row 40px / 100px",
|
||||
},
|
||||
]);
|
||||
|
||||
function run_tests(test_cases, shorthand, subproperties) {
|
||||
test_cases.forEach(function(test_case) {
|
||||
test(function() {
|
||||
var element = document.createElement('div');
|
||||
document.body.appendChild(element);
|
||||
subproperties.forEach(function(longhand) {
|
||||
element.style[longhand] = test_case[longhand] ||
|
||||
initial_values[longhand];
|
||||
});
|
||||
assert_equals(element.style[shorthand], test_case.shorthand);
|
||||
}, "test shorthand serialization " + JSON.stringify(test_case));
|
||||
});
|
||||
}
|
||||
|
||||
run_tests(grid_template_test_cases, "gridTemplate", [
|
||||
"gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows"]);
|
||||
|
||||
run_tests(grid_test_cases, "grid", [
|
||||
"gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows",
|
||||
"gridAutoFlow", "gridAutoColumns", "gridAutoRows"]);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Загрузка…
Ссылка в новой задаче