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
+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
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]
}
#box {
+ left: 0;
-webkit-transition-property: left;
}
}
#box {
position: absolute;
+ left: 0;
height: 100px;
width: 100px;
background-color: blue;
--- /dev/null
+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
+
--- /dev/null
+<!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>
--- /dev/null
+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
+
--- /dev/null
+<!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>
<style>
#box {
position: absolute;
+ left: 0;
height: 100px;
width: 100px;
background-color: blue;
+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
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();
git://git.webkit.org / WebKit-https.git / commitdiff