mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-02-17 14:25:49 +00:00
1f3d6c04f2
I'm _really_ sorry for the size of the patch. I tried to do this in two steps
but it was a lot of work and pretty ugly.
This patch makes us use cbindgen for grid-template-{rows,columns}, in order to:
* Make us preserve repeat() at computed-value time. This is per spec since
interpolation needs to know about repeat(). Except for subgrid, which did the
repeat expansion at parse-time and was a bit more annoying (plus it doesn't
really animate yet so we don't need it to comply with the spec).
* Tweaks the WPT tests for interpolation to adopt the resolution at:
https://github.com/w3c/csswg-drafts/issues/3503.
Trade-off here, as this patch stands, is that this change makes us use less
long-living memory, since we expand repeat() during layout, but at the cost of a
bit of CPU time during layout (conditional on the property applying though,
which wasn't the case before). It should be very easy to store a cached version
of the template, should this be too hot (I expect it isn't), or to change the
representation in other ways to optimize grid layout code if it's worth it.
Another trade-off: I've used SmallPointerArray to handle line-name merging,
pointing to the individual arrays in the style data, rather than actually
heap-allocating the merged lists. This would also be pretty easy to change
should we measure and see that it's not worth it.
This patch also opens the gate to potentially improving memory usage in some
other ways, by reference-counting line-name lists for example, though I don't
have data that suggests it is worth it.
In general, this patch makes much easier to tweak the internal representation of
the grid style data structures. Overall, I think it's a win, the amount of magic
going on in that mako code was a bit huge; it took a bit to wrap my head around
it.
This patch comments out the style struct size assertions. They will be
uncommented in a follow-up patch which contains some improvements for this type,
which are worth getting reviewed separately.
Also, this patch doesn't remove as much code as I would've hoped for because of
I tried not to change most of the dom/grid code for inspector, but I think a
fair bit of the nsGridContainerFrame.cpp code that collects information for it
can be simplified / de-copy-pasted to some extent. But that was a pre-existing
problem and this patch is already quite massive.
Differential Revision: https://phabricator.services.mozilla.com/D36598
278 lines
8.4 KiB
HTML
278 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset=utf-8>
|
|
<title>Test parsing of grid container shorthands (grid-template, grid)</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 isGridTemplateSubgridValueEnabled =
|
|
SpecialPowers.getBoolPref("layout.css.grid-template-subgrid-value.enabled");
|
|
|
|
var initial_values = {
|
|
gridTemplateAreas: "none",
|
|
gridTemplateRows: "none",
|
|
gridTemplateColumns: "none",
|
|
gridAutoFlow: "row",
|
|
// Computed value for 'auto'
|
|
gridAutoRows: "auto",
|
|
gridAutoColumns: "auto",
|
|
};
|
|
|
|
// For various specified values of the grid-template shorthand,
|
|
// test the computed values of the corresponding longhands.
|
|
var grid_template_test_cases = [
|
|
{
|
|
specified: "none",
|
|
},
|
|
{
|
|
specified: "40px / 100px",
|
|
gridTemplateRows: "40px",
|
|
gridTemplateColumns: "100px",
|
|
},
|
|
{
|
|
specified: "minmax(auto,1fr) / minmax(auto,1fr)",
|
|
gridTemplateRows: "1fr",
|
|
gridTemplateColumns: "1fr",
|
|
},
|
|
{
|
|
specified: "[foo] 40px [bar] / [baz] 100px [fizz]",
|
|
gridTemplateRows: "[foo] 40px [bar]",
|
|
gridTemplateColumns: "[baz] 100px [fizz]",
|
|
},
|
|
{
|
|
specified: " none/100px",
|
|
gridTemplateRows: "none",
|
|
gridTemplateColumns: "100px",
|
|
},
|
|
{
|
|
specified: "40px/none",
|
|
gridTemplateRows: "40px",
|
|
gridTemplateColumns: "none",
|
|
},
|
|
{
|
|
specified: "40px/repeat(1, 20px)",
|
|
gridTemplateRows: "40px",
|
|
gridTemplateColumns: "repeat(1, 20px)",
|
|
},
|
|
{
|
|
specified: "40px/[a]repeat(1, 20px)",
|
|
gridTemplateRows: "40px",
|
|
gridTemplateColumns: "[a] repeat(1, 20px)",
|
|
},
|
|
{
|
|
specified: "40px/repeat(1, [a] 20px)",
|
|
gridTemplateRows: "40px",
|
|
gridTemplateColumns: "repeat(1, [a] 20px)",
|
|
},
|
|
{
|
|
specified: "40px/[a]repeat(2, [b]20px)",
|
|
gridTemplateRows: "40px",
|
|
gridTemplateColumns: "[a] repeat(2, [b] 20px)",
|
|
},
|
|
{
|
|
specified: "40px/[a]repeat(2, 20px)",
|
|
gridTemplateRows: "40px",
|
|
gridTemplateColumns: "[a] repeat(2, 20px)",
|
|
},
|
|
{
|
|
specified: "40px/repeat(2, [a] 20px)",
|
|
gridTemplateRows: "40px",
|
|
gridTemplateColumns: "repeat(2, [a] 20px)",
|
|
},
|
|
{
|
|
specified: "40px/[a]repeat(2, [b]20px)",
|
|
gridTemplateRows: "40px",
|
|
gridTemplateColumns: "[a] repeat(2, [b] 20px)",
|
|
},
|
|
{
|
|
specified: "40px/repeat(2, 20px[a])",
|
|
gridTemplateRows: "40px",
|
|
gridTemplateColumns: "repeat(2, 20px [a])",
|
|
},
|
|
{
|
|
specified: "40px/repeat(2, 20px[a]) [b]",
|
|
gridTemplateRows: "40px",
|
|
gridTemplateColumns: "repeat(2, 20px [a]) [b]",
|
|
},
|
|
{
|
|
specified: "40px/repeat(2, [a] 20px[b]) [c]",
|
|
gridTemplateRows: "40px",
|
|
gridTemplateColumns: "repeat(2, [a] 20px [b]) [c]",
|
|
},
|
|
{
|
|
specified: "40px/[a] repeat(3, [b c] 20px [d] 100px [e f]) [g]",
|
|
gridTemplateRows: "40px",
|
|
gridTemplateColumns: "[a] repeat(3, [b c] 20px [d] 100px [e f]) [g]",
|
|
},
|
|
{
|
|
specified: "'fizz'",
|
|
gridTemplateAreas: "\"fizz\"",
|
|
gridTemplateRows: "auto",
|
|
},
|
|
{
|
|
specified: "[bar] 'fizz'",
|
|
gridTemplateAreas: "\"fizz\"",
|
|
gridTemplateRows: "[bar] auto",
|
|
},
|
|
{
|
|
specified: "'fizz' / [foo] 40px",
|
|
gridTemplateAreas: "\"fizz\"",
|
|
gridTemplateRows: "auto",
|
|
gridTemplateColumns: "[foo] 40px",
|
|
},
|
|
{
|
|
specified: "[bar] 'fizz' / [foo] 40px",
|
|
gridTemplateAreas: "\"fizz\"",
|
|
gridTemplateRows: "[bar] auto",
|
|
gridTemplateColumns: "[foo] 40px",
|
|
},
|
|
{
|
|
specified: "'fizz' 100px / [foo] 40px",
|
|
gridTemplateAreas: "\"fizz\"",
|
|
gridTemplateRows: "100px",
|
|
gridTemplateColumns: "[foo] 40px",
|
|
},
|
|
{
|
|
specified: "[bar] 'fizz' 100px [buzz] \n [a] '.' 200px [b] / [foo] 40px",
|
|
gridTemplateAreas: "\"fizz\" \".\"",
|
|
gridTemplateRows: "[bar] 100px [buzz a] 200px [b]",
|
|
gridTemplateColumns: "[foo] 40px",
|
|
},
|
|
{
|
|
specified: "subgrid / subgrid",
|
|
gridTemplateColumns: isGridTemplateSubgridValueEnabled ? "subgrid" : "none",
|
|
gridTemplateRows: isGridTemplateSubgridValueEnabled ? "subgrid" : "none",
|
|
},
|
|
{
|
|
specified: "subgrid [foo] / subgrid",
|
|
gridTemplateColumns: isGridTemplateSubgridValueEnabled ? "subgrid" : "none",
|
|
gridTemplateRows: isGridTemplateSubgridValueEnabled ? "subgrid [foo]" : "none",
|
|
},
|
|
{
|
|
specified: "subgrid [foo] repeat(3, [] [a b] [c]) / subgrid",
|
|
gridTemplateColumns: isGridTemplateSubgridValueEnabled ? "subgrid" : "none",
|
|
gridTemplateRows: isGridTemplateSubgridValueEnabled ?
|
|
"subgrid [foo] [] [a b] [c] [] [a b] [c] [] [a b] [c]" : "none",
|
|
},
|
|
{
|
|
// Test that the number of lines is clamped to kMaxLine = 10000.
|
|
specified: "subgrid [foo] repeat(999999999, [a]) / subgrid",
|
|
gridTemplateColumns: isGridTemplateSubgridValueEnabled ? "subgrid" : "none",
|
|
// Array(n).join(s) is a hack for the non-standard s.repeat(n - 1) .
|
|
// [foo] + 9999 [a] gives us 10000 lines.
|
|
gridTemplateRows: isGridTemplateSubgridValueEnabled ?
|
|
"subgrid [foo]" + Array(10000).join(" [a]") : "none",
|
|
},
|
|
{
|
|
specified: "subgrid [bar]/ subgrid [] [foo",
|
|
gridTemplateColumns: isGridTemplateSubgridValueEnabled ? "subgrid [] [foo]" : "none",
|
|
gridTemplateRows: isGridTemplateSubgridValueEnabled ? "subgrid [bar]" : "none",
|
|
},
|
|
{
|
|
specified: "'fizz' repeat(1, 100px)",
|
|
},
|
|
{
|
|
specified: "'fizz' repeat(auto-fill, 100px)",
|
|
},
|
|
{
|
|
specified: "'fizz' / repeat(1, 100px)",
|
|
},
|
|
{
|
|
specified: "'fizz' / repeat(auto-fill, 100px)",
|
|
},
|
|
];
|
|
|
|
grid_test_cases = grid_template_test_cases.concat([
|
|
{
|
|
specified: "auto-flow / 0",
|
|
gridAutoFlow: "row",
|
|
gridAutoRows: "auto",
|
|
gridTemplateColumns: "0px",
|
|
},
|
|
{
|
|
specified: "auto-flow dense / 0",
|
|
gridAutoFlow: "dense",
|
|
gridAutoRows: "auto",
|
|
gridTemplateColumns: "0px",
|
|
},
|
|
{
|
|
specified: "auto-flow minmax(auto,1fr) / none",
|
|
gridAutoFlow: "row",
|
|
gridAutoRows: "1fr",
|
|
},
|
|
{
|
|
specified: "auto-flow 40px / none",
|
|
gridAutoFlow: "row",
|
|
gridAutoRows: "40px",
|
|
},
|
|
{
|
|
specified: "none / auto-flow 40px",
|
|
gridAutoFlow: "column",
|
|
gridAutoRows: "auto",
|
|
gridAutoColumns: "40px",
|
|
},
|
|
{
|
|
specified: "none / auto-flow minmax(auto,1fr)",
|
|
gridAutoFlow: "column",
|
|
gridAutoRows: "auto",
|
|
gridAutoColumns: "1fr",
|
|
},
|
|
{
|
|
specified: "0 / auto-flow dense auto",
|
|
gridAutoFlow: "column dense",
|
|
gridAutoRows: "auto",
|
|
gridAutoColumns: "auto",
|
|
gridTemplateRows: "0px",
|
|
},
|
|
{
|
|
specified: "dense auto-flow minmax(min-content, 2fr) / 0",
|
|
gridAutoFlow: "dense",
|
|
gridAutoRows: "minmax(min-content, 2fr)",
|
|
gridAutoColumns: "auto",
|
|
gridTemplateColumns: "0px",
|
|
},
|
|
{
|
|
specified: "auto-flow 40px / 100px",
|
|
gridAutoFlow: "row",
|
|
gridAutoRows: "40px",
|
|
gridAutoColumns: "auto",
|
|
gridTemplateColumns: "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);
|
|
element.style[shorthand] = test_case.specified;
|
|
var computed = window.getComputedStyle(element);
|
|
subproperties.forEach(function(longhand) {
|
|
assert_equals(
|
|
computed[longhand],
|
|
test_case[longhand] || initial_values[longhand],
|
|
longhand
|
|
);
|
|
});
|
|
}, "test parsing of 'grid-template: " + test_case.specified + "'");
|
|
});
|
|
}
|
|
|
|
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>
|