Make transitions work between different Length types

• Component: New Bugs
• Status: RESOLVED FIXED

[Mike Lawther]

Make transitions work between different Length types

[Mike Lawther]

Created attachment 154276 [details]
Patch

[Mike Lawther]

This patch makes this simple example behave the same in WebKit as it does in Firefox:
--------
<style>
  #transition {
    width: 10px;
    height: 10px;
    background-color: green;
    -webkit-transition: all 10s linear;
    -moz-transition: all 10s linear;
    -o-transition: all 10s linear;
  }

  #transition:hover {
      width: 400px;
      height: 90%;
  }
</style>
<div style="width: 500px; height: 500px; border: 1px solid black;">
    <div id="transition"></div>
</div>
​--------
Clicky: http://jsfiddle.net/Fyqb9/2/

Hovering over the green box causes both width and height to smoothly transition, as they do in Firefox.

Currently, height will snap between 10px and 90%, which is pretty jarring, especially if you unhover the box halfway through the transition.

See https://bugs.webkit.org/show_bug.cgi?id=90037 for some profiling I did when implementing this blending function for calc.

[Simon Fraser (smfr)]

So what happens if height:90% resolves to different values at the start and end of the transition? Say;

<div class="container">
<div class="inner"></div>
</div>

<style>
.container {
  height: 100px;
}

.container:hover {
  height: 200px;
}

.inner {
   height: 20px;
  transition: height 1s;
}

.container:hover .inner {
  height: 90%;
}
</style>

[Mike Lawther]

Hi Simon - it does just what you'd expect :) If you run your example in Firefox (adding some background colors and moz-transition etc), you'll see the same thing in WebKit with my patch applied.

What happens is:
 - 'container' instantly snaps to 200px
 - 'inner' smoothly transitions from 20px to 90% of 200px

It's a bit more interesting to have container transition over 1s as well (make the transition linear so it's clearer what's going on). Again, it works the way you'd expect (and the same as Firefox), with 'inner's height velocity accelerating to maintain the correct distance over the transition.

I wrote a layouttest for transitioning of dependent values as part of one of my previous changes: http://trac.webkit.org/browser/trunk/LayoutTests/css3/calc/transitions-dependent.html

This patch uses the same machinery that that test covers, so what you see in there for calc() is now what you'll see for non-calc values.

[Mike Lawther]

I also tested IE10 (the first version of IE to support CSS3 transitions), and it matches Firefox in that it will smoothly interpolate between px and %.

Simon and I had an IRC conversation about whether this behaviour was correct. The transition spec does say that the transition happens over computed values, hence it's unclear as to whether a smooth transition between px and % is allowed (as the computed value for % is % - it's the *used* value where a % becomes px).

David Baron proposed on www-style (http://lists.w3.org/Archives/Public/www-style/2012Jun/0125.html) that animation of certain properties that were able to be defined as a length or a percentage should happen "between a length and a percentage (in either order) as a calc". Which is just what this patch does :)

There was support for and no disagreement with this proposal, so for web compat I reckon we should go ahead and match Firefox and IE10's behaviour.

[Simon Fraser (smfr)]

Comment on attachment 154276 [details]
Patch

OK then!

[Simon Fraser (smfr)]

Does this work right for transforms too, like translateX(10px) to translateX(90%)?

[WebKit Review Bot]

Comment on attachment 154276 [details]
Patch

Clearing flags on attachment: 154276

Committed r123837: <http://trac.webkit.org/changeset/123837>

[WebKit Review Bot]

All reviewed patches have been landed.  Closing bug.

[Mike Lawther]

Good question! Yes it does - the following example code works the same in Firefox and my patched WebKit (ie the div smoothly translates to the right):
-----
<style>
  #transition {
      width: 200px;
      height: 200px;
    -webkit-transform: translateX(10px);
    -moz-transform: translateX(10px);
    background-color: green;
    -webkit-transition: all 10s linear;
    -moz-transition: all 10s linear;
  }

  #transition:hover {
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
  }
</style>
<div id="transition"></div>
-------

(In reply to comment #8)
> (From update of attachment 154276 [details])
> Clearing flags on attachment: 154276
> 
> Committed r123837: <http://trac.webkit.org/changeset/123837>

This caused bug 95650.