Bug 90037

Summary: CSS3 calc: optimise blending expression
Product: WebKit Reporter: Mike Lawther <mikelawther>
Component: CSSAssignee: Mike Lawther <mikelawther>
Status: RESOLVED FIXED    
Severity: Normal CC: tony, webkit.review.bot
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Patch
none
Patch for landing none

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]
Patch
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: 

------
<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.
Comment 3 Tony Chang 2012-07-23 10:26:59 PDT
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
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.