Bug 1599206 - Don't serialize implicit tracks for grid-template properties, as they make the computed style not round-trip. r=mats

Do this only on nightly for now since we're about to enter the soft freeze.

(No test updates yet, as try is still running, and I need to figure out how to
import Oriol's changes into WPT, but I wanted to ensure that you were fine with
this)

Differential Revision: https://phabricator.services.mozilla.com/D54595

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Emilio Cobos Álvarez 2020-01-10 10:37:29 +00:00
Родитель d2bd381aee
Коммит feb0870183
11 изменённых файлов: 84 добавлений и 284 удалений

Просмотреть файл

@ -154,6 +154,10 @@ function testGridTemplateColumns(elem, expected) {
", EXPECTED=" + expected;
document.body.appendChild(document.createTextNode(err));
}
if (location.search.indexOf("no-implicit") !== -1) {
/* This shouldn't change the layout */
elem.style.gridTemplateColumns = actual;
}
}
var a1 = [
"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
@ -183,6 +187,39 @@ var a2 = [
"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px",
"3px [a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px"
];
if (location.search.indexOf("no-implicit") !== -1) {
a1 = [
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
"[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
"[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
"[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 20px",
"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 20px",
"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 20px",
]
a2 = [
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d]",
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d]",
"[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]",
"[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
"[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]",
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]",
"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
]
}
function runTest() {
var t1 = document.querySelectorAll('.t1');
for (var i = 0; i < t1.length; ++i) {

Просмотреть файл

@ -180,7 +180,8 @@ skip-if(!gtkWidget) == grid-container-baselines-003.html grid-container-baseline
== grid-repeat-auto-fill-fit-005.html grid-repeat-auto-fill-fit-005-ref.html
== grid-repeat-auto-fill-fit-006.html grid-repeat-auto-fill-fit-006-ref.html
== grid-repeat-auto-fill-fit-007.html grid-repeat-auto-fill-fit-007-ref.html
== grid-repeat-auto-fill-fit-008.html grid-repeat-auto-fill-fit-008-ref.html
test-pref(layout.css.serialize-grid-implicit-tracks,true) == grid-repeat-auto-fill-fit-008.html grid-repeat-auto-fill-fit-008-ref.html
test-pref(layout.css.serialize-grid-implicit-tracks,false) == grid-repeat-auto-fill-fit-008.html?no-implicit grid-repeat-auto-fill-fit-008-ref.html
== grid-repeat-auto-fill-fit-009.html grid-repeat-auto-fill-fit-009-ref.html
== grid-repeat-auto-fill-fit-010.html grid-repeat-auto-fill-fit-010-ref.html
== grid-repeat-auto-fill-fit-011.html grid-repeat-auto-fill-fit-010-ref.html

Просмотреть файл

@ -1561,8 +1561,19 @@ already_AddRefed<CSSValue> nsComputedDOMStyle::GetGridTemplateColumnsRows(
return valueList.forget();
}
uint32_t numSizes = aTrackInfo.mSizes.Length();
if (!numSizes && !aTrackList.HasRepeatAuto()) {
const bool serializeImplicit =
StaticPrefs::layout_css_serialize_grid_implicit_tracks();
const nsTArray<nscoord>& trackSizes = aTrackInfo.mSizes;
const uint32_t numExplicitTracks = aTrackInfo.mNumExplicitTracks;
const uint32_t numLeadingImplicitTracks =
aTrackInfo.mNumLeadingImplicitTracks;
uint32_t numSizes = trackSizes.Length();
MOZ_ASSERT(numSizes >= numLeadingImplicitTracks + numExplicitTracks);
const bool hasTracksToSerialize = serializeImplicit ? !!numSizes : !!numExplicitTracks;
const bool hasRepeatAuto = aTrackList.HasRepeatAuto();
if (!hasTracksToSerialize && !hasRepeatAuto) {
RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
val->SetIdent(eCSSKeyword_none);
return val.forget();
@ -1574,24 +1585,21 @@ already_AddRefed<CSSValue> nsComputedDOMStyle::GetGridTemplateColumnsRows(
// size, but that doesn't seem worth doing since even for repeat(auto-*)
// the resolved size might differ for the repeated tracks.
RefPtr<nsDOMCSSValueList> valueList = GetROCSSValueList(false);
const nsTArray<nscoord>& trackSizes = aTrackInfo.mSizes;
const uint32_t numExplicitTracks = aTrackInfo.mNumExplicitTracks;
const uint32_t numLeadingImplicitTracks =
aTrackInfo.mNumLeadingImplicitTracks;
MOZ_ASSERT(numSizes >= numLeadingImplicitTracks + numExplicitTracks);
// Add any leading implicit tracks.
for (uint32_t i = 0; i < numLeadingImplicitTracks; ++i) {
RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
val->SetAppUnits(trackSizes[i]);
valueList->AppendCSSValue(val.forget());
if (serializeImplicit) {
for (uint32_t i = 0; i < numLeadingImplicitTracks; ++i) {
RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
val->SetAppUnits(trackSizes[i]);
valueList->AppendCSSValue(val.forget());
}
}
// Then add any explicit tracks and removed auto-fit tracks.
if (numExplicitTracks || aTrackList.HasRepeatAuto()) {
if (numExplicitTracks || hasRepeatAuto) {
uint32_t endOfRepeat = 0; // first index after any repeat() tracks
int32_t offsetToLastRepeat = 0;
if (aTrackList.HasRepeatAuto()) {
if (hasRepeatAuto) {
// offsetToLastRepeat is -1 if all repeat(auto-fit) tracks are empty
offsetToLastRepeat =
numExplicitTracks + 1 - aTrackInfo.mResolvedLineNames.Length();
@ -1637,7 +1645,7 @@ already_AddRefed<CSSValue> nsComputedDOMStyle::GetGridTemplateColumnsRows(
};
for (uint32_t i = 0;; i++) {
if (aTrackList.HasRepeatAuto()) {
if (hasRepeatAuto) {
if (i == aTrackInfo.mRepeatFirstTrack) {
const nsTArray<StyleCustomIdent>& lineNames =
aTrackInfo.mResolvedLineNames[i];
@ -1684,11 +1692,13 @@ already_AddRefed<CSSValue> nsComputedDOMStyle::GetGridTemplateColumnsRows(
}
// Add any trailing implicit tracks.
for (uint32_t i = numLeadingImplicitTracks + numExplicitTracks; i < numSizes;
++i) {
RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
val->SetAppUnits(trackSizes[i]);
valueList->AppendCSSValue(val.forget());
if (serializeImplicit) {
for (uint32_t i = numLeadingImplicitTracks + numExplicitTracks; i < numSizes;
++i) {
RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
val->SetAppUnits(trackSizes[i]);
valueList->AppendCSSValue(val.forget());
}
}
return valueList.forget();

Просмотреть файл

@ -88,10 +88,17 @@
function test_grid2() {
gridElement = document.getElementById("grid2");
test(function() {
const expectedCols = SpecialPowers.getBoolPref("layout.css.serialize-grid-implicit-tracks")
? "10px 10px 10px"
: "none";
const expectedRows = SpecialPowers.getBoolPref("layout.css.serialize-grid-implicit-tracks")
? "400px"
: "none";
assert_equals(getComputedStyle(gridElement).gridTemplateColumns,
"10px 10px 10px");
assert_equals(getComputedStyle(gridElement, "").gridTemplateRows,
"400px");
expectedCols);
assert_equals(getComputedStyle(gridElement).gridTemplateRows,
expectedRows);
}, "test #grid2 computed grid-template-{columns,rows} values");
}

Просмотреть файл

@ -4967,6 +4967,12 @@
mirror: always
rust: true
# Are implicit tracks in computed grid templates serialized?
- name: layout.css.serialize-grid-implicit-tracks
type: RelaxedAtomicBool
value: @IS_NOT_NIGHTLY_BUILD@
mirror: always
# Set the number of device pixels per CSS pixel. A value <= 0 means choose
# automatically based on user settings for the platform (e.g., "UI scale factor"
# on Mac). A positive value is used as-is. This effectively controls the size

Просмотреть файл

@ -1,25 +0,0 @@
[grid-inline-support-flexible-lengths-001.html]
['grid' with: grid-template-columns: -2fr; and grid-template-rows: -2fr;]
expected: FAIL
['grid' with: grid-template-columns: 1free-space; and grid-template-rows: 1free-space;]
expected: FAIL
['grid' with: grid-template-columns: (1fr) auto; and grid-template-rows: (1fr) auto;]
expected: FAIL
['grid' with: grid-template-columns: 0,5fr; and grid-template-rows: 0,5fr;]
expected: FAIL
['grid' with: grid-template-columns: fr; and grid-template-rows: fr;]
expected: FAIL
['grid' with: grid-template-columns: calc(1fr + 100px); and grid-template-rows: calc(1fr + 100px);]
expected: FAIL
['grid' with: grid-template-columns: 1 fr; and grid-template-rows: 1 fr;]
expected: FAIL
['grid' with: grid-template-columns: minmax(1fr, 1000px); and grid-template-rows: minmax(1fr, 700px);]
expected: FAIL

Просмотреть файл

@ -1,16 +0,0 @@
[grid-inline-support-grid-template-columns-rows-001.html]
['grid' with: grid-template-columns: minmax(100px, 200px, 300px); and grid-template-rows: minmax(100px, 200px, 300px);]
expected: FAIL
['grid' with: grid-template-columns: 100px, 200px; and grid-template-rows: 300px, 400px;]
expected: FAIL
['grid' with: grid-template-columns: none; and grid-template-rows: none;]
expected: FAIL
['grid' with: grid-template-columns: foo; and grid-template-rows: bar;]
expected: FAIL
['grid' with: grid-template-columns: auto none; and grid-template-rows: none auto;]
expected: FAIL

Просмотреть файл

@ -1,64 +0,0 @@
[grid-inline-support-named-grid-lines-001.html]
['grid' with: grid-template-columns: [a auto [b\]; and grid-template-rows: [a auto [b\];]
expected: FAIL
['grid' with: grid-template-columns: [#a\] auto [$b\]; and grid-template-rows: [#a\] auto [$b\];]
expected: FAIL
['grid' with: grid-template-columns: [inherit\] auto; and grid-template-rows: [inherit\] auto;]
expected: FAIL
['grid' with: grid-template-columns: 'a' auto 'b'; and grid-template-rows: 'a' auto 'b';]
expected: FAIL
['grid' with: grid-template-columns: [a\]; and grid-template-rows: [a\];]
expected: FAIL
['grid' with: grid-template-columns: [a [b\]\] auto [c\]; and grid-template-rows: [a [b\]\] auto [c\];]
expected: FAIL
['grid' with: grid-template-columns: [a\] auto [[b\]\]; and grid-template-rows: [a\] auto [[b\]\];]
expected: FAIL
['grid' with: grid-template-columns: [a\] [b\] auto [c d\] [e\]; and grid-template-rows: [a\] [b\] auto [c d\] [e\];]
expected: FAIL
['grid' with: grid-template-columns: [initial\] auto; and grid-template-rows: [initial\] auto;]
expected: FAIL
['grid' with: grid-template-columns: [a 50%\] auto [b\]; and grid-template-rows: [a 50%\] auto [b\];]
expected: FAIL
['grid' with: grid-template-columns: [a, b\] auto [a, b\]; and grid-template-rows: [a, b\] auto [a, b\];]
expected: FAIL
['grid' with: grid-template-columns: [a\] none [b\]; and grid-template-rows: [a\] none [b\];]
expected: FAIL
['grid' with: grid-template-columns: (a) auto (b); and grid-template-rows: (a) auto (b);]
expected: FAIL
['grid' with: grid-template-columns: [a 100px\] auto [b\]; and grid-template-rows: [a 100px\] auto [b\];]
expected: FAIL
['grid' with: grid-template-columns: [a b\]; and grid-template-rows: [a b\];]
expected: FAIL
['grid' with: grid-template-columns: [a\] [b\]; and grid-template-rows: [a\] [b\];]
expected: FAIL
['grid' with: grid-template-columns: a auto b; and grid-template-rows: a auto b;]
expected: FAIL
['grid' with: grid-template-columns: [a.\] auto [b*\]; and grid-template-rows: [a.\] auto [b*\];]
expected: FAIL
['grid' with: grid-template-columns: [5\] auto [10\]; and grid-template-rows: [5\] auto [10\];]
expected: FAIL
['grid' with: grid-template-columns: [default\] auto; and grid-template-rows: [default\] auto;]
expected: FAIL
['grid' with: grid-template-columns: "a" auto "b"; and grid-template-rows: "a" auto "b";]
expected: FAIL

Просмотреть файл

@ -1,22 +0,0 @@
[grid-inline-support-repeat-001.html]
['grid' with: grid-template-columns: 100px (repeat 2, auto); and grid-template-rows: (repeat 2, auto);]
expected: FAIL
['grid' with: grid-template-columns: repeat(2, 50px repeat(2, 100px)); and grid-template-rows: repeat(2, 50px repeat(2, 100px));]
expected: FAIL
['grid' with: grid-template-columns: repeat 2, auto; and grid-template-rows: repeat 2, auto;]
expected: FAIL
['grid' with: grid-template-columns: repeat(-1, auto); and grid-template-rows: repeat(-1, auto);]
expected: FAIL
['grid' with: grid-template-columns: 100px repeat(2, [a\]); and grid-template-rows: 100px repeat(2, [a\]);]
expected: FAIL
['grid' with: grid-template-columns: repeat(auto, 2); and grid-template-rows: repeat(auto, 2);]
expected: FAIL
['grid' with: grid-template-columns: repeat(2 auto); and grid-template-rows: repeat(2 auto);]
expected: FAIL

Просмотреть файл

@ -1,109 +0,0 @@
[grid-inline-template-columns-rows-resolved-values-001.html]
['gridAutoFlowColumn' with: grid-template-columns: ; and grid-template-rows: ;]
expected: FAIL
['gridAutoFlowColumn' with: grid-template-columns: ; and grid-template-rows: auto auto;]
expected: FAIL
['gridAutoFlowColumn' with: grid-template-columns: 60px; and grid-template-rows: ;]
expected: FAIL
['gridAutoFlowColumn' with: grid-template-columns: 100px 60px; and grid-template-rows: ;]
expected: FAIL
['gridAutoFlowColumn' with: grid-template-columns: ; and grid-template-rows: 50px;]
expected: FAIL
['gridAutoFlowColumn' with: grid-template-columns: ; and grid-template-rows: 50px 30px;]
expected: FAIL
['gridAutoFlowColumn' with: grid-template-columns: 60px; and grid-template-rows: 50px;]
expected: FAIL
['gridAutoFlowColumn' with: grid-template-columns: 60px; and grid-template-rows: 50px 30px;]
expected: FAIL
['gridAutoFlowColumn' with: grid-template-columns: 100px 60px; and grid-template-rows: 50px;]
expected: FAIL
['gridAutoFlowColumnItemsPositions' with: grid-template-columns: ; and grid-template-rows: ;]
expected: FAIL
['gridAutoFlowColumnItemsPositions' with: grid-template-columns: 60px; and grid-template-rows: ;]
expected: FAIL
['gridAutoFlowColumnItemsPositions' with: grid-template-columns: ; and grid-template-rows: 60px;]
expected: FAIL
['gridAutoFlowColumnItemsPositions' with: grid-template-columns: ; and grid-template-rows: 60px 70px;]
expected: FAIL
['gridAutoFlowColumnItemsPositions' with: grid-template-columns: 60px; and grid-template-rows: 60px;]
expected: FAIL
['gridAutoFlowColumnItemsPositions' with: grid-template-columns: 60px; and grid-template-rows: 60px 70px;]
expected: FAIL
['gridItemsPositions' with: grid-template-columns: ; and grid-template-rows: ;]
expected: FAIL
['gridItemsPositions' with: grid-template-columns: 60px; and grid-template-rows: 60px 50px;]
expected: FAIL
['grid' with: grid-template-columns: ; and grid-template-rows: ;]
expected: FAIL
['grid' with: grid-template-columns: 60px; and grid-template-rows: ;]
expected: FAIL
['gridItemsPositions' with: grid-template-columns: 60px 50px; and grid-template-rows: ;]
expected: FAIL
['grid' with: grid-template-columns: auto auto; and grid-template-rows: ;]
expected: FAIL
['gridAutoFlowColumnItemsPositions' with: grid-template-columns: 60px 70px; and grid-template-rows: 60px 70px;]
expected: FAIL
['gridItemsPositions' with: grid-template-columns: 60px 50px; and grid-template-rows: 60px;]
expected: FAIL
['gridItemsPositions' with: grid-template-columns: 60px; and grid-template-rows: ;]
expected: FAIL
['gridItemsPositions' with: grid-template-columns: ; and grid-template-rows: 60px 50px;]
expected: FAIL
['gridItemsPositions' with: grid-template-columns: 60px 50px; and grid-template-rows: 60px 50px;]
expected: FAIL
['grid' with: grid-template-columns: 100px 60px; and grid-template-rows: ;]
expected: FAIL
['grid' with: grid-template-columns: 100px 60px; and grid-template-rows: 50px;]
expected: FAIL
['gridItemsPositions' with: grid-template-columns: 60px; and grid-template-rows: 60px;]
expected: FAIL
['grid' with: grid-template-columns: ; and grid-template-rows: 50px 30px;]
expected: FAIL
['grid' with: grid-template-columns: 60px; and grid-template-rows: 50px 30px;]
expected: FAIL
['gridAutoFlowColumnItemsPositions' with: grid-template-columns: 60px 70px; and grid-template-rows: 60px;]
expected: FAIL
['grid' with: grid-template-columns: 60px; and grid-template-rows: 50px;]
expected: FAIL
['gridAutoFlowColumnItemsPositions' with: grid-template-columns: 60px 70px; and grid-template-rows: ;]
expected: FAIL
['gridItemsPositions' with: grid-template-columns: ; and grid-template-rows: 60px;]
expected: FAIL
['grid' with: grid-template-columns: ; and grid-template-rows: 50px;]
expected: FAIL

Просмотреть файл

@ -1,25 +0,0 @@
[grid-support-flexible-lengths-001.html]
['grid' with: grid-template-columns: -2fr; and grid-template-rows: -2fr;]
expected: FAIL
['grid' with: grid-template-columns: 1free-space; and grid-template-rows: 1free-space;]
expected: FAIL
['grid' with: grid-template-columns: (1fr) auto; and grid-template-rows: (1fr) auto;]
expected: FAIL
['grid' with: grid-template-columns: 0,5fr; and grid-template-rows: 0,5fr;]
expected: FAIL
['grid' with: grid-template-columns: fr; and grid-template-rows: fr;]
expected: FAIL
['grid' with: grid-template-columns: calc(1fr + 100px); and grid-template-rows: calc(1fr + 100px);]
expected: FAIL
['grid' with: grid-template-columns: 1 fr; and grid-template-rows: 1 fr;]
expected: FAIL
['grid' with: grid-template-columns: minmax(1fr, 1000px); and grid-template-rows: minmax(1fr, 700px);]
expected: FAIL