Don't run transitions to/from 'auto' values
authorsimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 3 May 2016 03:39:51 +0000 (03:39 +0000)
committersimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 3 May 2016 03:39:51 +0000 (03:39 +0000)
https://bugs.webkit.org/show_bug.cgi?id=38243
rdar://problem/20904225

Reviewed by Dean Jackson.
Source/WebCore:

The specified behavior of transitions and animations is to not animate when either endpoint is 'auto'.
Previously, we were treating 'auto' as zero and interpolating, which caused unwanted animations
on fandango.com, airbnb.com and others.

Fix by having blend() return the from value if progress is 0, otherwise the to value. The
isZero() check can be removed, since this was effectively picking up auto value for one endpoint.

Tests: transitions/lengthsize-transition-to-from-auto.html
       transitions/transition-to-from-auto.html

* platform/Length.cpp:
(WebCore::blend):

LayoutTests:

* platform/mac-wk2/transitions/default-timing-function-expected.txt: New baseline.
* transitions/default-timing-function.html: Set explicit start value.
* transitions/interrupted-all-transition.html: Set explicit start value.
* transitions/lengthsize-transition-to-from-auto-expected.txt: Added.
* transitions/lengthsize-transition-to-from-auto.html: Added.
* transitions/transition-to-from-auto-expected.txt: Added.
* transitions/transition-to-from-auto.html: Added.
* transitions/zero-duration-in-list.html: Set explicit start value.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@200360 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/platform/mac-wk2/transitions/default-timing-function-expected.txt
LayoutTests/transitions/default-timing-function.html
LayoutTests/transitions/interrupted-all-transition.html
LayoutTests/transitions/lengthsize-transition-to-from-auto-expected.txt [new file with mode: 0644]
LayoutTests/transitions/lengthsize-transition-to-from-auto.html [new file with mode: 0644]
LayoutTests/transitions/transition-to-from-auto-expected.txt [new file with mode: 0644]
LayoutTests/transitions/transition-to-from-auto.html [new file with mode: 0644]
LayoutTests/transitions/zero-duration-in-list.html
Source/WebCore/ChangeLog
Source/WebCore/platform/Length.cpp

index 8b7f229..c95ecdb 100644 (file)
@@ -1,3 +1,20 @@
+2016-05-02  Simon Fraser  <simon.fraser@apple.com>
+
+        Don't run transitions to/from 'auto' values
+        https://bugs.webkit.org/show_bug.cgi?id=38243
+        rdar://problem/20904225
+
+        Reviewed by Dean Jackson.
+
+        * platform/mac-wk2/transitions/default-timing-function-expected.txt: New baseline.
+        * transitions/default-timing-function.html: Set explicit start value.
+        * transitions/interrupted-all-transition.html: Set explicit start value.
+        * transitions/lengthsize-transition-to-from-auto-expected.txt: Added.
+        * transitions/lengthsize-transition-to-from-auto.html: Added.
+        * transitions/transition-to-from-auto-expected.txt: Added.
+        * transitions/transition-to-from-auto.html: Added.
+        * transitions/zero-duration-in-list.html: Set explicit start value.
+
 2016-05-02  Chris Dumez  <cdumez@apple.com>
 
         Indexing CSSStyleDeclaration object with out-of-range index should return undefined
index c4ff004..ccb16fc 100644 (file)
@@ -4,17 +4,17 @@ layer at (0,0) size 800x252
   RenderBlock {HTML} at (0,0) size 800x252
     RenderBody {BODY} at (8,8) size 784x236
       RenderBlock {DIV} at (0,200) size 784x36
-        RenderText {#text} at (0,0) size 487x18
-          text run at (0,0) width 487: "PASS - \"left\" property for \"box\" element at 0.5s saw something close to: 322"
-        RenderBR {BR} at (487,0) size 0x18
-        RenderText {#text} at (0,18) size 600x18
-          text run at (0,18) width 600: "PASS - \"-webkit-transform.4\" property for \"box2\" element at 0.5s saw something close to: 322"
-        RenderBR {BR} at (600,18) size 0x18
+        RenderText {#text} at (0,0) size 493x18
+          text run at (0,0) width 493: "PASS - \"left\" property for \"box\" element at 0.5s saw something close to: 322"
+        RenderBR {BR} at (492,0) size 1x18
+        RenderText {#text} at (0,18) size 608x18
+          text run at (0,18) width 608: "PASS - \"-webkit-transform.4\" property for \"box2\" element at 0.5s saw something close to: 322"
+        RenderBR {BR} at (607,18) size 1x18
 layer at (8,8) size 784x200
   RenderBlock (relative positioned) {DIV} at (0,0) size 784x200
 layer at (330,8) size 100x200
   RenderBlock (positioned) {DIV} at (322,0) size 100x200 [bgcolor=#FF0000]
-layer at (348,8) size 100x100
+layer at (330,8) size 100x100
   RenderBlock (relative positioned) {DIV} at (0,0) size 100x100 [bgcolor=#008000]
 layer at (8,108) size 100x100
   RenderBlock (relative positioned) {DIV} at (0,100) size 100x100 [bgcolor=#008000]
index 61e09b0..35087c3 100644 (file)
@@ -16,6 +16,7 @@
     }
     
     #box {
+      left: 0;
       -webkit-transition-property: left;
     }
     
index 7bbcc25..9e66cd4 100644 (file)
@@ -11,6 +11,7 @@
     }
     #box {
       position: absolute;
+      left: 0;
       height: 100px;
       width: 100px;
       background-color: blue;
diff --git a/LayoutTests/transitions/lengthsize-transition-to-from-auto-expected.txt b/LayoutTests/transitions/lengthsize-transition-to-from-auto-expected.txt
new file mode 100644 (file)
index 0000000..18a9bd2
--- /dev/null
@@ -0,0 +1,4 @@
+PASS - "background-size" property for "test1" element at 1s saw something close to: 55,10
+PASS - "background-size" property for "test2" element at 1s saw something close to: 10
+PASS - "background-size" property for "test3" element at 1s saw something close to: 10,10
+
diff --git a/LayoutTests/transitions/lengthsize-transition-to-from-auto.html b/LayoutTests/transitions/lengthsize-transition-to-from-auto.html
new file mode 100644 (file)
index 0000000..e661cea
--- /dev/null
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+  <style>
+    .box {
+        position: relative;
+        height: 100px;
+        width: 100px;
+        margin: 10px;
+        background-color: gray;
+        background-image: url('../fast/backgrounds/repeat/resources/gradient.gif');
+        transition: background-size 2s linear;
+    }
+    
+    #test1 {
+        background-size: 10px 10px;
+    }
+    
+    body.final #test1 {
+        background-size: 100px 10px;
+    }
+
+    #test2 {
+        background-size: auto 10px;
+    }
+    
+    body.final #test2 {
+        background-size: 10px auto;
+    }
+
+    #test3 {
+        background-size: auto auto;
+    }
+    
+    body.final #test3 {
+        background-size: 10px 10px;
+    }
+  </style>
+  <script src="resources/transition-test-helpers.js"></script>
+  <script type="text/javascript">
+
+    const expectedValues = [
+      // [time, element-id, property, expected-value, tolerance]
+      [1, 'test1', 'background-size', [55, 10], 2],
+      [1, 'test2', 'background-size', [10], 2],
+      [1, 'test3', 'background-size', [10,10], 2],
+    ];
+  
+    function setupTest()
+    {
+        document.body.classList.add('final');
+    }
+    
+    runTransitionTest(expectedValues, setupTest, usePauseAPI);
+  </script>
+</head>
+<body>
+  <div id="test1" class="box"></div>
+  <div id="test2" class="box"></div>
+  <div id="test3" class="box"></div>
+
+  <div id="result"></div>
+</body>
+</html>
diff --git a/LayoutTests/transitions/transition-to-from-auto-expected.txt b/LayoutTests/transitions/transition-to-from-auto-expected.txt
new file mode 100644 (file)
index 0000000..f749bae
--- /dev/null
@@ -0,0 +1,4 @@
+PASS - "left" property for "test1" element at 1s saw something close to: auto
+PASS - "left" property for "test2" element at 1s saw something close to: 100
+PASS - "left" property for "test3" element at 1s saw something close to: 50
+
diff --git a/LayoutTests/transitions/transition-to-from-auto.html b/LayoutTests/transitions/transition-to-from-auto.html
new file mode 100644 (file)
index 0000000..75e541a
--- /dev/null
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+  <style>
+    .box {
+        position: relative;
+        height: 100px;
+        width: 100px;
+        margin: 10px;
+        background-color: gray;
+        transition: left 2s linear;
+    }
+    
+    #test1 {
+        left: 100px;
+    }
+    
+    body.final #test1 {
+        left: auto;
+    }
+
+    #test2 {
+        left: auto;
+    }
+    
+    body.final #test2 {
+        left: 100px
+    }
+
+    #test3 {
+        left: 0;
+    }
+    
+    body.final #test3 {
+        left: 100px
+    }
+  </style>
+  <script src="resources/transition-test-helpers.js"></script>
+  <script type="text/javascript">
+
+    const expectedValues = [
+      // [time, element-id, property, expected-value, tolerance]
+      [1, 'test1', 'left', 'auto', 2],
+      [1, 'test2', 'left', '100', 2],
+      [1, 'test3', 'left', '50', 2],
+    ];
+  
+    function setupTest()
+    {
+        document.body.classList.add('final');
+    }
+    
+    runTransitionTest(expectedValues, setupTest, usePauseAPI);
+  </script>
+</head>
+<body>
+  <div id="test1" class="box"></div>
+  <div id="test2" class="box"></div>
+  <div id="test3" class="box"></div>
+
+  <div id="result"></div>
+</body>
+</html>
index f813e24..08d6f19 100644 (file)
@@ -5,6 +5,7 @@
   <style>
     #box {
       position: absolute;
+      left: 0;
       height: 100px;
       width: 100px;
       background-color: blue;
index 00786ed..cc948ba 100644 (file)
@@ -1,3 +1,24 @@
+2016-05-02  Simon Fraser  <simon.fraser@apple.com>
+
+        Don't run transitions to/from 'auto' values
+        https://bugs.webkit.org/show_bug.cgi?id=38243
+        rdar://problem/20904225
+
+        Reviewed by Dean Jackson.
+        
+        The specified behavior of transitions and animations is to not animate when either endpoint is 'auto'.
+        Previously, we were treating 'auto' as zero and interpolating, which caused unwanted animations
+        on fandango.com, airbnb.com and others.
+        
+        Fix by having blend() return the from value if progress is 0, otherwise the to value. The
+        isZero() check can be removed, since this was effectively picking up auto value for one endpoint.
+
+        Tests: transitions/lengthsize-transition-to-from-auto.html
+               transitions/transition-to-from-auto.html
+
+        * platform/Length.cpp:
+        (WebCore::blend):
+
 2016-05-02  Chris Dumez  <cdumez@apple.com>
 
         Indexing CSSStyleDeclaration object with out-of-range index should return undefined
index 708f1b0..a0d70b3 100644 (file)
@@ -298,15 +298,15 @@ static Length blendMixedTypes(const Length& from, const Length& to, double progr
 
 Length blend(const Length& from, const Length& to, double progress)
 {
+    if (from.isAuto() || to.isAuto())
+        return progress ? to : from;
+
     if (from.type() == Calculated || to.type() == Calculated)
         return blendMixedTypes(from, to, progress);
 
     if (!from.isZero() && !to.isZero() && from.type() != to.type())
         return blendMixedTypes(from, to, progress);
 
-    if (from.isZero() && to.isZero())
-        return progress ? to : from; // Pick up 'auto' from 'from' if progress is zero.
-
     LengthType resultType = to.type();
     if (to.isZero())
         resultType = from.type();