Repeating background-image sized to the content-box fails to fill the viewport in an iframe

smfr · smfr · commit 8dc84bd0499b · 2024-09-24T09:45:13.000-07:00
https://bugs.webkit.org/show_bug.cgi?id=278166 rdar://133952319 Reviewed by Alan Baradlay. 283482@main fixed background-clip to not apply to the root. This should have fixed the behavior seen in https://codepen.io/thebabydino/pen/GRbOXZp where WebKit failed to tile the gradient image, however 282712@main introduced a regression; it conflated `background-clip` and `background-origin` when passing the the `m_overrideClip` value to `calculateBackgroundImageGeometry()`, which caused us to use the border-box as the background-origin at the root. Fix by separating m_overrideClip from m_overrideOrigin in BackgroundPainter; the table code has to set both. * LayoutTests/fast/backgrounds/background-clip-on-root-expected.html: Added. * LayoutTests/fast/backgrounds/background-clip-on-root.html: Added. * Source/WebCore/rendering/BackgroundPainter.cpp: (WebCore::BackgroundPainter::paintFillLayer const): * Source/WebCore/rendering/BackgroundPainter.h: (WebCore::BackgroundPainter::setOverrideOrigin): * Source/WebCore/rendering/RenderTableCell.cpp: (WebCore::RenderTableCell::paintBackgroundsBehindCell): Canonical link: https://commits.webkit.org/284165@main
diff --git a/LayoutTests/fast/backgrounds/background-clip-on-root-expected.html b/LayoutTests/fast/backgrounds/background-clip-on-root-expected.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        .box {
+            width: 700px;
+            height: 500px;
+            padding: 100px;
+            box-sizing: border-box;
+            background-image: url('../images/resources/red-green-blue-900-300.png');
+            background-size: contain;
+            background-origin: content-box;
+        }
+    </style>
+</head>
+<body>
+    <div class="box"></div>
+</body>
+</html>
diff --git a/LayoutTests/fast/backgrounds/background-clip-on-root.html b/LayoutTests/fast/backgrounds/background-clip-on-root.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        iframe {
+            border: none;
+            width: 700px;
+            height: 500px;
+            background-color: white;
+        }
+    </style>
+</head>
+<body>
+    <iframe srcdoc="
+    <style>
+        html {
+            height: 100%;
+            padding: 100px;
+            background-image: url('../images/resources/red-green-blue-900-300.png');
+            background-size: contain;
+            background-clip: content-box;
+            background-origin: content-box;
+            box-sizing: border-box;
+        }
+    </style>
+    "></iframe>
+</body>
+</html>
diff --git a/Source/WebCore/rendering/BackgroundPainter.cpp b/Source/WebCore/rendering/BackgroundPainter.cpp
@@ -442,7 +442,7 @@ void BackgroundPainter::paintFillLayer(const Color& color, const FillLayer& bgLa
         // Multiline inline boxes paint like the image was one long strip spanning lines. The backgroundImageStrip is this fictional rectangle.
         auto imageRect = backgroundImageStrip.isEmpty() ? scrolledPaintRect : backgroundImageStrip;
         auto paintOffset = backgroundImageStrip.isEmpty() ? rect.location() : backgroundImageStrip.location();
-        auto geometry = calculateBackgroundImageGeometry(m_renderer, m_paintInfo.paintContainer, bgLayer, paintOffset, imageRect, m_overrideClip);
+        auto geometry = calculateBackgroundImageGeometry(m_renderer, m_paintInfo.paintContainer, bgLayer, paintOffset, imageRect, m_overrideOrigin);
 
         auto& clientForBackgroundImage = backgroundObject ? *backgroundObject : m_renderer;
         bgImage->setContainerContextForRenderer(clientForBackgroundImage, geometry.tileSizeWithoutPixelSnapping, m_renderer.style().usedZoom());
diff --git a/Source/WebCore/rendering/BackgroundPainter.h b/Source/WebCore/rendering/BackgroundPainter.h
@@ -60,6 +60,7 @@ class BackgroundPainter {
     BackgroundPainter(RenderBoxModelObject&, const PaintInfo&);
 
     void setOverrideClip(FillBox overrideClip) { m_overrideClip = overrideClip; }
+    void setOverrideOrigin(FillBox overrideOrigin) { m_overrideOrigin = overrideOrigin; }
 
     void paintBackground(const LayoutRect&, BackgroundBleedAvoidance) const;
 
@@ -84,6 +85,7 @@ class BackgroundPainter {
     RenderBoxModelObject& m_renderer;
     const PaintInfo& m_paintInfo;
     std::optional<FillBox> m_overrideClip;
+    std::optional<FillBox> m_overrideOrigin;
 };
 
 }
diff --git a/Source/WebCore/rendering/RenderTableCell.cpp b/Source/WebCore/rendering/RenderTableCell.cpp
@@ -1429,8 +1429,10 @@ void RenderTableCell::paintBackgroundsBehindCell(PaintInfo& paintInfo, LayoutPoi
         fillRect = LayoutRect { adjustedPaintOffset, size() };
     auto compositeOp = document().compositeOperatorForBackgroundColor(color, *this);
     BackgroundPainter painter { *this, paintInfo };
-    if (backgroundObject != this)
+    if (backgroundObject != this) {
         painter.setOverrideClip(FillBox::BorderBox);
+        painter.setOverrideOrigin(FillBox::BorderBox);
+    }
     painter.paintFillLayers(color, bgLayer, fillRect, BackgroundBleedNone, compositeOp, backgroundObject);
 }
 
