- Revision
- 261619
- Author
- [email protected]
- Date
- 2020-05-13 09:49:56 -0700 (Wed, 13 May 2020)
Log Message
The perspective matrix is affected by overflow:hidden on a box with borders
https://bugs.webkit.org/show_bug.cgi?id=211828
Reviewed by Zalan Bujtas.
Source/WebCore:
For a box with non-uniform borders, the layer created for overflow:hidden is not
centered in its parent layer. However, we push the childrenTransform onto this
clipping layer, so that transform needs to be adjusted to account for the geometry
of the clipping layer.
Test: compositing/transforms/perspective-with-clipping.html
* rendering/RenderLayer.cpp:
(WebCore::RenderLayer::perspectiveTransform const):
* rendering/RenderLayerBacking.cpp:
(WebCore::scrollContainerLayerBox):
(WebCore::clippingLayerBox):
(WebCore::overflowControlsHostLayerBox):
(WebCore::RenderLayerBacking::updateChildrenTransformAndAnchorPoint):
LayoutTests:
New ref test, some rebaselines.
* compositing/tiling/coverage-adjustment-secondary-quad-mapping-expected.txt:
* compositing/transforms/perspective-with-clipping-expected.html: Added.
* compositing/transforms/perspective-with-clipping.html: Added.
* platform/ios-wk2/compositing/tiling/coverage-adjustment-secondary-quad-mapping-expected.txt:
* platform/mac-wk1/compositing/tiling/coverage-adjustment-secondary-quad-mapping-expected.txt:
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (261618 => 261619)
--- trunk/LayoutTests/ChangeLog 2020-05-13 16:21:52 UTC (rev 261618)
+++ trunk/LayoutTests/ChangeLog 2020-05-13 16:49:56 UTC (rev 261619)
@@ -1,3 +1,18 @@
+2020-05-13 Simon Fraser <[email protected]>
+
+ The perspective matrix is affected by overflow:hidden on a box with borders
+ https://bugs.webkit.org/show_bug.cgi?id=211828
+
+ Reviewed by Zalan Bujtas.
+
+ New ref test, some rebaselines.
+
+ * compositing/tiling/coverage-adjustment-secondary-quad-mapping-expected.txt:
+ * compositing/transforms/perspective-with-clipping-expected.html: Added.
+ * compositing/transforms/perspective-with-clipping.html: Added.
+ * platform/ios-wk2/compositing/tiling/coverage-adjustment-secondary-quad-mapping-expected.txt:
+ * platform/mac-wk1/compositing/tiling/coverage-adjustment-secondary-quad-mapping-expected.txt:
+
2020-05-13 Jason Lawrence <[email protected]>
[ Catalina wk2 ] webrtc/peer-connection-audio-mute2.html is flaky timing out.
Modified: trunk/LayoutTests/compositing/tiling/coverage-adjustment-secondary-quad-mapping-expected.txt (261618 => 261619)
--- trunk/LayoutTests/compositing/tiling/coverage-adjustment-secondary-quad-mapping-expected.txt 2020-05-13 16:21:52 UTC (rev 261618)
+++ trunk/LayoutTests/compositing/tiling/coverage-adjustment-secondary-quad-mapping-expected.txt 2020-05-13 16:49:56 UTC (rev 261619)
@@ -26,7 +26,7 @@
(position 1.00 1.00)
(bounds 583.00 578.00)
(backingStoreAttached 1)
- (childrenTransform [1.00 0.00 0.00 0.00] [0.00 1.00 0.00 0.00] [-300.00 -290.00 1.00 -1.00] [0.00 0.00 0.00 1.00])
+ (childrenTransform [1.00 0.00 0.00 0.00] [0.00 1.00 0.00 0.00] [-307.50 -290.00 1.00 -1.00] [0.00 0.00 0.00 1.00])
(children 1
(GraphicsLayer
(position 0.00 -400.00)
Added: trunk/LayoutTests/compositing/transforms/perspective-with-clipping-expected.html (0 => 261619)
--- trunk/LayoutTests/compositing/transforms/perspective-with-clipping-expected.html (rev 0)
+++ trunk/LayoutTests/compositing/transforms/perspective-with-clipping-expected.html 2020-05-13 16:49:56 UTC (rev 261619)
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ .container {
+ width: 200px;
+ height: 200px;
+ margin: 20px;
+ display: inline-block;
+ background-color: silver;
+ position: relative;
+ overflow: hidden;
+ perspective: 500px;
+ }
+
+ .angled {
+ display: none;
+ }
+ </style>
+</head>
+<body>
+ <div class="container" style="transform-box: border-box; border-left: 50px solid black; border-top: 50px solid black; perspective-origin: 150px 150px;">
+ <div class="angled"></div>
+ <div class="angled vertical"></div>
+ </div>
+
+ <div class="container" style="transform-box: view-box; border-left: 50px solid black; border-top: 50px solid black; perspective-origin: 150px 150px">
+ <div class="angled"></div>
+ <div class="angled vertical"></div>
+ </div>
+
+ <div class="container" style="transform-box: content-box; border-right: 50px solid black; border-bottom: 50px solid black; perspective-origin: 100px 100px">
+ <div class="angled"></div>
+ <div class="angled vertical"></div>
+ </div>
+
+ <div class="container" style="transform-box: content-box; border-left: 50px solid black; border-top: 50px solid black; perspective-origin: 100px 100px">
+ <div class="angled"></div>
+ <div class="angled vertical"></div>
+ </div>
+
+ <div class="container" style="transform-box: content-box; border-left: 50px solid black; border-top: 50px solid black; perspective-origin: 50% 50%">
+ <div class="angled"></div>
+ <div class="angled vertical"></div>
+ </div>
+</body>
+</html>
Added: trunk/LayoutTests/compositing/transforms/perspective-with-clipping.html (0 => 261619)
--- trunk/LayoutTests/compositing/transforms/perspective-with-clipping.html (rev 0)
+++ trunk/LayoutTests/compositing/transforms/perspective-with-clipping.html 2020-05-13 16:49:56 UTC (rev 261619)
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ .container {
+ width: 200px;
+ height: 200px;
+ margin: 20px;
+ display: inline-block;
+ background-color: silver;
+ position: relative;
+ overflow: hidden;
+ perspective: 500px;
+ }
+
+ /* Transformed to be edge-on, and therefore invisible */
+ .angled {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: red;
+ transform: rotateY(90deg);
+ }
+
+ .angled.vertical {
+ transform: rotateX(90deg);
+ }
+ </style>
+</head>
+<body>
+ <div class="container" style="transform-box: border-box; border-left: 50px solid black; border-top: 50px solid black; perspective-origin: 150px 150px;">
+ <div class="angled"></div>
+ <div class="angled vertical"></div>
+ </div>
+
+ <div class="container" style="transform-box: view-box; border-left: 50px solid black; border-top: 50px solid black; perspective-origin: 150px 150px">
+ <div class="angled"></div>
+ <div class="angled vertical"></div>
+ </div>
+
+ <div class="container" style="transform-box: content-box; border-right: 50px solid black; border-bottom: 50px solid black; perspective-origin: 100px 100px">
+ <div class="angled"></div>
+ <div class="angled vertical"></div>
+ </div>
+
+ <div class="container" style="transform-box: content-box; border-left: 50px solid black; border-top: 50px solid black; perspective-origin: 100px 100px">
+ <div class="angled"></div>
+ <div class="angled vertical"></div>
+ </div>
+
+ <div class="container" style="transform-box: content-box; border-left: 50px solid black; border-top: 50px solid black; perspective-origin: 50% 50%">
+ <div class="angled"></div>
+ <div class="angled vertical"></div>
+ </div>
+</body>
+</html>
Modified: trunk/LayoutTests/platform/ios-wk2/compositing/tiling/coverage-adjustment-secondary-quad-mapping-expected.txt (261618 => 261619)
--- trunk/LayoutTests/platform/ios-wk2/compositing/tiling/coverage-adjustment-secondary-quad-mapping-expected.txt 2020-05-13 16:21:52 UTC (rev 261618)
+++ trunk/LayoutTests/platform/ios-wk2/compositing/tiling/coverage-adjustment-secondary-quad-mapping-expected.txt 2020-05-13 16:49:56 UTC (rev 261619)
@@ -25,7 +25,7 @@
(position 1.00 1.00)
(bounds 583.00 578.00)
(backingStoreAttached 1)
- (childrenTransform [1.00 0.00 0.00 0.00] [0.00 1.00 0.00 0.00] [-300.00 -290.00 1.00 -1.00] [0.00 0.00 0.00 1.00])
+ (childrenTransform [1.00 0.00 0.00 0.00] [0.00 1.00 0.00 0.00] [-307.50 -290.00 1.00 -1.00] [0.00 0.00 0.00 1.00])
(children 1
(GraphicsLayer
(position 0.00 -400.00)
Modified: trunk/LayoutTests/platform/mac-wk1/compositing/tiling/coverage-adjustment-secondary-quad-mapping-expected.txt (261618 => 261619)
--- trunk/LayoutTests/platform/mac-wk1/compositing/tiling/coverage-adjustment-secondary-quad-mapping-expected.txt 2020-05-13 16:21:52 UTC (rev 261618)
+++ trunk/LayoutTests/platform/mac-wk1/compositing/tiling/coverage-adjustment-secondary-quad-mapping-expected.txt 2020-05-13 16:49:56 UTC (rev 261619)
@@ -26,7 +26,7 @@
(position 1.00 1.00)
(bounds 583.00 578.00)
(backingStoreAttached 1)
- (childrenTransform [1.00 0.00 0.00 0.00] [0.00 1.00 0.00 0.00] [-300.00 -290.00 1.00 -1.00] [0.00 0.00 0.00 1.00])
+ (childrenTransform [1.00 0.00 0.00 0.00] [0.00 1.00 0.00 0.00] [-307.50 -290.00 1.00 -1.00] [0.00 0.00 0.00 1.00])
(children 1
(GraphicsLayer
(position 0.00 -400.00)
Modified: trunk/Source/WebCore/ChangeLog (261618 => 261619)
--- trunk/Source/WebCore/ChangeLog 2020-05-13 16:21:52 UTC (rev 261618)
+++ trunk/Source/WebCore/ChangeLog 2020-05-13 16:49:56 UTC (rev 261619)
@@ -1,3 +1,25 @@
+2020-05-13 Simon Fraser <[email protected]>
+
+ The perspective matrix is affected by overflow:hidden on a box with borders
+ https://bugs.webkit.org/show_bug.cgi?id=211828
+
+ Reviewed by Zalan Bujtas.
+
+ For a box with non-uniform borders, the layer created for overflow:hidden is not
+ centered in its parent layer. However, we push the childrenTransform onto this
+ clipping layer, so that transform needs to be adjusted to account for the geometry
+ of the clipping layer.
+
+ Test: compositing/transforms/perspective-with-clipping.html
+
+ * rendering/RenderLayer.cpp:
+ (WebCore::RenderLayer::perspectiveTransform const):
+ * rendering/RenderLayerBacking.cpp:
+ (WebCore::scrollContainerLayerBox):
+ (WebCore::clippingLayerBox):
+ (WebCore::overflowControlsHostLayerBox):
+ (WebCore::RenderLayerBacking::updateChildrenTransformAndAnchorPoint):
+
2020-05-13 Tomoki Imai <[email protected]>
Selected element on Web Inspector is not highlighted with CPU Rendering.
Modified: trunk/Source/WebCore/rendering/RenderLayer.cpp (261618 => 261619)
--- trunk/Source/WebCore/rendering/RenderLayer.cpp 2020-05-13 16:21:52 UTC (rev 261618)
+++ trunk/Source/WebCore/rendering/RenderLayer.cpp 2020-05-13 16:49:56 UTC (rev 261619)
@@ -1750,7 +1750,7 @@
auto pixelSnappedReferenceBox = snapRectToDevicePixels(referenceBox, deviceScaleFactor);
auto snappedLayerRect = snapRectToDevicePixels(layerRect, deviceScaleFactor);
- auto perspectiveOrigin = pixelSnappedReferenceBox.location() + floatPointForLengthPoint(style.perspectiveOrigin(), pixelSnappedReferenceBox.size());
+ auto perspectiveOrigin = pixelSnappedReferenceBox.location() - toFloatSize(snappedLayerRect.location()) + floatPointForLengthPoint(style.perspectiveOrigin(), pixelSnappedReferenceBox.size());
// A perspective origin of 0,0 makes the vanishing point in the center of the element.
// We want it to be in the top-left, so subtract half the height and width.
Modified: trunk/Source/WebCore/rendering/RenderLayerBacking.cpp (261618 => 261619)
--- trunk/Source/WebCore/rendering/RenderLayerBacking.cpp 2020-05-13 16:21:52 UTC (rev 261618)
+++ trunk/Source/WebCore/rendering/RenderLayerBacking.cpp 2020-05-13 16:49:56 UTC (rev 261619)
@@ -594,6 +594,28 @@
GraphicsLayer::unparentAndClear(m_graphicsLayer);
}
+static LayoutRect scrollContainerLayerBox(const RenderBox& renderBox)
+{
+ return renderBox.paddingBoxRect();
+}
+
+static LayoutRect clippingLayerBox(const RenderBox& renderBox)
+{
+ LayoutRect result = LayoutRect::infiniteRect();
+ if (renderBox.hasOverflowClip())
+ result = renderBox.overflowClipRect({ }, 0); // FIXME: Incorrect for CSS regions.
+
+ if (renderBox.hasClip())
+ result.intersect(renderBox.clipRect({ }, 0)); // FIXME: Incorrect for CSS regions.
+
+ return result;
+}
+
+static LayoutRect overflowControlsHostLayerBox(const RenderBox& renderBox)
+{
+ return renderBox.paddingBoxRectIncludingScrollbar();
+}
+
void RenderLayerBacking::updateOpacity(const RenderStyle& style)
{
m_graphicsLayer->setOpacity(compositingOpacity(style.opacity()));
@@ -652,7 +674,8 @@
}
// FIXME: borderBoxRect isn't quite right here. This needs work: webkit.org/b/211787.
- auto perspectiveTransform = owningLayer().perspectiveTransform(borderBoxRect);
+ auto perspectiveRelativeBox = clipLayer ? clippingLayerBox(downcast<RenderBox>(renderer())) : borderBoxRect;
+ auto perspectiveTransform = owningLayer().perspectiveTransform(perspectiveRelativeBox);
if (clipLayer) {
clipLayer->setChildrenTransform(perspectiveTransform);
m_graphicsLayer->setChildrenTransform({ });
@@ -1148,28 +1171,6 @@
deviceScaleFactor()));
}
-static LayoutRect scrollContainerLayerBox(const RenderBox& renderBox)
-{
- return renderBox.paddingBoxRect();
-}
-
-static LayoutRect clippingLayerBox(const RenderBox& renderBox)
-{
- LayoutRect result = LayoutRect::infiniteRect();
- if (renderBox.hasOverflowClip())
- result = renderBox.overflowClipRect({ }, 0); // FIXME: Incorrect for CSS regions.
-
- if (renderBox.hasClip())
- result.intersect(renderBox.clipRect({ }, 0)); // FIXME: Incorrect for CSS regions.
-
- return result;
-}
-
-static LayoutRect overflowControlsHostLayerBox(const RenderBox& renderBox)
-{
- return renderBox.paddingBoxRectIncludingScrollbar();
-}
-
// FIXME: See if we need this now that updateGeometry() is always called in post-order traversal.
LayoutRect RenderLayerBacking::computeParentGraphicsLayerRect(const RenderLayer* compositedAncestor) const
{
