Bug 90037 - CSS3 calc: optimise blending expression
Summary: CSS3 calc: optimise blending expression
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Mike Lawther
Depends on:
Reported: 2012-06-26 19:03 PDT by Mike Lawther
Modified: 2012-07-23 19:44 PDT (History)
2 users (show)

See Also:

Patch (4.46 KB, patch)
2012-07-22 23:29 PDT, Mike Lawther
no flags Details | Formatted Diff | Diff
Patch for landing (4.45 KB, patch)
2012-07-23 18:50 PDT, Mike Lawther
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Mike Lawther 2012-06-26 19:03:26 PDT
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."
Comment 1 Mike Lawther 2012-07-22 23:29:04 PDT
Created attachment 153736 [details]
Comment 2 Mike Lawther 2012-07-22 23:42:38 PDT
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: 

  #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);
<div style="width: 500px; height: 500px; border: 1px solid black;">
    <div id="transition"></div>
    var element = document.getElementById("transition");
    element.className = "go";

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.
Comment 3 Tony Chang 2012-07-23 10:26:59 PDT
Comment on attachment 153736 [details]

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


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

Nit: explicit doesn't do anything here
Comment 4 Mike Lawther 2012-07-23 18:46:18 PDT
Thanks for the review Tony!

> Nit: explicit doesn't do anything here

Oops - nice catch!
Comment 5 Mike Lawther 2012-07-23 18:50:43 PDT
Created attachment 153932 [details]
Patch for landing
Comment 6 WebKit Review Bot 2012-07-23 19:44:49 PDT
Comment on attachment 153932 [details]
Patch for landing

Clearing flags on attachment: 153932

Committed r123419: <http://trac.webkit.org/changeset/123419>
Comment 7 WebKit Review Bot 2012-07-23 19:44:52 PDT
All reviewed patches have been landed.  Closing bug.