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 8b7f22936f91ffa923a5cade8aadb7b460d43ae4..c95ecdb3f0eea26f4255783385635c0005a927f6 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 c4ff00422662e7b754479c05d776533baa4c7a06..ccb16fc76c5a17b49d50018222d7b91aec0872c1 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 61e09b0356aaeb65aacfe581732c0c4cfb79d66a..35087c364a3f1c98e440d9a799e0bdd0cbf000ae 100644 (file)
@@ -16,6 +16,7 @@
     }
     
     #box {
+      left: 0;
       -webkit-transition-property: left;
     }
     
index 7bbcc25a623d3d4265b872fa30952741b74b07e3..9e66cd4f92614e1e507f2cfa6423f7d2e61009dd 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 f813e24f920f57b07819770c36b845b58a384eb4..08d6f19e614034fb88c948ea1b54ceb496c90a19 100644 (file)
@@ -5,6 +5,7 @@
   <style>
     #box {
       position: absolute;
+      left: 0;
       height: 100px;
       width: 100px;
       background-color: blue;
index 00786edec45c78012d4960a766eba9256696b8c1..cc948ba2b0aca53caadeb09fd196918cb185604f 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 708f1b06b838a0dab6a2106a32f3d2378b36d5be..a0d70b3227b56d706beed95f012400d8bbeb2af9 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();