Bug 90037 – CSS3 calc: optimise blending expression

• Component: CSS
• Status: RESOLVED FIXED

[Mike Lawther]

As suggested by Tony on https://webkit.org/b/86160, the blending expressions generated by transitions involving calc can be improved. Currently they involve 7 allocations.

Mike said "An alternative I considered was to introduce a new type of expression node that was a BlendNode - then you'd only need to alloc one of them [...]

Another thing I could do is if one of from or to is not an expression, to multiply that with its progress to eliminate some nodes. It would still mean allocating a new Length though."

[Mike Lawther]

Created attachment 153736 [details]
Patch

[Mike Lawther]

Here are some figures I gathered during performance testing on my desktop Mac Pro. Times given are averaged over three runs.

 I wrote a a testfile that blends 4 calc expressions over a 10s transition: 

------
<style>
  #transition {
      width: -webkit-calc(10% + 10px);
      height: -webkit-calc(10% + 1em);
      margin-left: -webkit-calc(5% - 5px);
      margin-top: -webkit-calc(5% + 1ex);
      background-color: green;
      -webkit-transition: all 10s linear;
      -moz-transition: all 10s linear;
  }

  #transition.go {
      width: -webkit-calc(100% - 50px);
      height: -webkit-calc(80% + 1em);
      margin-left: -webkit-calc(10% - 5px);
      margin-top: -webkit-calc(15% + 1ex);
  }
</style>
<div style="width: 500px; height: 500px; border: 1px solid black;">
    <div id="transition"></div>
</div>
<script>
    var element = document.getElementById("transition");
    element.className = "go";
</script>
--------

All times are in microseconds, and are the average time taken during each animation frame.

Baseline (ie current ToT):
 * Style recalc: 73.98us
 * Layout: 91.08us
 * Length::blendCalculation: 0.87us

Generic Blend class (blends two CalcExpressionNodes)
 * Style recalc: 71.44us
 * Layout: 90.70us
 * Length::blendCalculation: 0.75us
 
Length-specific Blend class (as in current patch)
 * Style recalc: 72.75us
 * Layout: 83.17us
 * Length::blendCalculation: 0.72us

The largest improvement was to layout time, which was the deciding factor for choosing the more specific implementation.

[Tony Chang]

Comment on attachment 153736 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=153736&action=review

Nice!

> Source/WebCore/platform/CalculationValue.h:189
> +    explicit CalcExpressionBlendLength(Length from, Length to, float progress)

Nit: explicit doesn't do anything here

[Mike Lawther]

Thanks for the review Tony!

> Nit: explicit doesn't do anything here

Oops - nice catch!

[Mike Lawther]

Created attachment 153932 [details]
Patch for landing

[WebKit Review Bot]

Comment on attachment 153932 [details]
Patch for landing

Clearing flags on attachment: 153932

Committed r123419: <http://trac.webkit.org/changeset/123419>

[WebKit Review Bot]

All reviewed patches have been landed.  Closing bug.