- Revision
- 291105
- Author
- [email protected]
- Date
- 2022-03-10 05:37:26 -0800 (Thu, 10 Mar 2022)
Log Message
Cleanup RenderLayer::currentTransform()
https://bugs.webkit.org/show_bug.cgi?id=237553
Reviewed by Rob Buis.
LayoutTests/imported/w3c:
Add two new WPT tests covering animations of the 'transform-box' property.
* web-platform-tests/css/css-transforms/animation/transform-box-expected.html: Added.
* web-platform-tests/css/css-transforms/animation/transform-box-will-change-transform-layer-expected.html: Added.
* web-platform-tests/css/css-transforms/animation/transform-box-will-change-transform-layer.html: Added.
* web-platform-tests/css/css-transforms/animation/transform-box.html: Added.
Source/WebCore:
In preparation for the upcoming SVG/CSS transforms support in LBSE,
the transform related code in RenderLayer is cleaned up, starting
with RenderLayers currentTransform() function.
RenderLayer::currentTransform() has two purposes. It can either be used
to re-compute the existing transformation matrix with different options
(e.g. include or exclude 'transform-origin' induced transformations), or
to retrieve the current transformation matrix from the animatedStyle() of
the associated renderer, if an accelerated transform animation is running
(triggered e.g. via CSS Animations / JS WebAnimations).
Currently the code to compute the transformation matrix is duplicated,
avoid that and unify the two code paths (re-compute CTM if accelerated transform
animations are running / re-compute CTM if transform-origin shall be excluded).
Add two new WPT tests that verify animating 'transform-box' is functional
for both composited & non-composited elements. Currently 'transform-box'
support is ignored for composited elements, as demonstrated by the
transform-box-with-change-transform-layer.html test.
Follow-up patches that fix the bugs depends on this initial cleanup patch.
For now mark the failing test as such until it's fixed.
Tests: imported/w3c/web-platform-tests/css/css-transforms/animation/transform-box-will-change-transform-layer.html
imported/w3c/web-platform-tests/css/css-transforms/animation/transform-box.html
* rendering/RenderLayer.cpp:
(WebCore::RenderLayer::currentTransform const):
LayoutTests:
Mark new WPT test css/css-transforms/animation/transform-box-will-change-transform-layer.html
as expected to fail, since 'transform-box' is ignored for composited elements at the moment.
* platform/glib/TestExpectations:
* platform/ios/TestExpectations:
* platform/mac/TestExpectations:
* platform/win/TestExpectations:
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (291104 => 291105)
--- trunk/LayoutTests/ChangeLog 2022-03-10 12:50:00 UTC (rev 291104)
+++ trunk/LayoutTests/ChangeLog 2022-03-10 13:37:26 UTC (rev 291105)
@@ -1,3 +1,18 @@
+2022-03-10 Nikolas Zimmermann <[email protected]>
+
+ Cleanup RenderLayer::currentTransform()
+ https://bugs.webkit.org/show_bug.cgi?id=237553
+
+ Reviewed by Rob Buis.
+
+ Mark new WPT test css/css-transforms/animation/transform-box-will-change-transform-layer.html
+ as expected to fail, since 'transform-box' is ignored for composited elements at the moment.
+
+ * platform/glib/TestExpectations:
+ * platform/ios/TestExpectations:
+ * platform/mac/TestExpectations:
+ * platform/win/TestExpectations:
+
2022-03-09 Cameron McCormack <[email protected]>
Unreviewed test gardening
Modified: trunk/LayoutTests/imported/w3c/ChangeLog (291104 => 291105)
--- trunk/LayoutTests/imported/w3c/ChangeLog 2022-03-10 12:50:00 UTC (rev 291104)
+++ trunk/LayoutTests/imported/w3c/ChangeLog 2022-03-10 13:37:26 UTC (rev 291105)
@@ -1,3 +1,17 @@
+2022-03-10 Nikolas Zimmermann <[email protected]>
+
+ Cleanup RenderLayer::currentTransform()
+ https://bugs.webkit.org/show_bug.cgi?id=237553
+
+ Reviewed by Rob Buis.
+
+ Add two new WPT tests covering animations of the 'transform-box' property.
+
+ * web-platform-tests/css/css-transforms/animation/transform-box-expected.html: Added.
+ * web-platform-tests/css/css-transforms/animation/transform-box-will-change-transform-layer-expected.html: Added.
+ * web-platform-tests/css/css-transforms/animation/transform-box-will-change-transform-layer.html: Added.
+ * web-platform-tests/css/css-transforms/animation/transform-box.html: Added.
+
2022-03-09 Antoine Quint <[email protected]>
[web-animations] font-variant-alternates should support discrete animation
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/animation/transform-box-expected.html (0 => 291105)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/animation/transform-box-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/animation/transform-box-expected.html 2022-03-10 13:37:26 UTC (rev 291105)
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>Reference for transform-box animation test equivalent</title>
+<style>
+ .block {
+ position: absolute;
+ border: 20px solid green;
+ width: 100px;
+ height: 100px;
+ left: 100px;
+ top: 200px;
+ }
+</style>
+<body>
+ <div class="block"></div>
+</body>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/animation/transform-box-will-change-transform-layer-expected.html (0 => 291105)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/animation/transform-box-will-change-transform-layer-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/animation/transform-box-will-change-transform-layer-expected.html 2022-03-10 13:37:26 UTC (rev 291105)
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+<meta charset="utf-8">
+<title>Reference for transform-box animation test equivalent</title>
+<style>
+ .block {
+ position: absolute;
+ border: 20px solid green;
+ width: 100px;
+ height: 100px;
+ left: 100px;
+ top: 200px;
+ }
+</style>
+<body>
+ <div class="block"></div>
+</body>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/animation/transform-box-will-change-transform-layer.html (0 => 291105)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/animation/transform-box-will-change-transform-layer.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/animation/transform-box-will-change-transform-layer.html 2022-03-10 13:37:26 UTC (rev 291105)
@@ -0,0 +1,62 @@
+<!doctype html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>Verify transform-box animations on a 'will-change: transform' layer</title>
+<link rel="match" href=""
+<link rel="help" href=""
+<script src=""
+<style>
+ .block {
+ position: absolute;
+ border: 20px solid black;
+ width: 100px;
+ height: 100px;
+ left: 100px;
+ top: 100px;
+ will-change: transform;
+ }
+
+ #transformBoxTarget {
+ transform: rotateZ(90deg);
+ transform-origin: 0% 100%;
+ transform-box: border-box;
+ }
+</style>
+<body>
+ <div id="transformBoxTarget" class="block"></div>
+
+<script>
+ 'use strict';
+
+ async function waitForNextFrame() {
+ return new Promise(resolve => {
+ window.requestAnimationFrame(() => {
+ resolve();
+ });
+ });
+ }
+
+ async function createAnimation(elementName, keyframes) {
+ const element = document.getElementById(elementName);
+ const anim = element.animate(keyframes, {
+ duration: 1000,
+ easing: 'linear',
+ fill: 'forwards',
+ });
+ anim.pause();
+ anim.currentTime = 2000;
+ return anim.ready;
+ }
+
+ _onload_ = async function() {
+ await waitForNextFrame();
+ await createAnimation('transformBoxTarget', [
+ { transformBox: 'border-box', borderColor: 'black' },
+ { transformBox: 'content-box', borderColor: 'green' }]);
+
+ await waitForNextFrame();
+ takeScreenshot();
+ };
+</script>
+</body>
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/animation/transform-box.html (0 => 291105)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/animation/transform-box.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/animation/transform-box.html 2022-03-10 13:37:26 UTC (rev 291105)
@@ -0,0 +1,60 @@
+<!doctype html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>Verify transform-box animations</title>
+<link rel="match" href=""
+<link rel="help" href=""
+<script src=""
+<style>
+ .block {
+ position: absolute;
+ border: 20px solid black;
+ width: 100px;
+ height: 100px;
+ left: 100px;
+ top: 100px;
+ }
+
+ #transformBoxTarget {
+ transform: rotateZ(90deg);
+ transform-origin: 0% 100%;
+ transform-box: border-box;
+ }
+</style>
+<body>
+ <div id="transformBoxTarget" class="block"></div>
+
+<script>
+ 'use strict';
+
+ async function waitForNextFrame() {
+ return new Promise(resolve => {
+ window.requestAnimationFrame(() => {
+ resolve();
+ });
+ });
+ }
+
+ async function createAnimation(elementName, keyframes) {
+ const element = document.getElementById(elementName);
+ const anim = element.animate(keyframes, {
+ duration: 1000,
+ easing: 'linear',
+ fill: 'forwards',
+ });
+ anim.pause();
+ anim.currentTime = 2000;
+ return anim.ready;
+ }
+
+ _onload_ = async function() {
+ await waitForNextFrame();
+ await createAnimation('transformBoxTarget', [
+ { transformBox: 'border-box', borderColor: 'black' },
+ { transformBox: 'content-box', borderColor: 'green' }]);
+
+ await waitForNextFrame();
+ takeScreenshot();
+ };
+</script>
+</body>
Modified: trunk/LayoutTests/platform/glib/TestExpectations (291104 => 291105)
--- trunk/LayoutTests/platform/glib/TestExpectations 2022-03-10 12:50:00 UTC (rev 291104)
+++ trunk/LayoutTests/platform/glib/TestExpectations 2022-03-10 13:37:26 UTC (rev 291105)
@@ -642,6 +642,9 @@
webkit.org/b/230277 imported/w3c/web-platform-tests/css/css-transforms/dynamic-fixed-pos-cb-change.html [ ImageOnlyFailure ]
webkit.org/b/230277 imported/w3c/web-platform-tests/css/css-transforms/perspective-transforms-equivalence.html [ ImageOnlyFailure ]
+# 'transform-box' support is broken for composited elements.
+webkit.org/b/237553 imported/w3c/web-platform-tests/css/css-transforms/animation/transform-box-will-change-transform-layer.html [ ImageOnlyFailure ]
+
webkit.org/b/227231 imported/w3c/web-platform-tests/css/css-counter-styles/arabic-indic/css3-counter-styles-101.html [ ImageOnlyFailure ]
webkit.org/b/227231 imported/w3c/web-platform-tests/css/css-counter-styles/arabic-indic/css3-counter-styles-102.html [ ImageOnlyFailure ]
webkit.org/b/227231 imported/w3c/web-platform-tests/css/css-counter-styles/arabic-indic/css3-counter-styles-103.html [ ImageOnlyFailure ]
Modified: trunk/LayoutTests/platform/ios/TestExpectations (291104 => 291105)
--- trunk/LayoutTests/platform/ios/TestExpectations 2022-03-10 12:50:00 UTC (rev 291104)
+++ trunk/LayoutTests/platform/ios/TestExpectations 2022-03-10 13:37:26 UTC (rev 291105)
@@ -2988,6 +2988,9 @@
webkit.org/b/202958 css3/filters/svg-blur-filter-clipped.html [ ImageOnlyFailure ]
+# 'transform-box' support is broken for composited elements.
+webkit.org/b/237553 imported/w3c/web-platform-tests/css/css-transforms/animation/transform-box-will-change-transform-layer.html [ ImageOnlyFailure ]
+
webkit.org/b/203305 imported/w3c/web-platform-tests/css/css-transitions/properties-value-001.html [ Pass Failure ]
webkit.org/b/203305 [ Debug ] imported/w3c/web-platform-tests/css/css-transitions/properties-value-inherit-001.html [ Pass Failure ]
webkit.org/b/203356 [ Debug ] imported/w3c/web-platform-tests/css/css-transitions/properties-value-003.html [ Pass Failure ]
Modified: trunk/LayoutTests/platform/mac/TestExpectations (291104 => 291105)
--- trunk/LayoutTests/platform/mac/TestExpectations 2022-03-10 12:50:00 UTC (rev 291104)
+++ trunk/LayoutTests/platform/mac/TestExpectations 2022-03-10 13:37:26 UTC (rev 291105)
@@ -2345,6 +2345,9 @@
webkit.org/b/230327 imported/w3c/web-platform-tests/css/css-transforms/crashtests/transform-marquee-resize-div-image-001.html [ Pass Failure ]
+# 'transform-box' support is broken for composited elements.
+webkit.org/b/237553 imported/w3c/web-platform-tests/css/css-transforms/animation/transform-box-will-change-transform-layer.html [ ImageOnlyFailure ]
+
# rdar://83591040
[ Monterey+ ] editing/mac/dictionary-lookup/dictionary-lookup-input.html [ Crash ]
[ Monterey+ ] editing/mac/dictionary-lookup/dictionary-lookup-inside-selection.html [ Crash ]
Modified: trunk/LayoutTests/platform/win/TestExpectations (291104 => 291105)
--- trunk/LayoutTests/platform/win/TestExpectations 2022-03-10 12:50:00 UTC (rev 291104)
+++ trunk/LayoutTests/platform/win/TestExpectations 2022-03-10 13:37:26 UTC (rev 291105)
@@ -933,6 +933,9 @@
webkit.org/b/149245 imported/w3c/web-platform-tests/css/css-multicol/multicol-span-all-block-sibling-003.xht [ Skip ]
webkit.org/b/149245 imported/w3c/web-platform-tests/css/css-multicol/multicol-span-all-margin-nested-firstchild-001.xht [ Skip ]
+# 'transform-box' support is broken for composited elements.
+webkit.org/b/237553 imported/w3c/web-platform-tests/css/css-transforms/animation/transform-box-will-change-transform-layer.html [ ImageOnlyFailure ]
+
# TODO EXIF-resolution is not supported
imported/w3c/web-platform-tests/density-size-correction/ [ Skip ]
Modified: trunk/Source/WebCore/ChangeLog (291104 => 291105)
--- trunk/Source/WebCore/ChangeLog 2022-03-10 12:50:00 UTC (rev 291104)
+++ trunk/Source/WebCore/ChangeLog 2022-03-10 13:37:26 UTC (rev 291105)
@@ -1,3 +1,39 @@
+2022-03-10 Nikolas Zimmermann <[email protected]>
+
+ Cleanup RenderLayer::currentTransform()
+ https://bugs.webkit.org/show_bug.cgi?id=237553
+
+ Reviewed by Rob Buis.
+
+ In preparation for the upcoming SVG/CSS transforms support in LBSE,
+ the transform related code in RenderLayer is cleaned up, starting
+ with RenderLayers currentTransform() function.
+
+ RenderLayer::currentTransform() has two purposes. It can either be used
+ to re-compute the existing transformation matrix with different options
+ (e.g. include or exclude 'transform-origin' induced transformations), or
+ to retrieve the current transformation matrix from the animatedStyle() of
+ the associated renderer, if an accelerated transform animation is running
+ (triggered e.g. via CSS Animations / JS WebAnimations).
+
+ Currently the code to compute the transformation matrix is duplicated,
+ avoid that and unify the two code paths (re-compute CTM if accelerated transform
+ animations are running / re-compute CTM if transform-origin shall be excluded).
+
+ Add two new WPT tests that verify animating 'transform-box' is functional
+ for both composited & non-composited elements. Currently 'transform-box'
+ support is ignored for composited elements, as demonstrated by the
+ transform-box-with-change-transform-layer.html test.
+
+ Follow-up patches that fix the bugs depends on this initial cleanup patch.
+ For now mark the failing test as such until it's fixed.
+
+ Tests: imported/w3c/web-platform-tests/css/css-transforms/animation/transform-box-will-change-transform-layer.html
+ imported/w3c/web-platform-tests/css/css-transforms/animation/transform-box.html
+
+ * rendering/RenderLayer.cpp:
+ (WebCore::RenderLayer::currentTransform const):
+
2022-03-09 Antoine Quint <[email protected]>
[web-animations] font-variant-alternates should support discrete animation
Modified: trunk/Source/WebCore/rendering/RenderLayer.cpp (291104 => 291105)
--- trunk/Source/WebCore/rendering/RenderLayer.cpp 2022-03-10 12:50:00 UTC (rev 291104)
+++ trunk/Source/WebCore/rendering/RenderLayer.cpp 2022-03-10 13:37:26 UTC (rev 291105)
@@ -1359,25 +1359,20 @@
auto& renderBox = downcast<RenderBox>(renderer());
- if (auto styleable = Styleable::fromRenderer(renderer())) {
- if (styleable->isRunningAcceleratedTransformAnimation()) {
- TransformationMatrix currTransform;
- std::unique_ptr<RenderStyle> style = renderer().animatedStyle();
- FloatRect pixelSnappedBorderRect = snapRectToDevicePixels(renderBox.referenceBox(transformBoxToCSSBoxType(style->transformBox())), renderBox.document().deviceScaleFactor());
- style->applyTransform(currTransform, pixelSnappedBorderRect, options);
- makeMatrixRenderable(currTransform, canRender3DTransforms());
- return currTransform;
- }
- }
+ // m_transform includes transform-origin and is affected by the choice of the transform-box.
+ // Therefore we can only use the cached m_transform, if the animation doesn't alter transform-box or excludes transform-origin.
- // m_transform includes transform-origin, so we need to recompute the transform here.
- if (!options.contains(RenderStyle::TransformOperationOption::TransformOrigin)) {
- TransformationMatrix currTransform;
- std::unique_ptr<RenderStyle> style = renderer().animatedStyle();
- FloatRect pixelSnappedBorderRect = snapRectToDevicePixels(renderBox.referenceBox(transformBoxToCSSBoxType(style->transformBox())), renderBox.document().deviceScaleFactor());
- renderBox.style().applyTransform(currTransform, pixelSnappedBorderRect, RenderStyle::individualTransformOperations);
- makeMatrixRenderable(currTransform, canRender3DTransforms());
- return currTransform;
+ // Query the animatedStyle() to obtain the current transformation, when accelerated transform animations are running.
+ auto styleable = Styleable::fromRenderer(renderBox);
+ if ((styleable && styleable->isRunningAcceleratedTransformAnimation()) || !options.contains(RenderStyle::TransformOperationOption::TransformOrigin)) {
+ std::unique_ptr<RenderStyle> animatedStyle = renderBox.animatedStyle();
+ auto pixelSnappedBorderRect = snapRectToDevicePixels(renderBox.referenceBox(transformBoxToCSSBoxType(animatedStyle->transformBox())), renderBox.document().deviceScaleFactor());
+
+ TransformationMatrix transform;
+ animatedStyle->applyTransform(transform, pixelSnappedBorderRect, options);
+
+ makeMatrixRenderable(transform, canRender3DTransforms());
+ return transform;
}
return *m_transform;
