Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-07 09:54:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1704742 - Fix percent basis of shape radii. r=TYLin

Browse Source 
Matches other browsers, and the spec, as per
https://drafts.csswg.org/css-shapes/#basic-shape:

    All the lengths expressed in percentages are resolved from the used
    dimensions of the reference box.

Differential Revision: https://phabricator.services.mozilla.com/D111790
This commit is contained in:
Emilio Cobos Álvarez 2021-04-14 09:29:37 +00:00
parent 3c994ce8a2
commit 988bc29033
7 changed files with 38 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
layout/base/ShapeUtils.cpp
View File

@ -124,10 +124,9 @@ nsRect ShapeUtils::ComputeInsetRect(const StyleBasicShape& aBasicShape,
/* static */
bool ShapeUtils::ComputeInsetRadii(const StyleBasicShape& aBasicShape,
const nsRect& aInsetRect,
const nsRect& aRefBox, nscoord aRadii[8]) {
const auto& radius = aBasicShape.AsInset().round;
return nsIFrame::ComputeBorderRadii(radius, aInsetRect.Size(), aRefBox.Size(),
return nsIFrame::ComputeBorderRadii(radius, aRefBox.Size(), aRefBox.Size(),
Sides(), aRadii);
}

4
layout/base/ShapeUtils.h
View File

@ -70,11 +70,9 @@ struct ShapeUtils final {
// Compute the radii for an inset.
// @param aRefBox the reference box of the inset.
// @param aInsetRect the inset rect computed by ComputeInsetRect().
// @param aRadii the returned radii in app units.
// @return true if any of the radii is nonzero; false otherwise.
static bool ComputeInsetRadii(const StyleBasicShape&,
const nsRect& aInsetRect, const nsRect& aRefBox,
static bool ComputeInsetRadii(const StyleBasicShape&, const nsRect& aRefBox,
nscoord aRadii[8]);
// Compute the vertices for a polygon.

2
layout/generic/nsFloatManager.cpp
View File

@ -2521,7 +2521,7 @@ nsFloatManager::ShapeInfo::CreateInset(const StyleBasicShape& aBasicShape,
LogicalRect(aWM, insetRect, aContainerSize), aWM, aContainerSize);
nscoord physicalRadii[8];
bool hasRadii = ShapeUtils::ComputeInsetRadii(
aBasicShape, insetRect, physicalShapeBoxRect, physicalRadii);
aBasicShape, physicalShapeBoxRect, physicalRadii);
// With a zero shape-margin, we will be able to use the fast constructor.
if (aShapeMargin == 0) {

2
layout/painting/nsDisplayList.cpp
View File

@ -9463,7 +9463,7 @@ static Maybe<wr::WrClipId> CreateSimpleClipRegion(
nscoord radii[8] = {0};
if (ShapeUtils::ComputeInsetRadii(shape, insetRect, refBox, radii)) {
if (ShapeUtils::ComputeInsetRadii(shape, refBox, radii)) {
clipRegions.AppendElement(
wr::ToComplexClipRegion(insetRect, radii, appUnitsPerDevPixel));
}

3
layout/svg/CSSClipPathInstance.cpp
View File

@ -209,8 +209,7 @@ already_AddRefed<Path> CSSClipPathInstance::CreateClipPathInset(
const Rect insetRectPixels = NSRectToRect(insetRect, appUnitsPerDevPixel);
nscoord appUnitsRadii[8];
if (ShapeUtils::ComputeInsetRadii(basicShape, insetRect, aRefBox,
appUnitsRadii)) {
if (ShapeUtils::ComputeInsetRadii(basicShape, aRefBox, appUnitsRadii)) {
RectCornerRadii corners;
nsCSSRendering::ComputePixelRadii(appUnitsRadii, appUnitsPerDevPixel,
&corners);

14
testing/web-platform/tests/css/css-masking/clip-path/clip-path-inset-round-percent-ref.html Normal file
View File

@ -0,0 +1,14 @@
<!doctype html>
<title>CSS Test Reference</title>
<style>
body {
margin: 0;
}
div {
width: 100px;
height: 100px;
background: deeppink;
clip-path: inset(80px 0 0 round 8px);
}
</style>
<div></div>

19
testing/web-platform/tests/css/css-masking/clip-path/clip-path-inset-round-percent.html Normal file
View File

@ -0,0 +1,19 @@
<!doctype html>
<title>inset() with percentages resolves against reference box, not inset rect</title>
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1704742">
<link rel="help" href="https://drafts.csswg.org/css-shapes/#basic-shape-functions">
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<link rel="match" href="clip-path-inset-round-percent-ref.html">
<style>
body {
margin: 0;
}
div {
width: 100px;
height: 100px;
background: deeppink;
clip-path: inset(80% 0 0 round 8%)
}
</style>
<div></div>