[webkit-changes] [274978] trunk

Wed, 24 Mar 2021 15:26:12 -0700

Title: [274978] trunk
Revision
274978
Author
[email protected]
Date
2021-03-24 15:25:19 -0700 (Wed, 24 Mar 2021)

Log Message

Fix interpolation of the border-spacing property
https://bugs.webkit.org/show_bug.cgi?id=223702

Reviewed by Antti Koivisto.

LayoutTests/imported/w3c:

Import the border-spacing interpolation test with its 120 tests passing.

* web-platform-tests/css/css-tables/animations/border-spacing-interpolation-expected.txt: Added.
* web-platform-tests/css/css-tables/animations/border-spacing-interpolation.html: Added.

Source/WebCore:

Test: imported/w3c/web-platform-tests/css/css-tables/animations/border-spacing-interpolation.html

While we already supported animation of border-spacing, we did not correctly clip the interpolated
value to 0.

* animation/CSSPropertyAnimation.cpp:
(WebCore::CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap):

Modified Paths

Added Paths

Diff

Modified: trunk/LayoutTests/imported/w3c/ChangeLog (274977 => 274978)


--- trunk/LayoutTests/imported/w3c/ChangeLog	2021-03-24 22:07:51 UTC (rev 274977)
+++ trunk/LayoutTests/imported/w3c/ChangeLog	2021-03-24 22:25:19 UTC (rev 274978)
@@ -1,3 +1,15 @@
+2021-03-24  Antoine Quint  <[email protected]>
+
+        Fix interpolation of the border-spacing property
+        https://bugs.webkit.org/show_bug.cgi?id=223702
+
+        Reviewed by Antti Koivisto.
+
+        Import the border-spacing interpolation test with its 120 tests passing.
+
+        * web-platform-tests/css/css-tables/animations/border-spacing-interpolation-expected.txt: Added.
+        * web-platform-tests/css/css-tables/animations/border-spacing-interpolation.html: Added.
+
 2021-03-24  Rob Buis  <[email protected]>
 
         [css-contain] Parse CSS contain property

Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-tables/animations/border-spacing-interpolation-expected.txt (0 => 274978)


--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-tables/animations/border-spacing-interpolation-expected.txt	                        (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-tables/animations/border-spacing-interpolation-expected.txt	2021-03-24 22:25:19 UTC (rev 274978)
@@ -0,0 +1,122 @@
+
+PASS CSS Transitions: property <border-spacing> from neutral to [20px] at (-0.3) should be [7px 7px]
+PASS CSS Transitions: property <border-spacing> from neutral to [20px] at (0) should be [10px 10px]
+PASS CSS Transitions: property <border-spacing> from neutral to [20px] at (0.3) should be [13px 13px]
+PASS CSS Transitions: property <border-spacing> from neutral to [20px] at (0.6) should be [16px 16px]
+PASS CSS Transitions: property <border-spacing> from neutral to [20px] at (1) should be [20px 20px]
+PASS CSS Transitions: property <border-spacing> from neutral to [20px] at (1.5) should be [25px 25px]
+PASS CSS Transitions with transition: all: property <border-spacing> from neutral to [20px] at (-0.3) should be [7px 7px]
+PASS CSS Transitions with transition: all: property <border-spacing> from neutral to [20px] at (0) should be [10px 10px]
+PASS CSS Transitions with transition: all: property <border-spacing> from neutral to [20px] at (0.3) should be [13px 13px]
+PASS CSS Transitions with transition: all: property <border-spacing> from neutral to [20px] at (0.6) should be [16px 16px]
+PASS CSS Transitions with transition: all: property <border-spacing> from neutral to [20px] at (1) should be [20px 20px]
+PASS CSS Transitions with transition: all: property <border-spacing> from neutral to [20px] at (1.5) should be [25px 25px]
+PASS CSS Animations: property <border-spacing> from neutral to [20px] at (-0.3) should be [7px 7px]
+PASS CSS Animations: property <border-spacing> from neutral to [20px] at (0) should be [10px 10px]
+PASS CSS Animations: property <border-spacing> from neutral to [20px] at (0.3) should be [13px 13px]
+PASS CSS Animations: property <border-spacing> from neutral to [20px] at (0.6) should be [16px 16px]
+PASS CSS Animations: property <border-spacing> from neutral to [20px] at (1) should be [20px 20px]
+PASS CSS Animations: property <border-spacing> from neutral to [20px] at (1.5) should be [25px 25px]
+PASS Web Animations: property <border-spacing> from neutral to [20px] at (-0.3) should be [7px 7px]
+PASS Web Animations: property <border-spacing> from neutral to [20px] at (0) should be [10px 10px]
+PASS Web Animations: property <border-spacing> from neutral to [20px] at (0.3) should be [13px 13px]
+PASS Web Animations: property <border-spacing> from neutral to [20px] at (0.6) should be [16px 16px]
+PASS Web Animations: property <border-spacing> from neutral to [20px] at (1) should be [20px 20px]
+PASS Web Animations: property <border-spacing> from neutral to [20px] at (1.5) should be [25px 25px]
+PASS CSS Transitions: property <border-spacing> from [initial] to [20px] at (-0.3) should be [0px 0px]
+PASS CSS Transitions: property <border-spacing> from [initial] to [20px] at (0) should be [0px 0px]
+PASS CSS Transitions: property <border-spacing> from [initial] to [20px] at (0.3) should be [6px 6px]
+PASS CSS Transitions: property <border-spacing> from [initial] to [20px] at (0.6) should be [12px 12px]
+PASS CSS Transitions: property <border-spacing> from [initial] to [20px] at (1) should be [20px 20px]
+PASS CSS Transitions: property <border-spacing> from [initial] to [20px] at (1.5) should be [30px 30px]
+PASS CSS Transitions with transition: all: property <border-spacing> from [initial] to [20px] at (-0.3) should be [0px 0px]
+PASS CSS Transitions with transition: all: property <border-spacing> from [initial] to [20px] at (0) should be [0px 0px]
+PASS CSS Transitions with transition: all: property <border-spacing> from [initial] to [20px] at (0.3) should be [6px 6px]
+PASS CSS Transitions with transition: all: property <border-spacing> from [initial] to [20px] at (0.6) should be [12px 12px]
+PASS CSS Transitions with transition: all: property <border-spacing> from [initial] to [20px] at (1) should be [20px 20px]
+PASS CSS Transitions with transition: all: property <border-spacing> from [initial] to [20px] at (1.5) should be [30px 30px]
+PASS CSS Animations: property <border-spacing> from [initial] to [20px] at (-0.3) should be [0px 0px]
+PASS CSS Animations: property <border-spacing> from [initial] to [20px] at (0) should be [0px 0px]
+PASS CSS Animations: property <border-spacing> from [initial] to [20px] at (0.3) should be [6px 6px]
+PASS CSS Animations: property <border-spacing> from [initial] to [20px] at (0.6) should be [12px 12px]
+PASS CSS Animations: property <border-spacing> from [initial] to [20px] at (1) should be [20px 20px]
+PASS CSS Animations: property <border-spacing> from [initial] to [20px] at (1.5) should be [30px 30px]
+PASS Web Animations: property <border-spacing> from [initial] to [20px] at (-0.3) should be [0px 0px]
+PASS Web Animations: property <border-spacing> from [initial] to [20px] at (0) should be [0px 0px]
+PASS Web Animations: property <border-spacing> from [initial] to [20px] at (0.3) should be [6px 6px]
+PASS Web Animations: property <border-spacing> from [initial] to [20px] at (0.6) should be [12px 12px]
+PASS Web Animations: property <border-spacing> from [initial] to [20px] at (1) should be [20px 20px]
+PASS Web Animations: property <border-spacing> from [initial] to [20px] at (1.5) should be [30px 30px]
+PASS CSS Transitions: property <border-spacing> from [inherit] to [20px] at (-0.3) should be [33px 33px]
+PASS CSS Transitions: property <border-spacing> from [inherit] to [20px] at (0) should be [30px 30px]
+PASS CSS Transitions: property <border-spacing> from [inherit] to [20px] at (0.3) should be [27px 27px]
+PASS CSS Transitions: property <border-spacing> from [inherit] to [20px] at (0.6) should be [24px 24px]
+PASS CSS Transitions: property <border-spacing> from [inherit] to [20px] at (1) should be [20px 20px]
+PASS CSS Transitions: property <border-spacing> from [inherit] to [20px] at (1.5) should be [15px 15px]
+PASS CSS Transitions with transition: all: property <border-spacing> from [inherit] to [20px] at (-0.3) should be [33px 33px]
+PASS CSS Transitions with transition: all: property <border-spacing> from [inherit] to [20px] at (0) should be [30px 30px]
+PASS CSS Transitions with transition: all: property <border-spacing> from [inherit] to [20px] at (0.3) should be [27px 27px]
+PASS CSS Transitions with transition: all: property <border-spacing> from [inherit] to [20px] at (0.6) should be [24px 24px]
+PASS CSS Transitions with transition: all: property <border-spacing> from [inherit] to [20px] at (1) should be [20px 20px]
+PASS CSS Transitions with transition: all: property <border-spacing> from [inherit] to [20px] at (1.5) should be [15px 15px]
+PASS CSS Animations: property <border-spacing> from [inherit] to [20px] at (-0.3) should be [33px 33px]
+PASS CSS Animations: property <border-spacing> from [inherit] to [20px] at (0) should be [30px 30px]
+PASS CSS Animations: property <border-spacing> from [inherit] to [20px] at (0.3) should be [27px 27px]
+PASS CSS Animations: property <border-spacing> from [inherit] to [20px] at (0.6) should be [24px 24px]
+PASS CSS Animations: property <border-spacing> from [inherit] to [20px] at (1) should be [20px 20px]
+PASS CSS Animations: property <border-spacing> from [inherit] to [20px] at (1.5) should be [15px 15px]
+PASS Web Animations: property <border-spacing> from [inherit] to [20px] at (-0.3) should be [33px 33px]
+PASS Web Animations: property <border-spacing> from [inherit] to [20px] at (0) should be [30px 30px]
+PASS Web Animations: property <border-spacing> from [inherit] to [20px] at (0.3) should be [27px 27px]
+PASS Web Animations: property <border-spacing> from [inherit] to [20px] at (0.6) should be [24px 24px]
+PASS Web Animations: property <border-spacing> from [inherit] to [20px] at (1) should be [20px 20px]
+PASS Web Animations: property <border-spacing> from [inherit] to [20px] at (1.5) should be [15px 15px]
+PASS CSS Transitions: property <border-spacing> from [unset] to [20px] at (-0.3) should be [33px 33px]
+PASS CSS Transitions: property <border-spacing> from [unset] to [20px] at (0) should be [30px 30px]
+PASS CSS Transitions: property <border-spacing> from [unset] to [20px] at (0.3) should be [27px 27px]
+PASS CSS Transitions: property <border-spacing> from [unset] to [20px] at (0.6) should be [24px 24px]
+PASS CSS Transitions: property <border-spacing> from [unset] to [20px] at (1) should be [20px 20px]
+PASS CSS Transitions: property <border-spacing> from [unset] to [20px] at (1.5) should be [15px 15px]
+PASS CSS Transitions with transition: all: property <border-spacing> from [unset] to [20px] at (-0.3) should be [33px 33px]
+PASS CSS Transitions with transition: all: property <border-spacing> from [unset] to [20px] at (0) should be [30px 30px]
+PASS CSS Transitions with transition: all: property <border-spacing> from [unset] to [20px] at (0.3) should be [27px 27px]
+PASS CSS Transitions with transition: all: property <border-spacing> from [unset] to [20px] at (0.6) should be [24px 24px]
+PASS CSS Transitions with transition: all: property <border-spacing> from [unset] to [20px] at (1) should be [20px 20px]
+PASS CSS Transitions with transition: all: property <border-spacing> from [unset] to [20px] at (1.5) should be [15px 15px]
+PASS CSS Animations: property <border-spacing> from [unset] to [20px] at (-0.3) should be [33px 33px]
+PASS CSS Animations: property <border-spacing> from [unset] to [20px] at (0) should be [30px 30px]
+PASS CSS Animations: property <border-spacing> from [unset] to [20px] at (0.3) should be [27px 27px]
+PASS CSS Animations: property <border-spacing> from [unset] to [20px] at (0.6) should be [24px 24px]
+PASS CSS Animations: property <border-spacing> from [unset] to [20px] at (1) should be [20px 20px]
+PASS CSS Animations: property <border-spacing> from [unset] to [20px] at (1.5) should be [15px 15px]
+PASS Web Animations: property <border-spacing> from [unset] to [20px] at (-0.3) should be [33px 33px]
+PASS Web Animations: property <border-spacing> from [unset] to [20px] at (0) should be [30px 30px]
+PASS Web Animations: property <border-spacing> from [unset] to [20px] at (0.3) should be [27px 27px]
+PASS Web Animations: property <border-spacing> from [unset] to [20px] at (0.6) should be [24px 24px]
+PASS Web Animations: property <border-spacing> from [unset] to [20px] at (1) should be [20px 20px]
+PASS Web Animations: property <border-spacing> from [unset] to [20px] at (1.5) should be [15px 15px]
+PASS CSS Transitions: property <border-spacing> from [0px] to [10px] at (-0.3) should be [0px 0px]
+PASS CSS Transitions: property <border-spacing> from [0px] to [10px] at (0) should be [0px 0px]
+PASS CSS Transitions: property <border-spacing> from [0px] to [10px] at (0.3) should be [3px 3px]
+PASS CSS Transitions: property <border-spacing> from [0px] to [10px] at (0.6) should be [6px 6px]
+PASS CSS Transitions: property <border-spacing> from [0px] to [10px] at (1) should be [10px 10px]
+PASS CSS Transitions: property <border-spacing> from [0px] to [10px] at (1.5) should be [15px 15px]
+PASS CSS Transitions with transition: all: property <border-spacing> from [0px] to [10px] at (-0.3) should be [0px 0px]
+PASS CSS Transitions with transition: all: property <border-spacing> from [0px] to [10px] at (0) should be [0px 0px]
+PASS CSS Transitions with transition: all: property <border-spacing> from [0px] to [10px] at (0.3) should be [3px 3px]
+PASS CSS Transitions with transition: all: property <border-spacing> from [0px] to [10px] at (0.6) should be [6px 6px]
+PASS CSS Transitions with transition: all: property <border-spacing> from [0px] to [10px] at (1) should be [10px 10px]
+PASS CSS Transitions with transition: all: property <border-spacing> from [0px] to [10px] at (1.5) should be [15px 15px]
+PASS CSS Animations: property <border-spacing> from [0px] to [10px] at (-0.3) should be [0px 0px]
+PASS CSS Animations: property <border-spacing> from [0px] to [10px] at (0) should be [0px 0px]
+PASS CSS Animations: property <border-spacing> from [0px] to [10px] at (0.3) should be [3px 3px]
+PASS CSS Animations: property <border-spacing> from [0px] to [10px] at (0.6) should be [6px 6px]
+PASS CSS Animations: property <border-spacing> from [0px] to [10px] at (1) should be [10px 10px]
+PASS CSS Animations: property <border-spacing> from [0px] to [10px] at (1.5) should be [15px 15px]
+PASS Web Animations: property <border-spacing> from [0px] to [10px] at (-0.3) should be [0px 0px]
+PASS Web Animations: property <border-spacing> from [0px] to [10px] at (0) should be [0px 0px]
+PASS Web Animations: property <border-spacing> from [0px] to [10px] at (0.3) should be [3px 3px]
+PASS Web Animations: property <border-spacing> from [0px] to [10px] at (0.6) should be [6px 6px]
+PASS Web Animations: property <border-spacing> from [0px] to [10px] at (1) should be [10px 10px]
+PASS Web Animations: property <border-spacing> from [0px] to [10px] at (1.5) should be [15px 15px]
+

Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-tables/animations/border-spacing-interpolation.html (0 => 274978)


--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-tables/animations/border-spacing-interpolation.html	                        (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-tables/animations/border-spacing-interpolation.html	2021-03-24 22:25:19 UTC (rev 274978)
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>boder-spacing interpolation</title>
+<link rel="help" href=""
+<meta name="assert" content="border-spacing supports animation">
+
+<script src=""
+<script src=""
+<script src=""
+
+<style>
+.parent {
+  border-spacing: 30px;
+}
+
+.target {
+  width: 50px;
+  height: 50px;
+  background-color: black;
+  display: inline-block;
+  margin: 18px;
+  border-collapse: separate;
+  border-spacing: 10px;
+}
+
+.target td {
+  background-color: white;
+  border: 1px solid orange;
+  width: 10px;
+  height: 10px;
+}
+
+.expected {
+  background-color: green;
+}
+</style>
+
+<body>
+<template id="target-template">
+  <table>
+    <tbody>
+      <tr>
+        <td></td>
+        <td></td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+test_interpolation({
+  property: 'border-spacing',
+  from: neutralKeyframe,
+  to: '20px',
+}, [
+  {at: -0.3, expect: '7px 7px'},
+  {at: 0, expect: '10px 10px'},
+  {at: 0.3, expect: '13px 13px'},
+  {at: 0.6, expect: '16px 16px'},
+  {at: 1, expect: '20px 20px'},
+  {at: 1.5, expect: '25px 25px'},
+]);
+
+test_interpolation({
+  property: 'border-spacing',
+  from: 'initial',
+  to: '20px',
+}, [
+  {at: -0.3, expect: '0px 0px'},
+  {at: 0, expect: '0px 0px'},
+  {at: 0.3, expect: '6px 6px'},
+  {at: 0.6, expect: '12px 12px'},
+  {at: 1, expect: '20px 20px'},
+  {at: 1.5, expect: '30px 30px'},
+]);
+
+test_interpolation({
+  property: 'border-spacing',
+  from: 'inherit',
+  to: '20px',
+}, [
+  {at: -0.3, expect: '33px 33px'},
+  {at: 0, expect: '30px 30px'},
+  {at: 0.3, expect: '27px 27px'},
+  {at: 0.6, expect: '24px 24px'},
+  {at: 1, expect: '20px 20px'},
+  {at: 1.5, expect: '15px 15px'},
+]);
+
+test_interpolation({
+  property: 'border-spacing',
+  from: 'unset',
+  to: '20px',
+}, [
+  {at: -0.3, expect: '33px 33px'},
+  {at: 0, expect: '30px 30px'},
+  {at: 0.3, expect: '27px 27px'},
+  {at: 0.6, expect: '24px 24px'},
+  {at: 1, expect: '20px 20px'},
+  {at: 1.5, expect: '15px 15px'},
+]);
+
+test_interpolation({
+  property: 'border-spacing',
+  from: '0px',
+  to: '10px'
+}, [
+  {at: -0.3, expect: '0px 0px'}, // Can't be negative.
+  {at: 0, expect: '0px 0px'},
+  {at: 0.3, expect: '3px 3px'},
+  {at: 0.6, expect: '6px 6px'},
+  {at: 1, expect: '10px 10px'},
+  {at: 1.5, expect: '15px 15px'}
+]);
+</script>
+</body>

Modified: trunk/Source/WebCore/ChangeLog (274977 => 274978)


--- trunk/Source/WebCore/ChangeLog	2021-03-24 22:07:51 UTC (rev 274977)
+++ trunk/Source/WebCore/ChangeLog	2021-03-24 22:25:19 UTC (rev 274978)
@@ -1,3 +1,18 @@
+2021-03-24  Antoine Quint  <[email protected]>
+
+        Fix interpolation of the border-spacing property
+        https://bugs.webkit.org/show_bug.cgi?id=223702
+
+        Reviewed by Antti Koivisto.
+
+        Test: imported/w3c/web-platform-tests/css/css-tables/animations/border-spacing-interpolation.html
+
+        While we already supported animation of border-spacing, we did not correctly clip the interpolated
+        value to 0.
+
+        * animation/CSSPropertyAnimation.cpp:
+        (WebCore::CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap):
+
 2021-03-24  Simon Fraser  <[email protected]>
 
         Add DisplayLink log channels in WebCore and WebKit

Modified: trunk/Source/WebCore/animation/CSSPropertyAnimation.cpp (274977 => 274978)


--- trunk/Source/WebCore/animation/CSSPropertyAnimation.cpp	2021-03-24 22:07:51 UTC (rev 274977)
+++ trunk/Source/WebCore/animation/CSSPropertyAnimation.cpp	2021-03-24 22:25:19 UTC (rev 274978)
@@ -2046,8 +2046,8 @@
         new LengthVariantPropertyWrapper<GapLength>(CSSPropertyRowGap, &RenderStyle::rowGap, &RenderStyle::setRowGap),
         new AutoPropertyWrapper<unsigned short>(CSSPropertyColumnCount, &RenderStyle::columnCount, &RenderStyle::setColumnCount, &RenderStyle::hasAutoColumnCount, &RenderStyle::setHasAutoColumnCount, 1),
         new AutoPropertyWrapper<float>(CSSPropertyColumnWidth, &RenderStyle::columnWidth, &RenderStyle::setColumnWidth, &RenderStyle::hasAutoColumnWidth, &RenderStyle::setHasAutoColumnWidth, 0),
-        new PropertyWrapper<float>(CSSPropertyWebkitBorderHorizontalSpacing, &RenderStyle::horizontalBorderSpacing, &RenderStyle::setHorizontalBorderSpacing),
-        new PropertyWrapper<float>(CSSPropertyWebkitBorderVerticalSpacing, &RenderStyle::verticalBorderSpacing, &RenderStyle::setVerticalBorderSpacing),
+        new NonNegativeFloatPropertyWrapper(CSSPropertyWebkitBorderHorizontalSpacing, &RenderStyle::horizontalBorderSpacing, &RenderStyle::setHorizontalBorderSpacing),
+        new NonNegativeFloatPropertyWrapper(CSSPropertyWebkitBorderVerticalSpacing, &RenderStyle::verticalBorderSpacing, &RenderStyle::setVerticalBorderSpacing),
         new AutoPropertyWrapper<int>(CSSPropertyZIndex, &RenderStyle::specifiedZIndex, &RenderStyle::setSpecifiedZIndex, &RenderStyle::hasAutoSpecifiedZIndex, &RenderStyle::setHasAutoSpecifiedZIndex),
         new PositivePropertyWrapper<unsigned short>(CSSPropertyOrphans, &RenderStyle::orphans, &RenderStyle::setOrphans),
         new PositivePropertyWrapper<unsigned short>(CSSPropertyWidows, &RenderStyle::widows, &RenderStyle::setWidows),

_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to