зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1707643 part 2: When computing static position of abspos grid child, perform alignment within content-box, rather than padding box. r=emilio
In the conditions where we hit this partiuclar codepath, the spec used to require us to align within the grid's padding box (which is what we were trying to do[1]), but now it requires us to align within the grid's content box. This patch makes us start passing a bunch of WPT tests (whose .ini files I'm removing here). This patch also changes the reference case for some "last-baseline"-specific tests in the same directory, by cribbing the "alignEnd" rule from the neighboring non-"last-baseline" analog (since "last-baseline" falls back to end alignment and is meant to be equivalent in these testcases). Before this patch, the affected reference cases were inadvertently depending on the Firefox bug that I'm fixing here, and they were expecting the testcase's end-aligned content to be at the wrong position as a result. Chromium developers fixed this issue in the neighboring non-"last-baseline" tests in [2], but they didn't catch the files that I'm fixing here, because Chromium doesn't implement "last baseline" alignment yet. [1] Before this patch, we actually weren't quite aligning within the padding-box, even though we were trying to. We were computing an alignment offset based on the size of the padding box, and then we were using that offset as a position within the *content box*. This could result in us pushing end-aligned content outside the grid entirely, as in the testcase on the bug report for this bug. [2] https://chromium-review.googlesource.com/c/chromium/src/+/2803842 Differential Revision: https://phabricator.services.mozilla.com/D130713
This commit is contained in:
Daniel Holbert
Родитель
39f112111a
Коммит
0b51e59865
|
|
@ -513,12 +513,12 @@ static nscoord OffsetToAlignedStaticPos(const ReflowInput& aKidReflowInput,
|
|||
// absolute containing block.
|
||||
alignAreaSize = aAbsPosCBSize.ConvertTo(pcWM, aAbsPosCBWM);
|
||||
} else {
|
||||
// The alignment container is a the grid container's padding box (which
|
||||
// we can get by subtracting away its border from frame's size):
|
||||
// The alignment container is a the grid container's content box (which
|
||||
// we can get by subtracting away its border & padding from frame's size):
|
||||
alignAreaSize = aPlaceholderContainer->GetLogicalSize(pcWM);
|
||||
LogicalMargin pcBorder =
|
||||
aPlaceholderContainer->GetLogicalUsedBorder(pcWM);
|
||||
alignAreaSize -= pcBorder.Size(pcWM);
|
||||
LogicalMargin pcBorderPadding =
|
||||
aPlaceholderContainer->GetLogicalUsedBorderAndPadding(pcWM);
|
||||
alignAreaSize -= pcBorderPadding.Size(pcWM);
|
||||
}
|
||||
} else {
|
||||
NS_ERROR("Unsupported container for abpsos CSS Box Alignment");
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
[grid-abspos-staticpos-align-self-002.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[grid-abspos-staticpos-align-self-rtl-003.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[grid-abspos-staticpos-align-self-rtl-004.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[grid-abspos-staticpos-justify-self-002.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[grid-abspos-staticpos-justify-self-rtl-003.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[grid-abspos-staticpos-justify-self-rtl-004.html]
|
||||
expected: FAIL
|
||||
|
|
@ -33,8 +33,8 @@
|
|||
.container > * {
|
||||
display: block;
|
||||
}
|
||||
.big .alignEnd { margin-top: 26px; }
|
||||
.small .alignEnd { margin-top: -12px; }
|
||||
.big .alignEnd { margin-top: 24px; }
|
||||
.small .alignEnd { margin-top: -14px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -34,8 +34,8 @@
|
|||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignEnd { margin-top: 26px; }
|
||||
.small .alignEnd { margin-top: -2px; }
|
||||
.big .alignEnd { margin-top: 24px; }
|
||||
.small .alignEnd { margin-top: -4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -37,8 +37,8 @@
|
|||
.big > .container > * { margin-left: 14px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignEnd { margin-top: 26px; }
|
||||
.small .alignEnd { margin-top: -2px; }
|
||||
.big .alignEnd { margin-top: 24px; }
|
||||
.small .alignEnd { margin-top: -4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -37,8 +37,8 @@
|
|||
.big > .container > * { margin-left: 14px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignEnd { margin-top: 26px; }
|
||||
.small .alignEnd { margin-top: -2px; }
|
||||
.big .alignEnd { margin-top: 24px; }
|
||||
.small .alignEnd { margin-top: -4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -35,8 +35,8 @@
|
|||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
.big .alignEnd { margin-left: -2px; }
|
||||
.small .alignEnd { margin-left: -2px; }
|
||||
.big .alignEnd { margin-left: 0px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -35,8 +35,8 @@
|
|||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
.big .alignEnd { margin-left: -2px; }
|
||||
.small .alignEnd { margin-left: -2px; }
|
||||
.big .alignEnd { margin-left: 0px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -33,8 +33,8 @@
|
|||
.container > * {
|
||||
display: block;
|
||||
}
|
||||
.big .alignEnd { margin-left: 34px; }
|
||||
.small .alignEnd { margin-left: -4px; }
|
||||
.big .alignEnd { margin-left: 32px; }
|
||||
.small .alignEnd { margin-left: -6px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -35,8 +35,8 @@
|
|||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
.big .alignEnd { margin-left: 26px; }
|
||||
.small .alignEnd { margin-left: -2px; }
|
||||
.big .alignEnd { margin-left: 24px; }
|
||||
.small .alignEnd { margin-left: -4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -35,8 +35,8 @@
|
|||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
.big .alignEnd { margin-left: -2px; }
|
||||
.small .alignEnd { margin-left: -2px; }
|
||||
.big .alignEnd { margin-left: 0px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -35,8 +35,8 @@
|
|||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
.big .alignEnd { margin-left: -2px; }
|
||||
.small .alignEnd { margin-left: -2px; }
|
||||
.big .alignEnd { margin-left: 0px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -37,8 +37,8 @@
|
|||
.big > .container > * { margin-left: 14px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignEnd { margin-top: 26px; }
|
||||
.small .alignEnd { margin-top: -2px; }
|
||||
.big .alignEnd { margin-top: 24px; }
|
||||
.small .alignEnd { margin-top: -4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -37,8 +37,8 @@
|
|||
.big > .container > * { margin-left: 14px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignEnd { margin-top: 26px; }
|
||||
.small .alignEnd { margin-top: -2px; }
|
||||
.big .alignEnd { margin-top: 24px; }
|
||||
.small .alignEnd { margin-top: -4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче