Diff
Modified: trunk/LayoutTests/ChangeLog (268546 => 268547)
--- trunk/LayoutTests/ChangeLog 2020-10-15 19:48:05 UTC (rev 268546)
+++ trunk/LayoutTests/ChangeLog 2020-10-15 19:49:00 UTC (rev 268547)
@@ -1,3 +1,21 @@
+2020-10-15 Antoine Quint <[email protected]>
+
+ Updating an individual transform CSS property has no visual change when composited
+ https://bugs.webkit.org/show_bug.cgi?id=217769
+ <rdar://problem/70344280>
+
+ Reviewed by Simon Fraser.
+
+ Add new tests that check that changing the value of one of the individual transform
+ CSS properties when the element is composited yields a visual change.
+
+ * transforms/2d/rotate-change-composited-expected.html: Added.
+ * transforms/2d/rotate-change-composited.html: Added.
+ * transforms/2d/scale-change-composited-expected.html: Added.
+ * transforms/2d/scale-change-composited.html: Added.
+ * transforms/2d/translate-change-composited-expected.html: Added.
+ * transforms/2d/translate-change-composited.html: Added.
+
2020-10-15 Carlos Alberto Lopez Perez <[email protected]>
[GTK] Rebaseline after r268520
Added: trunk/LayoutTests/transforms/2d/rotate-change-composited-expected.html (0 => 268547)
--- trunk/LayoutTests/transforms/2d/rotate-change-composited-expected.html (rev 0)
+++ trunk/LayoutTests/transforms/2d/rotate-change-composited-expected.html 2020-10-15 19:49:00 UTC (rev 268547)
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+
+div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100px;
+ height: 100px;
+ background-color: black;
+ transform: rotate(30deg);
+ will-change: transform;
+}
+
+</style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/transforms/2d/rotate-change-composited.html (0 => 268547)
--- trunk/LayoutTests/transforms/2d/rotate-change-composited.html (rev 0)
+++ trunk/LayoutTests/transforms/2d/rotate-change-composited.html 2020-10-15 19:49:00 UTC (rev 268547)
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+
+div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100px;
+ height: 100px;
+ background-color: black;
+ will-change: transform;
+}
+
+div.changed {
+ rotate: 30deg;
+}
+
+</style>
+</head>
+<body>
+<div></div>
+<script>
+ if (window.testRunner)
+ window.testRunner.waitUntilDone();
+
+ requestAnimationFrame(() => {
+ document.querySelector("div").classList.add("changed");
+ if (window.testRunner)
+ window.testRunner.notifyDone();
+ });
+</script>
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/transforms/2d/scale-change-composited-expected.html (0 => 268547)
--- trunk/LayoutTests/transforms/2d/scale-change-composited-expected.html (rev 0)
+++ trunk/LayoutTests/transforms/2d/scale-change-composited-expected.html 2020-10-15 19:49:00 UTC (rev 268547)
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+
+div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100px;
+ height: 100px;
+ background-color: black;
+ transform: scale(0.5);
+ will-change: transform;
+}
+
+</style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/transforms/2d/scale-change-composited.html (0 => 268547)
--- trunk/LayoutTests/transforms/2d/scale-change-composited.html (rev 0)
+++ trunk/LayoutTests/transforms/2d/scale-change-composited.html 2020-10-15 19:49:00 UTC (rev 268547)
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+
+div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100px;
+ height: 100px;
+ background-color: black;
+ will-change: transform;
+}
+
+div.changed {
+ scale: 0.5;
+}
+
+</style>
+</head>
+<body>
+<div></div>
+<script>
+ if (window.testRunner)
+ window.testRunner.waitUntilDone();
+
+ requestAnimationFrame(() => {
+ document.querySelector("div").classList.add("changed");
+ if (window.testRunner)
+ window.testRunner.notifyDone();
+ });
+</script>
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/transforms/2d/translate-change-composited-expected.html (0 => 268547)
--- trunk/LayoutTests/transforms/2d/translate-change-composited-expected.html (rev 0)
+++ trunk/LayoutTests/transforms/2d/translate-change-composited-expected.html 2020-10-15 19:49:00 UTC (rev 268547)
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+
+div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100px;
+ height: 100px;
+ background-color: black;
+ transform: translateX(100px);
+ will-change: transform;
+}
+
+</style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/transforms/2d/translate-change-composited.html (0 => 268547)
--- trunk/LayoutTests/transforms/2d/translate-change-composited.html (rev 0)
+++ trunk/LayoutTests/transforms/2d/translate-change-composited.html 2020-10-15 19:49:00 UTC (rev 268547)
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+
+div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100px;
+ height: 100px;
+ background-color: black;
+ will-change: transform;
+}
+
+div.changed {
+ translate: 100px;
+}
+
+</style>
+</head>
+<body>
+<div></div>
+<script>
+ if (window.testRunner)
+ window.testRunner.waitUntilDone();
+
+ requestAnimationFrame(() => {
+ document.querySelector("div").classList.add("changed");
+ if (window.testRunner)
+ window.testRunner.notifyDone();
+ });
+</script>
+</body>
+</html>
\ No newline at end of file
Modified: trunk/Source/WebCore/ChangeLog (268546 => 268547)
--- trunk/Source/WebCore/ChangeLog 2020-10-15 19:48:05 UTC (rev 268546)
+++ trunk/Source/WebCore/ChangeLog 2020-10-15 19:49:00 UTC (rev 268547)
@@ -1,3 +1,28 @@
+2020-10-15 Antoine Quint <[email protected]>
+
+ Updating an individual transform CSS property has no visual change when composited
+ https://bugs.webkit.org/show_bug.cgi?id=217769
+ <rdar://problem/70344280>
+
+ Reviewed by Simon Fraser.
+
+ Ensure that changes to the translate, scale and rotate CSS properties have the same
+ effect than when the transform property is changed for composited elements.
+
+ Tests: transforms/2d/rotate-change-composited.html
+ transforms/2d/scale-change-composited.html
+ transforms/2d/translate-change-composited.html
+
+ * platform/graphics/transforms/RotateTransformOperation.h:
+ * platform/graphics/transforms/ScaleTransformOperation.h:
+ * platform/graphics/transforms/TranslateTransformOperation.h:
+ * rendering/RenderLayerCompositor.cpp:
+ (WebCore::recompositeChangeRequiresGeometryUpdate):
+ (WebCore::styleHas3DTransformOperation):
+ (WebCore::styleTransformOperationsAreRepresentableIn2D):
+ (WebCore::RenderLayerCompositor::requiresCompositingForTransform const):
+ (WebCore::RenderLayerCompositor::layerHas3DContent const):
+
2020-10-15 Fujii Hironori <[email protected]>
[WinCairo][GraphicsLayerTextureMapper] A parent layer's filter isn't applied to its child layer at the first paint
Modified: trunk/Source/WebCore/platform/graphics/transforms/RotateTransformOperation.h (268546 => 268547)
--- trunk/Source/WebCore/platform/graphics/transforms/RotateTransformOperation.h 2020-10-15 19:48:05 UTC (rev 268546)
+++ trunk/Source/WebCore/platform/graphics/transforms/RotateTransformOperation.h 2020-10-15 19:49:00 UTC (rev 268547)
@@ -57,9 +57,10 @@
bool isIdentity() const final { return !m_angle; }
+ bool isRepresentableIn2D() const final { return (!m_x && !m_y) || !m_angle; }
+
private:
bool isAffectedByTransformOrigin() const override { return !isIdentity(); }
- bool isRepresentableIn2D() const final { return (!m_x && !m_y) || !m_angle; }
bool apply(TransformationMatrix& transform, const FloatSize& /*borderBoxSize*/) const override
{
Modified: trunk/Source/WebCore/platform/graphics/transforms/ScaleTransformOperation.h (268546 => 268547)
--- trunk/Source/WebCore/platform/graphics/transforms/ScaleTransformOperation.h 2020-10-15 19:48:05 UTC (rev 268546)
+++ trunk/Source/WebCore/platform/graphics/transforms/ScaleTransformOperation.h 2020-10-15 19:49:00 UTC (rev 268547)
@@ -56,9 +56,10 @@
bool isIdentity() const final { return m_x == 1 && m_y == 1 && m_z == 1; }
+ bool isRepresentableIn2D() const final { return m_z == 1; }
+
private:
bool isAffectedByTransformOrigin() const override { return !isIdentity(); }
- bool isRepresentableIn2D() const final { return m_z == 1; }
bool apply(TransformationMatrix& transform, const FloatSize&) const override
{
Modified: trunk/Source/WebCore/platform/graphics/transforms/TranslateTransformOperation.h (268546 => 268547)
--- trunk/Source/WebCore/platform/graphics/transforms/TranslateTransformOperation.h 2020-10-15 19:48:05 UTC (rev 268546)
+++ trunk/Source/WebCore/platform/graphics/transforms/TranslateTransformOperation.h 2020-10-15 19:49:00 UTC (rev 268547)
@@ -68,9 +68,10 @@
Ref<TransformOperation> blend(const TransformOperation* from, double progress, bool blendToIdentity = false) final;
-private:
bool isRepresentableIn2D() const final { return m_z.isZero(); }
+private:
+
void dump(WTF::TextStream&) const final;
TranslateTransformOperation(const Length& tx, const Length& ty, const Length& tz, OperationType type)
Modified: trunk/Source/WebCore/rendering/RenderLayerCompositor.cpp (268546 => 268547)
--- trunk/Source/WebCore/rendering/RenderLayerCompositor.cpp 2020-10-15 19:48:05 UTC (rev 268546)
+++ trunk/Source/WebCore/rendering/RenderLayerCompositor.cpp 2020-10-15 19:49:00 UTC (rev 268547)
@@ -1595,6 +1595,9 @@
static bool recompositeChangeRequiresGeometryUpdate(const RenderStyle& oldStyle, const RenderStyle& newStyle)
{
return oldStyle.transform() != newStyle.transform()
+ || oldStyle.translate() != newStyle.translate()
+ || oldStyle.scale() != newStyle.scale()
+ || oldStyle.rotate() != newStyle.rotate()
|| oldStyle.transformOriginX() != newStyle.transformOriginX()
|| oldStyle.transformOriginY() != newStyle.transformOriginY()
|| oldStyle.transformOriginZ() != newStyle.transformOriginZ()
@@ -2976,6 +2979,22 @@
return false;
}
+static bool styleHas3DTransformOperation(const RenderStyle& style)
+{
+ return style.transform().has3DOperation()
+ || (style.translate() && style.translate()->is3DOperation())
+ || (style.scale() && style.scale()->is3DOperation())
+ || (style.rotate() && style.rotate()->is3DOperation());
+}
+
+static bool styleTransformOperationsAreRepresentableIn2D(const RenderStyle& style)
+{
+ return style.transform().isRepresentableIn2D()
+ && (!style.translate() || style.translate()->isRepresentableIn2D())
+ && (!style.scale() || style.scale()->isRepresentableIn2D())
+ && (!style.rotate() || style.rotate()->isRepresentableIn2D());
+}
+
bool RenderLayerCompositor::requiresCompositingForTransform(RenderLayerModelObject& renderer) const
{
if (!(m_compositingTriggers & ChromeClient::ThreeDTransformTrigger))
@@ -2988,12 +3007,12 @@
switch (m_compositingPolicy) {
case CompositingPolicy::Normal:
- return renderer.style().transform().has3DOperation();
+ return styleHas3DTransformOperation(renderer.style());
case CompositingPolicy::Conservative:
// Continue to allow pages to avoid the very slow software filter path.
- if (renderer.style().transform().has3DOperation() && renderer.hasFilter())
+ if (styleHas3DTransformOperation(renderer.style()) && renderer.hasFilter())
return true;
- return renderer.style().transform().isRepresentableIn2D() ? false : true;
+ return styleTransformOperationsAreRepresentableIn2D(renderer.style()) ? false : true;
}
return false;
}
@@ -4268,7 +4287,7 @@
{
const RenderStyle& style = layer.renderer().style();
- if (style.transformStyle3D() == TransformStyle3D::Preserve3D || style.hasPerspective() || style.transform().has3DOperation())
+ if (style.transformStyle3D() == TransformStyle3D::Preserve3D || style.hasPerspective() || styleHas3DTransformOperation(style))
return true;
const_cast<RenderLayer&>(layer).updateLayerListsIfNeeded();
