Skip to content
Permalink
Browse files
Fixed backgrounds should behave like 'scroll' inside transformed elem…
…ents

https://bugs.webkit.org/show_bug.cgi?id=15679
rdar://problem/99926239

Reviewed by Antti Koivisto.

* LayoutTests/TestExpectations:
Enabling related tests that would fail before.

* LayoutTests/compositing/backgrounds/fixed-background-on-descendant.html:
* LayoutTests/compositing/backgrounds/fixed-backgrounds.html:
These tests need fixed-background but and they make use of transforms. After this patch,
the tests would no longer render background as fixed, so we are updating them to
avoid transforms but still trigger the creation of composited layer.

* Source/WebCore/rendering/BackgroundPainter.cpp:
(WebCore::BackgroundPainter::calculateBackgroundImageGeometry):

According to spec (https://drafts.csswg.org/css-transforms/), if an element or any of its ancestor elements
have a transform, its background-attachment property should be treated as it has 'scroll' value instead of 'fixed'.

Canonical link: https://commits.webkit.org/255055@main
  • Loading branch information
vitorroriz authored and nt1m committed Oct 1, 2022
1 parent b23e33f commit eba490ba3cc4ca38142884808f25545819227472
Show file tree
Hide file tree
Showing 4 changed files with 6 additions and 9 deletions.
@@ -4199,11 +4199,6 @@ webkit.org/b/230080 imported/w3c/web-platform-tests/css/css-transforms/scale-tra
webkit.org/b/230080 imported/w3c/web-platform-tests/css/css-transforms/transform-background-007.html [ ImageOnlyFailure ]
webkit.org/b/230080 imported/w3c/web-platform-tests/css/css-transforms/transform-background-008.html [ ImageOnlyFailure ]
webkit.org/b/230080 imported/w3c/web-platform-tests/css/css-transforms/transform-box/fill-box-002.html [ ImageOnlyFailure ]
webkit.org/b/230080 imported/w3c/web-platform-tests/css/css-transforms/transform-fixed-bg-002.html [ ImageOnlyFailure ]
webkit.org/b/230080 imported/w3c/web-platform-tests/css/css-transforms/transform-fixed-bg-004.html [ ImageOnlyFailure ]
webkit.org/b/230080 imported/w3c/web-platform-tests/css/css-transforms/transform-fixed-bg-005.html [ ImageOnlyFailure ]
webkit.org/b/230080 imported/w3c/web-platform-tests/css/css-transforms/transform-fixed-bg-006.html [ ImageOnlyFailure ]
webkit.org/b/230080 imported/w3c/web-platform-tests/css/css-transforms/transform-fixed-bg-007.html [ ImageOnlyFailure ]
webkit.org/b/230080 imported/w3c/web-platform-tests/css/css-transforms/transform-root-bg-001.html [ ImageOnlyFailure ]
webkit.org/b/230080 imported/w3c/web-platform-tests/css/css-transforms/transform-root-bg-002.html [ ImageOnlyFailure ]
webkit.org/b/230080 imported/w3c/web-platform-tests/css/css-transforms/transform-root-bg-003.html [ ImageOnlyFailure ]
@@ -35,7 +35,7 @@
}

.composited {
-webkit-transform: translateZ(0);
will-change: opacity;
}
</style>
<script>
@@ -26,7 +26,7 @@
}

.composited {
-webkit-transform: translateZ(0);
will-change: opacity;
}
</style>
<script>
@@ -512,9 +512,11 @@ BackgroundImageGeometry BackgroundPainter::calculateBackgroundImageGeometry(cons
LayoutSize positioningAreaSize;
// Determine the background positioning area and set destination rect to the background painting area.
// Destination rect will be adjusted later if the background is non-repeating.
// FIXME: transforms spec says that fixed backgrounds behave like scroll inside transforms. https://bugs.webkit.org/show_bug.cgi?id=15679
auto enclosingLayer = renderer.enclosingLayer();
bool isTransformed = renderer.hasTransform() || (enclosingLayer && enclosingLayer->hasTransformedAncestor());
bool fixedAttachment = fillLayer.attachment() == FillAttachment::FixedBackground && !isTransformed;

LayoutRect destinationRect(borderBoxRect);
bool fixedAttachment = fillLayer.attachment() == FillAttachment::FixedBackground;
float deviceScaleFactor = renderer.document().deviceScaleFactor();
if (!fixedAttachment) {
LayoutUnit right;

0 comments on commit eba490b

Please sign in to comment.