From 5f4fe977ba66a2027d2b02e343783063e777eb58 Mon Sep 17 00:00:00 2001
From: Eric Willigers <ericwilligers@chromium.org>
Date: Fri, 6 Jun 2014 15:43:50 +1000
Subject: [PATCH] Parameterize big benchmarks by animated property

We create 5 versions for each CSS animation and transition benchmark:-
- compositor-transform = transform animation on compositor thread
- mainthread-transform = transform animation on main thread
- opacity = opacity animation on compositor thread
- px-height = height animation on main thread
- specific-color = color animation on main thread

For web animations, we create the above 5 versions and 3 more:-
- em-height = height animation responsive to font size
- inherit-height = height animation responsive to parent height
- current-color = color animation responsive to parent color

run-big-benchmarks.py is updated to use the generated versions.

A small number of benchmarks fail, sometimes because we have too many
elements. For example, in one run the following failed:-
- web-animations-staggered-chaining-compositor-transform.html
- css-animations-staggered-chaining-by-inserting-style-element-px-height.html
- css-transitions-simultaneous-by-inserting-style-element-specific-color.html
- css-transitions-staggered-chaining-by-updating-class-px-height.html
- css-animations-staggered-chaining-by-inserting-style-element-specific-color.html
- css-animations-staggered-chaining-by-inserting-style-element-mainthread-transform.html
- css-transitions-simultaneous-by-inserting-style-element-px-height.html
---
 ...s-many-keyframes-compositor-transform.html |  55 +++++++
 ...s-many-keyframes-mainthread-transform.html |  55 +++++++
 ...css-animations-many-keyframes-opacity.html |  55 +++++++
 ...s-animations-many-keyframes-px-height.html |  55 +++++++
 ...mations-many-keyframes-specific-color.html |  55 +++++++
 ...ting-new-element-compositor-transform.html |  47 ++++++
 ...ting-new-element-mainthread-transform.html |  47 ++++++
 ...eous-by-inserting-new-element-opacity.html |  47 ++++++
 ...us-by-inserting-new-element-px-height.html |  47 ++++++
 ...-inserting-new-element-specific-color.html |  47 ++++++
 ...ng-style-element-compositor-transform.html |  52 ++++++
 ...ng-style-element-mainthread-transform.html |  52 ++++++
 ...us-by-inserting-style-element-opacity.html |  52 ++++++
 ...-by-inserting-style-element-px-height.html |  52 ++++++
 ...nserting-style-element-specific-color.html |  52 ++++++
 ...y-updating-class-compositor-transform.html |  52 ++++++
 ...y-updating-class-mainthread-transform.html |  52 ++++++
 ...imultaneous-by-updating-class-opacity.html |  52 ++++++
 ...ultaneous-by-updating-class-px-height.html |  52 ++++++
 ...eous-by-updating-class-specific-color.html |  52 ++++++
 ...ing-inline-style-compositor-transform.html |  52 ++++++
 ...ing-inline-style-mainthread-transform.html |  52 ++++++
 ...eous-by-updating-inline-style-opacity.html |  52 ++++++
 ...us-by-updating-inline-style-px-height.html |  52 ++++++
 ...-updating-inline-style-specific-color.html |  52 ++++++
 ...ting-new-element-compositor-transform.html |  59 +++++++
 ...ting-new-element-mainthread-transform.html |  59 +++++++
 ...ning-by-inserting-new-element-opacity.html |  59 +++++++
 ...ng-by-inserting-new-element-px-height.html |  59 +++++++
 ...-inserting-new-element-specific-color.html |  59 +++++++
 ...ng-style-element-compositor-transform.html |  75 +++++++++
 ...ng-style-element-mainthread-transform.html |  75 +++++++++
 ...ng-by-inserting-style-element-opacity.html |  75 +++++++++
 ...-by-inserting-style-element-px-height.html |  75 +++++++++
 ...nserting-style-element-specific-color.html |  75 +++++++++
 ...y-updating-class-compositor-transform.html |  64 ++++++++
 ...y-updating-class-mainthread-transform.html |  64 ++++++++
 ...ed-chaining-by-updating-class-opacity.html |  64 ++++++++
 ...-chaining-by-updating-class-px-height.html |  64 ++++++++
 ...ning-by-updating-class-specific-color.html |  64 ++++++++
 ...ing-inline-style-compositor-transform.html |  62 ++++++++
 ...ing-inline-style-mainthread-transform.html |  62 ++++++++
 ...ning-by-updating-inline-style-opacity.html |  62 ++++++++
 ...ng-by-updating-inline-style-px-height.html |  62 ++++++++
 ...-updating-inline-style-specific-color.html |  62 ++++++++
 ...inite-iterations-compositor-transform.html |  45 ++++++
 ...inite-iterations-mainthread-transform.html |  45 ++++++
 ...staggered-infinite-iterations-opacity.html |  45 ++++++
 ...aggered-infinite-iterations-px-height.html |  45 ++++++
 ...ed-infinite-iterations-specific-color.html |  45 ++++++
 ...ting-new-element-compositor-transform.html |  60 +++++++
 ...ting-new-element-mainthread-transform.html |  60 +++++++
 ...ring-by-inserting-new-element-opacity.html |  60 +++++++
 ...ng-by-inserting-new-element-px-height.html |  60 +++++++
 ...-inserting-new-element-specific-color.html |  60 +++++++
 ...ng-style-element-compositor-transform.html |  86 ++++++++++
 ...ng-style-element-mainthread-transform.html |  86 ++++++++++
 ...ng-by-inserting-style-element-opacity.html |  86 ++++++++++
 ...-by-inserting-style-element-px-height.html |  86 ++++++++++
 ...nserting-style-element-specific-color.html |  86 ++++++++++
 ...y-updating-class-compositor-transform.html |  69 ++++++++
 ...y-updating-class-mainthread-transform.html |  69 ++++++++
 ...-triggering-by-updating-class-opacity.html |  69 ++++++++
 ...riggering-by-updating-class-px-height.html |  69 ++++++++
 ...ring-by-updating-class-specific-color.html |  69 ++++++++
 ...ing-inline-style-compositor-transform.html |  68 ++++++++
 ...ing-inline-style-mainthread-transform.html |  68 ++++++++
 ...ring-by-updating-inline-style-opacity.html |  68 ++++++++
 ...ng-by-updating-inline-style-px-height.html |  68 ++++++++
 ...-updating-inline-style-specific-color.html |  68 ++++++++
 ...ing-new-elements-compositor-transform.html |  65 ++++++++
 ...ing-new-elements-mainthread-transform.html |  65 ++++++++
 ...ous-by-inserting-new-elements-opacity.html |  65 ++++++++
 ...s-by-inserting-new-elements-px-height.html |  65 ++++++++
 ...inserting-new-elements-specific-color.html |  65 ++++++++
 ...ng-style-element-compositor-transform.html |  51 ++++++
 ...ng-style-element-mainthread-transform.html |  51 ++++++
 ...us-by-inserting-style-element-opacity.html |  51 ++++++
 ...-by-inserting-style-element-px-height.html |  51 ++++++
 ...nserting-style-element-specific-color.html |  51 ++++++
 ...y-updating-class-compositor-transform.html |  55 +++++++
 ...y-updating-class-mainthread-transform.html |  55 +++++++
 ...imultaneous-by-updating-class-opacity.html |  55 +++++++
 ...ultaneous-by-updating-class-px-height.html |  55 +++++++
 ...eous-by-updating-class-specific-color.html |  55 +++++++
 ...ing-inline-style-compositor-transform.html |  50 ++++++
 ...ing-inline-style-mainthread-transform.html |  50 ++++++
 ...eous-by-updating-inline-style-opacity.html |  50 ++++++
 ...us-by-updating-inline-style-px-height.html |  50 ++++++
 ...-updating-inline-style-specific-color.html |  50 ++++++
 ...ting-new-element-compositor-transform.html |  69 ++++++++
 ...ting-new-element-mainthread-transform.html |  69 ++++++++
 ...ning-by-inserting-new-element-opacity.html |  69 ++++++++
 ...ng-by-inserting-new-element-px-height.html |  69 ++++++++
 ...-inserting-new-element-specific-color.html |  69 ++++++++
 ...ng-style-element-compositor-transform.html |  65 ++++++++
 ...ng-style-element-mainthread-transform.html |  65 ++++++++
 ...ng-by-inserting-style-element-opacity.html |  65 ++++++++
 ...-by-inserting-style-element-px-height.html |  65 ++++++++
 ...nserting-style-element-specific-color.html |  65 ++++++++
 ...y-updating-class-compositor-transform.html |  58 +++++++
 ...y-updating-class-mainthread-transform.html |  58 +++++++
 ...ed-chaining-by-updating-class-opacity.html |  58 +++++++
 ...-chaining-by-updating-class-px-height.html |  58 +++++++
 ...ning-by-updating-class-specific-color.html |  58 +++++++
 ...ing-inline-style-compositor-transform.html |  52 ++++++
 ...ing-inline-style-mainthread-transform.html |  52 ++++++
 ...ning-by-updating-inline-style-opacity.html |  52 ++++++
 ...ng-by-updating-inline-style-px-height.html |  52 ++++++
 ...-updating-inline-style-specific-color.html |  52 ++++++
 ...ting-new-element-compositor-transform.html |  73 +++++++++
 ...ting-new-element-mainthread-transform.html |  73 +++++++++
 ...ring-by-inserting-new-element-opacity.html |  73 +++++++++
 ...ng-by-inserting-new-element-px-height.html |  73 +++++++++
 ...-inserting-new-element-specific-color.html |  73 +++++++++
 ...-inserting-style-compositor-transform.html |  90 +++++++++++
 ...-inserting-style-mainthread-transform.html |  90 +++++++++++
 ...triggering-by-inserting-style-opacity.html |  90 +++++++++++
 ...iggering-by-inserting-style-px-height.html |  90 +++++++++++
 ...ing-by-inserting-style-specific-color.html |  90 +++++++++++
 ...y-updating-class-compositor-transform.html |  65 ++++++++
 ...y-updating-class-mainthread-transform.html |  65 ++++++++
 ...-triggering-by-updating-class-opacity.html |  65 ++++++++
 ...riggering-by-updating-class-px-height.html |  65 ++++++++
 ...ring-by-updating-class-specific-color.html |  65 ++++++++
 ...ing-inline-style-compositor-transform.html |  60 +++++++
 ...ing-inline-style-mainthread-transform.html |  60 +++++++
 ...ring-by-updating-inline-style-opacity.html |  60 +++++++
 ...ng-by-updating-inline-style-px-height.html |  60 +++++++
 ...-updating-inline-style-specific-color.html |  60 +++++++
 .../resources/web-animations-api-check.js     |   5 +
 ...-animation-frame-compositor-transform.html |  62 ++++++++
 ...request-animation-frame-current-color.html |  62 ++++++++
 ...ime-request-animation-frame-em-height.html |  62 ++++++++
 ...equest-animation-frame-inherit-height.html |  62 ++++++++
 ...-animation-frame-mainthread-transform.html |  62 ++++++++
 ...-time-request-animation-frame-opacity.html |  62 ++++++++
 ...ime-request-animation-frame-px-height.html |  62 ++++++++
 ...equest-animation-frame-specific-color.html |  62 ++++++++
 ...s-many-keyframes-compositor-transform.html |  51 ++++++
 ...imations-many-keyframes-current-color.html |  51 ++++++
 ...b-animations-many-keyframes-em-height.html |  51 ++++++
 ...mations-many-keyframes-inherit-height.html |  51 ++++++
 ...s-many-keyframes-mainthread-transform.html |  51 ++++++
 ...web-animations-many-keyframes-opacity.html |  51 ++++++
 ...b-animations-many-keyframes-px-height.html |  51 ++++++
 ...mations-many-keyframes-specific-color.html |  51 ++++++
 ...ons-simultaneous-compositor-transform.html |  53 +++++++
 ...animations-simultaneous-current-color.html |  53 +++++++
 ...web-animations-simultaneous-em-height.html |  53 +++++++
 ...nimations-simultaneous-inherit-height.html |  53 +++++++
 ...ons-simultaneous-mainthread-transform.html |  53 +++++++
 .../web-animations-simultaneous-opacity.html  |  53 +++++++
 ...web-animations-simultaneous-px-height.html |  53 +++++++
 ...nimations-simultaneous-specific-color.html |  53 +++++++
 ...aggered-chaining-compositor-transform.html |  61 +++++++
 ...ions-staggered-chaining-current-color.html |  61 +++++++
 ...imations-staggered-chaining-em-height.html |  61 +++++++
 ...ons-staggered-chaining-inherit-height.html |  61 +++++++
 ...aggered-chaining-mainthread-transform.html |  61 +++++++
 ...animations-staggered-chaining-opacity.html |  61 +++++++
 ...imations-staggered-chaining-px-height.html |  61 +++++++
 ...ons-staggered-chaining-specific-color.html |  61 +++++++
 ...inite-iterations-compositor-transform.html |  48 ++++++
 ...red-infinite-iterations-current-color.html |  48 ++++++
 ...aggered-infinite-iterations-em-height.html |  48 ++++++
 ...ed-infinite-iterations-inherit-height.html |  48 ++++++
 ...inite-iterations-mainthread-transform.html |  48 ++++++
 ...staggered-infinite-iterations-opacity.html |  48 ++++++
 ...aggered-infinite-iterations-px-height.html |  48 ++++++
 ...ed-infinite-iterations-specific-color.html |  48 ++++++
 ...gered-triggering-compositor-transform.html |  59 +++++++
 ...ns-staggered-triggering-current-color.html |  59 +++++++
 ...ations-staggered-triggering-em-height.html |  59 +++++++
 ...s-staggered-triggering-inherit-height.html |  59 +++++++
 ...gered-triggering-mainthread-transform.html |  59 +++++++
 ...imations-staggered-triggering-opacity.html |  59 +++++++
 ...ations-staggered-triggering-px-height.html |  59 +++++++
 ...s-staggered-triggering-specific-color.html |  59 +++++++
 .../css-animations-many-keyframes.html        |  55 +++++++
 ...simultaneous-by-inserting-new-element.html |  47 ++++++
 ...multaneous-by-inserting-style-element.html |  52 ++++++
 ...ations-simultaneous-by-updating-class.html |  52 ++++++
 ...simultaneous-by-updating-inline-style.html |  52 ++++++
 ...red-chaining-by-inserting-new-element.html |  59 +++++++
 ...d-chaining-by-inserting-style-element.html |  75 +++++++++
 ...-staggered-chaining-by-updating-class.html |  64 ++++++++
 ...red-chaining-by-updating-inline-style.html |  62 ++++++++
 ...mations-staggered-infinite-iterations.html |  45 ++++++
 ...d-triggering-by-inserting-new-element.html |  60 +++++++
 ...triggering-by-inserting-style-element.html |  86 ++++++++++
 ...taggered-triggering-by-updating-class.html |  69 ++++++++
 ...d-triggering-by-updating-inline-style.html |  68 ++++++++
 ...imultaneous-by-inserting-new-elements.html |  65 ++++++++
 ...multaneous-by-inserting-style-element.html |  51 ++++++
 ...itions-simultaneous-by-updating-class.html |  55 +++++++
 ...simultaneous-by-updating-inline-style.html |  50 ++++++
 ...red-chaining-by-inserting-new-element.html |  69 ++++++++
 ...d-chaining-by-inserting-style-element.html |  65 ++++++++
 ...-staggered-chaining-by-updating-class.html |  58 +++++++
 ...red-chaining-by-updating-inline-style.html |  52 ++++++
 ...d-triggering-by-inserting-new-element.html |  73 +++++++++
 ...aggered-triggering-by-inserting-style.html |  90 +++++++++++
 ...taggered-triggering-by-updating-class.html |  65 ++++++++
 ...d-triggering-by-updating-inline-style.html |  60 +++++++
 ...ent-time-request-animation-frame-pow3.html |  62 ++++++++
 .../web-animations-many-keyframes.html        |  51 ++++++
 .../web-animations-simultaneous.html          |  53 +++++++
 .../web-animations-staggered-chaining.html    |  61 +++++++
 ...mations-staggered-infinite-iterations.html |  48 ++++++
 .../web-animations-staggered-triggering.html  |  59 +++++++
 .../Animation/PerfWeek/generate-variations.py | 149 ++++++++++++++++++
 .../Animation/PerfWeek/run-big-benchmarks.py  |   2 +-
 213 files changed, 12755 insertions(+), 1 deletion(-)
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-many-keyframes-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-many-keyframes-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-many-keyframes-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-many-keyframes-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-many-keyframes-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-new-element-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-new-element-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-new-element-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-new-element-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-new-element-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-style-element-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-style-element-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-style-element-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-style-element-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-style-element-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-class-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-class-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-class-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-class-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-class-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-inline-style-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-inline-style-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-inline-style-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-inline-style-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-inline-style-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-new-element-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-new-element-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-new-element-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-new-element-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-new-element-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-style-element-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-style-element-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-style-element-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-style-element-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-style-element-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-class-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-class-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-class-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-class-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-class-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-inline-style-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-inline-style-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-inline-style-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-inline-style-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-inline-style-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-infinite-iterations-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-infinite-iterations-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-infinite-iterations-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-infinite-iterations-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-infinite-iterations-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-new-element-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-new-element-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-new-element-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-new-element-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-new-element-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-style-element-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-style-element-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-style-element-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-style-element-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-style-element-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-class-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-class-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-class-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-class-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-class-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-inline-style-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-inline-style-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-inline-style-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-inline-style-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-inline-style-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-new-elements-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-new-elements-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-new-elements-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-new-elements-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-new-elements-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-style-element-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-style-element-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-style-element-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-style-element-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-style-element-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-class-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-class-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-class-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-class-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-class-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-inline-style-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-inline-style-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-inline-style-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-inline-style-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-inline-style-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-new-element-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-new-element-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-new-element-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-new-element-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-new-element-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-style-element-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-style-element-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-style-element-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-style-element-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-style-element-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-class-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-class-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-class-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-class-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-class-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-inline-style-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-inline-style-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-inline-style-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-inline-style-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-inline-style-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-new-element-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-new-element-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-new-element-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-new-element-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-new-element-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-style-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-style-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-style-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-style-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-style-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-class-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-class-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-class-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-class-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-class-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-inline-style-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-inline-style-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-inline-style-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-inline-style-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-inline-style-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/resources/web-animations-api-check.js
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-current-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-em-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-inherit-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-current-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-em-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-inherit-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-current-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-em-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-inherit-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-current-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-em-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-inherit-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-current-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-em-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-inherit-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-compositor-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-current-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-em-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-inherit-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-mainthread-transform.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-opacity.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-px-height.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-specific-color.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-many-keyframes.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-simultaneous-by-inserting-new-element.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-simultaneous-by-inserting-style-element.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-simultaneous-by-updating-class.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-simultaneous-by-updating-inline-style.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-chaining-by-inserting-new-element.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-chaining-by-inserting-style-element.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-chaining-by-updating-class.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-chaining-by-updating-inline-style.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-infinite-iterations.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-triggering-by-inserting-new-element.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-triggering-by-inserting-style-element.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-triggering-by-updating-class.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-triggering-by-updating-inline-style.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-simultaneous-by-inserting-new-elements.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-simultaneous-by-inserting-style-element.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-simultaneous-by-updating-class.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-simultaneous-by-updating-inline-style.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-chaining-by-inserting-new-element.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-chaining-by-inserting-style-element.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-chaining-by-updating-class.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-chaining-by-updating-inline-style.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-triggering-by-inserting-new-element.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-triggering-by-inserting-style.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-triggering-by-updating-class.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-triggering-by-updating-inline-style.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/set-current-time-request-animation-frame-pow3.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/web-animations-many-keyframes.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/web-animations-simultaneous.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/web-animations-staggered-chaining.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/web-animations-staggered-infinite-iterations.html
 create mode 100644 PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/web-animations-staggered-triggering.html
 create mode 100755 PerformanceTests/Animation/PerfWeek/generate-variations.py

diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-many-keyframes-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-many-keyframes-compositor-transform.html
new file mode 100644
index 00000000000..921bfd718b0
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-many-keyframes-compositor-transform.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 400;
+var numKeyframes = 500;
+var duration = 4000;
+
+function makeKeyframes(numKeyframes, width, height) {
+    var keyframes = '@-webkit-keyframes anim {\n'
+    for (var i = 0; i < numKeyframes + 1; i++) {
+        var fraction = i / numKeyframes;
+        var t = fraction * 2 * Math.PI;
+        var x = Math.cos(t) - Math.pow(Math.cos(4*t), 3);
+        x = ((x/4 + 1/2) * width).toFixed(5);
+        var y = Math.pow(Math.sin(4*t), 3) - Math.sin(2*t);
+        y = ((y/4 + 1/2) * height).toFixed(5);
+        keyframes += (fraction*100) + '% { transform: translate(' + x + 'px, ' + y + 'px) }\n';
+    }
+    return keyframes;
+}
+
+var style = document.createElement('style');
+style.textContent = makeKeyframes(numKeyframes, 550, 800);
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target.style.webkitAnimation = 'anim ' + duration + 'ms linear infinite -' + duration/10 * i/N + 'ms';
+  container.appendChild(target);
+}
+
+container.appendChild(style);
+
+requestAnimationFrame(function() {
+  measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+target {
+  position: absolute;
+  border: 5px solid green;
+  border-radius: 100%;
+}
+container {
+  position: absolute;
+  width: 550px;
+  height: 800px;
+  background-color: lightgrey;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-many-keyframes-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-many-keyframes-mainthread-transform.html
new file mode 100644
index 00000000000..921bfd718b0
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-many-keyframes-mainthread-transform.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 400;
+var numKeyframes = 500;
+var duration = 4000;
+
+function makeKeyframes(numKeyframes, width, height) {
+    var keyframes = '@-webkit-keyframes anim {\n'
+    for (var i = 0; i < numKeyframes + 1; i++) {
+        var fraction = i / numKeyframes;
+        var t = fraction * 2 * Math.PI;
+        var x = Math.cos(t) - Math.pow(Math.cos(4*t), 3);
+        x = ((x/4 + 1/2) * width).toFixed(5);
+        var y = Math.pow(Math.sin(4*t), 3) - Math.sin(2*t);
+        y = ((y/4 + 1/2) * height).toFixed(5);
+        keyframes += (fraction*100) + '% { transform: translate(' + x + 'px, ' + y + 'px) }\n';
+    }
+    return keyframes;
+}
+
+var style = document.createElement('style');
+style.textContent = makeKeyframes(numKeyframes, 550, 800);
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target.style.webkitAnimation = 'anim ' + duration + 'ms linear infinite -' + duration/10 * i/N + 'ms';
+  container.appendChild(target);
+}
+
+container.appendChild(style);
+
+requestAnimationFrame(function() {
+  measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+target {
+  position: absolute;
+  border: 5px solid green;
+  border-radius: 100%;
+}
+container {
+  position: absolute;
+  width: 550px;
+  height: 800px;
+  background-color: lightgrey;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-many-keyframes-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-many-keyframes-opacity.html
new file mode 100644
index 00000000000..921bfd718b0
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-many-keyframes-opacity.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 400;
+var numKeyframes = 500;
+var duration = 4000;
+
+function makeKeyframes(numKeyframes, width, height) {
+    var keyframes = '@-webkit-keyframes anim {\n'
+    for (var i = 0; i < numKeyframes + 1; i++) {
+        var fraction = i / numKeyframes;
+        var t = fraction * 2 * Math.PI;
+        var x = Math.cos(t) - Math.pow(Math.cos(4*t), 3);
+        x = ((x/4 + 1/2) * width).toFixed(5);
+        var y = Math.pow(Math.sin(4*t), 3) - Math.sin(2*t);
+        y = ((y/4 + 1/2) * height).toFixed(5);
+        keyframes += (fraction*100) + '% { transform: translate(' + x + 'px, ' + y + 'px) }\n';
+    }
+    return keyframes;
+}
+
+var style = document.createElement('style');
+style.textContent = makeKeyframes(numKeyframes, 550, 800);
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target.style.webkitAnimation = 'anim ' + duration + 'ms linear infinite -' + duration/10 * i/N + 'ms';
+  container.appendChild(target);
+}
+
+container.appendChild(style);
+
+requestAnimationFrame(function() {
+  measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+target {
+  position: absolute;
+  border: 5px solid green;
+  border-radius: 100%;
+}
+container {
+  position: absolute;
+  width: 550px;
+  height: 800px;
+  background-color: lightgrey;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-many-keyframes-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-many-keyframes-px-height.html
new file mode 100644
index 00000000000..921bfd718b0
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-many-keyframes-px-height.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 400;
+var numKeyframes = 500;
+var duration = 4000;
+
+function makeKeyframes(numKeyframes, width, height) {
+    var keyframes = '@-webkit-keyframes anim {\n'
+    for (var i = 0; i < numKeyframes + 1; i++) {
+        var fraction = i / numKeyframes;
+        var t = fraction * 2 * Math.PI;
+        var x = Math.cos(t) - Math.pow(Math.cos(4*t), 3);
+        x = ((x/4 + 1/2) * width).toFixed(5);
+        var y = Math.pow(Math.sin(4*t), 3) - Math.sin(2*t);
+        y = ((y/4 + 1/2) * height).toFixed(5);
+        keyframes += (fraction*100) + '% { transform: translate(' + x + 'px, ' + y + 'px) }\n';
+    }
+    return keyframes;
+}
+
+var style = document.createElement('style');
+style.textContent = makeKeyframes(numKeyframes, 550, 800);
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target.style.webkitAnimation = 'anim ' + duration + 'ms linear infinite -' + duration/10 * i/N + 'ms';
+  container.appendChild(target);
+}
+
+container.appendChild(style);
+
+requestAnimationFrame(function() {
+  measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+target {
+  position: absolute;
+  border: 5px solid green;
+  border-radius: 100%;
+}
+container {
+  position: absolute;
+  width: 550px;
+  height: 800px;
+  background-color: lightgrey;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-many-keyframes-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-many-keyframes-specific-color.html
new file mode 100644
index 00000000000..921bfd718b0
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-many-keyframes-specific-color.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 400;
+var numKeyframes = 500;
+var duration = 4000;
+
+function makeKeyframes(numKeyframes, width, height) {
+    var keyframes = '@-webkit-keyframes anim {\n'
+    for (var i = 0; i < numKeyframes + 1; i++) {
+        var fraction = i / numKeyframes;
+        var t = fraction * 2 * Math.PI;
+        var x = Math.cos(t) - Math.pow(Math.cos(4*t), 3);
+        x = ((x/4 + 1/2) * width).toFixed(5);
+        var y = Math.pow(Math.sin(4*t), 3) - Math.sin(2*t);
+        y = ((y/4 + 1/2) * height).toFixed(5);
+        keyframes += (fraction*100) + '% { transform: translate(' + x + 'px, ' + y + 'px) }\n';
+    }
+    return keyframes;
+}
+
+var style = document.createElement('style');
+style.textContent = makeKeyframes(numKeyframes, 550, 800);
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target.style.webkitAnimation = 'anim ' + duration + 'ms linear infinite -' + duration/10 * i/N + 'ms';
+  container.appendChild(target);
+}
+
+container.appendChild(style);
+
+requestAnimationFrame(function() {
+  measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+target {
+  position: absolute;
+  border: 5px solid green;
+  border-radius: 100%;
+}
+container {
+  position: absolute;
+  width: 550px;
+  height: 800px;
+  background-color: lightgrey;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-new-element-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-new-element-compositor-transform.html
new file mode 100644
index 00000000000..5b0ce206637
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-new-element-compositor-transform.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+window.measurementReady = true;
+var N = 1000;
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+}
+
+function startAllAnimations() {
+  container.textContent = '';
+  for (var i = 0; i < N; i++) {
+    startAnimation();
+  }
+}
+
+startAllAnimations();
+setInterval(startAllAnimations, duration);
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { transform: rotate(360deg); }
+  100% { transform: rotate(0deg); }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-new-element-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-new-element-mainthread-transform.html
new file mode 100644
index 00000000000..bc93a30726d
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-new-element-mainthread-transform.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+window.measurementReady = true;
+var N = 1000;
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+}
+
+function startAllAnimations() {
+  container.textContent = '';
+  for (var i = 0; i < N; i++) {
+    startAnimation();
+  }
+}
+
+startAllAnimations();
+setInterval(startAllAnimations, duration);
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { transform: rotate(360deg) translate(1%); }
+  100% { transform: rotate(0deg) translate(0%); }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-new-element-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-new-element-opacity.html
new file mode 100644
index 00000000000..036e7069c81
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-new-element-opacity.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+window.measurementReady = true;
+var N = 1000;
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+}
+
+function startAllAnimations() {
+  container.textContent = '';
+  for (var i = 0; i < N; i++) {
+    startAnimation();
+  }
+}
+
+startAllAnimations();
+setInterval(startAllAnimations, duration);
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-new-element-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-new-element-px-height.html
new file mode 100644
index 00000000000..c0274c9230f
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-new-element-px-height.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+window.measurementReady = true;
+var N = 1000;
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+}
+
+function startAllAnimations() {
+  container.textContent = '';
+  for (var i = 0; i < N; i++) {
+    startAnimation();
+  }
+}
+
+startAllAnimations();
+setInterval(startAllAnimations, duration);
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { height: 20px; }
+  100% { height: 10px; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-new-element-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-new-element-specific-color.html
new file mode 100644
index 00000000000..f5f8afb1307
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-new-element-specific-color.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+window.measurementReady = true;
+var N = 1000;
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+}
+
+function startAllAnimations() {
+  container.textContent = '';
+  for (var i = 0; i < N; i++) {
+    startAnimation();
+  }
+}
+
+startAllAnimations();
+setInterval(startAllAnimations, duration);
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { background-color: pink; }
+  100% { background-color: lime; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-style-element-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-style-element-compositor-transform.html
new file mode 100644
index 00000000000..7f84f2ca596
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-style-element-compositor-transform.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+window.measurementReady = true;
+var N = 500;
+var duration = 1000;
+var style = null;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+}
+
+var nextAnim = 0;
+function updateStyle() {
+  if (style) {
+    style.remove();
+  }
+  anim = 'anim' + nextAnim++;
+  style = document.createElement('style');
+  style.textContent = '\
+  target {\
+    display: inline-block;\
+    width: 9px; height: 9px;\
+    background: orange;\
+    -webkit-animation: ' + anim + ' 1s infinite;\
+  }\n\
+  @-webkit-keyframes ' + anim + ' {\
+    0% { transform: rotate(360deg); }\
+    100% { transform: rotate(0deg); }\
+  }';
+  container.appendChild(style);
+}
+
+updateStyle();
+setInterval(updateStyle, duration);
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-style-element-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-style-element-mainthread-transform.html
new file mode 100644
index 00000000000..41a81a67177
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-style-element-mainthread-transform.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+window.measurementReady = true;
+var N = 500;
+var duration = 1000;
+var style = null;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+}
+
+var nextAnim = 0;
+function updateStyle() {
+  if (style) {
+    style.remove();
+  }
+  anim = 'anim' + nextAnim++;
+  style = document.createElement('style');
+  style.textContent = '\
+  target {\
+    display: inline-block;\
+    width: 9px; height: 9px;\
+    background: orange;\
+    -webkit-animation: ' + anim + ' 1s infinite;\
+  }\n\
+  @-webkit-keyframes ' + anim + ' {\
+    0% { transform: rotate(360deg) translate(1%); }\
+    100% { transform: rotate(0deg) translate(0%); }\
+  }';
+  container.appendChild(style);
+}
+
+updateStyle();
+setInterval(updateStyle, duration);
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-style-element-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-style-element-opacity.html
new file mode 100644
index 00000000000..ea02a3d5ae2
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-style-element-opacity.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+window.measurementReady = true;
+var N = 500;
+var duration = 1000;
+var style = null;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+}
+
+var nextAnim = 0;
+function updateStyle() {
+  if (style) {
+    style.remove();
+  }
+  anim = 'anim' + nextAnim++;
+  style = document.createElement('style');
+  style.textContent = '\
+  target {\
+    display: inline-block;\
+    width: 9px; height: 9px;\
+    background: orange;\
+    -webkit-animation: ' + anim + ' 1s infinite;\
+  }\n\
+  @-webkit-keyframes ' + anim + ' {\
+    0% { opacity: 0; }\
+    100% { opacity: 1; }\
+  }';
+  container.appendChild(style);
+}
+
+updateStyle();
+setInterval(updateStyle, duration);
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-style-element-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-style-element-px-height.html
new file mode 100644
index 00000000000..c3a85452c2f
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-style-element-px-height.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+window.measurementReady = true;
+var N = 500;
+var duration = 1000;
+var style = null;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+}
+
+var nextAnim = 0;
+function updateStyle() {
+  if (style) {
+    style.remove();
+  }
+  anim = 'anim' + nextAnim++;
+  style = document.createElement('style');
+  style.textContent = '\
+  target {\
+    display: inline-block;\
+    width: 9px; height: 9px;\
+    background: orange;\
+    -webkit-animation: ' + anim + ' 1s infinite;\
+  }\n\
+  @-webkit-keyframes ' + anim + ' {\
+    0% { height: 20px; }\
+    100% { height: 10px; }\
+  }';
+  container.appendChild(style);
+}
+
+updateStyle();
+setInterval(updateStyle, duration);
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-style-element-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-style-element-specific-color.html
new file mode 100644
index 00000000000..771c5373484
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-inserting-style-element-specific-color.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+window.measurementReady = true;
+var N = 500;
+var duration = 1000;
+var style = null;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+}
+
+var nextAnim = 0;
+function updateStyle() {
+  if (style) {
+    style.remove();
+  }
+  anim = 'anim' + nextAnim++;
+  style = document.createElement('style');
+  style.textContent = '\
+  target {\
+    display: inline-block;\
+    width: 9px; height: 9px;\
+    background: orange;\
+    -webkit-animation: ' + anim + ' 1s infinite;\
+  }\n\
+  @-webkit-keyframes ' + anim + ' {\
+    0% { background-color: pink; }\
+    100% { background-color: lime; }\
+  }';
+  container.appendChild(style);
+}
+
+updateStyle();
+setInterval(updateStyle, duration);
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-class-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-class-compositor-transform.html
new file mode 100644
index 00000000000..f15f404955e
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-class-compositor-transform.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+window.measurementReady = true;
+var N = 1000;
+var duration = 1000;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+}
+
+function startAllAnimations() {
+  for (var i = 0; i < container.childNodes.length; i++) {
+    container.childNodes[i].classList.toggle('anim');
+  }
+}
+startAllAnimations();
+setInterval(startAllAnimations, duration);
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+target.anim {
+  -webkit-animation: anim2 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { transform: rotate(360deg); }
+  100% { transform: rotate(0deg); }
+}
+@-webkit-keyframes anim2 {
+  0% { transform: rotate(360deg); }
+  100% { transform: rotate(0deg); }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-class-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-class-mainthread-transform.html
new file mode 100644
index 00000000000..68fa7338cca
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-class-mainthread-transform.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+window.measurementReady = true;
+var N = 1000;
+var duration = 1000;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+}
+
+function startAllAnimations() {
+  for (var i = 0; i < container.childNodes.length; i++) {
+    container.childNodes[i].classList.toggle('anim');
+  }
+}
+startAllAnimations();
+setInterval(startAllAnimations, duration);
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+target.anim {
+  -webkit-animation: anim2 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { transform: rotate(360deg) translate(1%); }
+  100% { transform: rotate(0deg) translate(0%); }
+}
+@-webkit-keyframes anim2 {
+  0% { transform: rotate(360deg) translate(1%); }
+  100% { transform: rotate(0deg) translate(0%); }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-class-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-class-opacity.html
new file mode 100644
index 00000000000..ce0a63f2385
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-class-opacity.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+window.measurementReady = true;
+var N = 1000;
+var duration = 1000;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+}
+
+function startAllAnimations() {
+  for (var i = 0; i < container.childNodes.length; i++) {
+    container.childNodes[i].classList.toggle('anim');
+  }
+}
+startAllAnimations();
+setInterval(startAllAnimations, duration);
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+target.anim {
+  -webkit-animation: anim2 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+@-webkit-keyframes anim2 {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-class-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-class-px-height.html
new file mode 100644
index 00000000000..64a138a1524
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-class-px-height.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+window.measurementReady = true;
+var N = 1000;
+var duration = 1000;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+}
+
+function startAllAnimations() {
+  for (var i = 0; i < container.childNodes.length; i++) {
+    container.childNodes[i].classList.toggle('anim');
+  }
+}
+startAllAnimations();
+setInterval(startAllAnimations, duration);
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+target.anim {
+  -webkit-animation: anim2 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { height: 20px; }
+  100% { height: 10px; }
+}
+@-webkit-keyframes anim2 {
+  0% { height: 20px; }
+  100% { height: 10px; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-class-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-class-specific-color.html
new file mode 100644
index 00000000000..a15d55abb6d
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-class-specific-color.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+window.measurementReady = true;
+var N = 1000;
+var duration = 1000;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+}
+
+function startAllAnimations() {
+  for (var i = 0; i < container.childNodes.length; i++) {
+    container.childNodes[i].classList.toggle('anim');
+  }
+}
+startAllAnimations();
+setInterval(startAllAnimations, duration);
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+target.anim {
+  -webkit-animation: anim2 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { background-color: pink; }
+  100% { background-color: lime; }
+}
+@-webkit-keyframes anim2 {
+  0% { background-color: pink; }
+  100% { background-color: lime; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-inline-style-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-inline-style-compositor-transform.html
new file mode 100644
index 00000000000..90d15c3c1eb
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-inline-style-compositor-transform.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+window.measurementReady = true;
+var N = 1000;
+var duration = 1000;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+}
+
+var anim = 0;
+function startAllAnimations() {
+  anim++;
+  for (var i = 0; i < container.childNodes.length; i++) {
+    container.childNodes[i].style.webkitAnimationName = 'anim' + (1 + (i + anim) % 2);
+  }
+}
+
+startAllAnimations();
+setInterval(startAllAnimations, duration);
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { transform: rotate(360deg); }
+  100% { transform: rotate(0deg); }
+}
+@-webkit-keyframes anim2 {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-inline-style-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-inline-style-mainthread-transform.html
new file mode 100644
index 00000000000..0216289ce07
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-inline-style-mainthread-transform.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+window.measurementReady = true;
+var N = 1000;
+var duration = 1000;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+}
+
+var anim = 0;
+function startAllAnimations() {
+  anim++;
+  for (var i = 0; i < container.childNodes.length; i++) {
+    container.childNodes[i].style.webkitAnimationName = 'anim' + (1 + (i + anim) % 2);
+  }
+}
+
+startAllAnimations();
+setInterval(startAllAnimations, duration);
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { transform: rotate(360deg) translate(1%); }
+  100% { transform: rotate(0deg) translate(0%); }
+}
+@-webkit-keyframes anim2 {
+  0% { transform: rotate(0deg) translate(0%); }
+  100% { transform: rotate(360deg) translate(1%); }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-inline-style-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-inline-style-opacity.html
new file mode 100644
index 00000000000..d55b8845214
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-inline-style-opacity.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+window.measurementReady = true;
+var N = 1000;
+var duration = 1000;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+}
+
+var anim = 0;
+function startAllAnimations() {
+  anim++;
+  for (var i = 0; i < container.childNodes.length; i++) {
+    container.childNodes[i].style.webkitAnimationName = 'anim' + (1 + (i + anim) % 2);
+  }
+}
+
+startAllAnimations();
+setInterval(startAllAnimations, duration);
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+@-webkit-keyframes anim2 {
+  0% { opacity: 1; }
+  100% { opacity: 0; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-inline-style-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-inline-style-px-height.html
new file mode 100644
index 00000000000..97e4da6bd9a
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-inline-style-px-height.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+window.measurementReady = true;
+var N = 1000;
+var duration = 1000;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+}
+
+var anim = 0;
+function startAllAnimations() {
+  anim++;
+  for (var i = 0; i < container.childNodes.length; i++) {
+    container.childNodes[i].style.webkitAnimationName = 'anim' + (1 + (i + anim) % 2);
+  }
+}
+
+startAllAnimations();
+setInterval(startAllAnimations, duration);
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { height: 20px; }
+  100% { height: 10px; }
+}
+@-webkit-keyframes anim2 {
+  0% { height: 10px; }
+  100% { height: 20px; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-inline-style-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-inline-style-specific-color.html
new file mode 100644
index 00000000000..98cd94cf880
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-simultaneous-by-updating-inline-style-specific-color.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+window.measurementReady = true;
+var N = 1000;
+var duration = 1000;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+}
+
+var anim = 0;
+function startAllAnimations() {
+  anim++;
+  for (var i = 0; i < container.childNodes.length; i++) {
+    container.childNodes[i].style.webkitAnimationName = 'anim' + (1 + (i + anim) % 2);
+  }
+}
+
+startAllAnimations();
+setInterval(startAllAnimations, duration);
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { background-color: pink; }
+  100% { background-color: lime; }
+}
+@-webkit-keyframes anim2 {
+  0% { background-color: lime; }
+  100% { background-color: pink; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-new-element-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-new-element-compositor-transform.html
new file mode 100644
index 00000000000..803e4a3c7a2
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-new-element-compositor-transform.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  target.i = 1;
+  container.appendChild(target);
+  target.addEventListener('webkitAnimationEnd', function(e) {
+    e.target.remove();
+    startAnimation();
+  });
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      startAnimation();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { transform: rotate(360deg); }
+  100% { transform: rotate(0deg); }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-new-element-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-new-element-mainthread-transform.html
new file mode 100644
index 00000000000..69cd366aaea
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-new-element-mainthread-transform.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  target.i = 1;
+  container.appendChild(target);
+  target.addEventListener('webkitAnimationEnd', function(e) {
+    e.target.remove();
+    startAnimation();
+  });
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      startAnimation();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { transform: rotate(360deg) translate(1%); }
+  100% { transform: rotate(0deg) translate(0%); }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-new-element-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-new-element-opacity.html
new file mode 100644
index 00000000000..c4a7a94dbf2
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-new-element-opacity.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  target.i = 1;
+  container.appendChild(target);
+  target.addEventListener('webkitAnimationEnd', function(e) {
+    e.target.remove();
+    startAnimation();
+  });
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      startAnimation();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-new-element-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-new-element-px-height.html
new file mode 100644
index 00000000000..575fbd5d340
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-new-element-px-height.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  target.i = 1;
+  container.appendChild(target);
+  target.addEventListener('webkitAnimationEnd', function(e) {
+    e.target.remove();
+    startAnimation();
+  });
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      startAnimation();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { height: 20px; }
+  100% { height: 10px; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-new-element-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-new-element-specific-color.html
new file mode 100644
index 00000000000..4b6f1995c84
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-new-element-specific-color.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  target.i = 1;
+  container.appendChild(target);
+  target.addEventListener('webkitAnimationEnd', function(e) {
+    e.target.remove();
+    startAnimation();
+  });
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      startAnimation();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { background-color: pink; }
+  100% { background-color: lime; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-style-element-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-style-element-compositor-transform.html
new file mode 100644
index 00000000000..c41edcee0b3
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-style-element-compositor-transform.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 500;
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  updateStyle(target);
+  target.addEventListener('webkitAnimationEnd', function(e) {
+    updateStyle(target);
+  });
+}
+
+var nextId = 0;
+var nextAnim = 0;
+function updateStyle(element) {
+  if (!element.id) {
+    element.id = 'e' + nextId++;
+  }
+  if (element.styleSheet) {
+    element.styleSheet.remove();
+  }
+  var id = element.id;
+  var anim = id + 'anim' + nextAnim++;
+  var style = document.createElement('style');
+  style.textContent = '\
+  #' + id + ' {\
+    display: inline-block;\
+    width: 9px; height: 9px;\
+    background: orange;\
+    -webkit-animation: ' + anim + ' 1s;\
+  }\n\
+  @-webkit-keyframes ' + anim + ' {\
+    0% { transform: rotate(360deg); }\
+    100% { transform: rotate(0deg); }\
+  }';
+  container.appendChild(style);
+  element.styleSheet = style;
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      startAnimation();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-style-element-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-style-element-mainthread-transform.html
new file mode 100644
index 00000000000..13f59d85ee1
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-style-element-mainthread-transform.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 500;
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  updateStyle(target);
+  target.addEventListener('webkitAnimationEnd', function(e) {
+    updateStyle(target);
+  });
+}
+
+var nextId = 0;
+var nextAnim = 0;
+function updateStyle(element) {
+  if (!element.id) {
+    element.id = 'e' + nextId++;
+  }
+  if (element.styleSheet) {
+    element.styleSheet.remove();
+  }
+  var id = element.id;
+  var anim = id + 'anim' + nextAnim++;
+  var style = document.createElement('style');
+  style.textContent = '\
+  #' + id + ' {\
+    display: inline-block;\
+    width: 9px; height: 9px;\
+    background: orange;\
+    -webkit-animation: ' + anim + ' 1s;\
+  }\n\
+  @-webkit-keyframes ' + anim + ' {\
+    0% { transform: rotate(360deg) translate(1%); }\
+    100% { transform: rotate(0deg) translate(0%); }\
+  }';
+  container.appendChild(style);
+  element.styleSheet = style;
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      startAnimation();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-style-element-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-style-element-opacity.html
new file mode 100644
index 00000000000..6b80f63abdb
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-style-element-opacity.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 500;
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  updateStyle(target);
+  target.addEventListener('webkitAnimationEnd', function(e) {
+    updateStyle(target);
+  });
+}
+
+var nextId = 0;
+var nextAnim = 0;
+function updateStyle(element) {
+  if (!element.id) {
+    element.id = 'e' + nextId++;
+  }
+  if (element.styleSheet) {
+    element.styleSheet.remove();
+  }
+  var id = element.id;
+  var anim = id + 'anim' + nextAnim++;
+  var style = document.createElement('style');
+  style.textContent = '\
+  #' + id + ' {\
+    display: inline-block;\
+    width: 9px; height: 9px;\
+    background: orange;\
+    -webkit-animation: ' + anim + ' 1s;\
+  }\n\
+  @-webkit-keyframes ' + anim + ' {\
+    0% { opacity: 0; }\
+    100% { opacity: 1; }\
+  }';
+  container.appendChild(style);
+  element.styleSheet = style;
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      startAnimation();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-style-element-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-style-element-px-height.html
new file mode 100644
index 00000000000..733d0f974bb
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-style-element-px-height.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 500;
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  updateStyle(target);
+  target.addEventListener('webkitAnimationEnd', function(e) {
+    updateStyle(target);
+  });
+}
+
+var nextId = 0;
+var nextAnim = 0;
+function updateStyle(element) {
+  if (!element.id) {
+    element.id = 'e' + nextId++;
+  }
+  if (element.styleSheet) {
+    element.styleSheet.remove();
+  }
+  var id = element.id;
+  var anim = id + 'anim' + nextAnim++;
+  var style = document.createElement('style');
+  style.textContent = '\
+  #' + id + ' {\
+    display: inline-block;\
+    width: 9px; height: 9px;\
+    background: orange;\
+    -webkit-animation: ' + anim + ' 1s;\
+  }\n\
+  @-webkit-keyframes ' + anim + ' {\
+    0% { height: 20px; }\
+    100% { height: 10px; }\
+  }';
+  container.appendChild(style);
+  element.styleSheet = style;
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      startAnimation();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-style-element-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-style-element-specific-color.html
new file mode 100644
index 00000000000..de16b638874
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-inserting-style-element-specific-color.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 500;
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  updateStyle(target);
+  target.addEventListener('webkitAnimationEnd', function(e) {
+    updateStyle(target);
+  });
+}
+
+var nextId = 0;
+var nextAnim = 0;
+function updateStyle(element) {
+  if (!element.id) {
+    element.id = 'e' + nextId++;
+  }
+  if (element.styleSheet) {
+    element.styleSheet.remove();
+  }
+  var id = element.id;
+  var anim = id + 'anim' + nextAnim++;
+  var style = document.createElement('style');
+  style.textContent = '\
+  #' + id + ' {\
+    display: inline-block;\
+    width: 9px; height: 9px;\
+    background: orange;\
+    -webkit-animation: ' + anim + ' 1s;\
+  }\n\
+  @-webkit-keyframes ' + anim + ' {\
+    0% { background-color: pink; }\
+    100% { background-color: lime; }\
+  }';
+  container.appendChild(style);
+  element.styleSheet = style;
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      startAnimation();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-class-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-class-compositor-transform.html
new file mode 100644
index 00000000000..a648dad6292
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-class-compositor-transform.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  target.addEventListener('webkitAnimationEnd', function(e) {
+    e.target.classList.toggle('anim');
+  });
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      startAnimation();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+target.anim {
+  -webkit-animation: anim2 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { transform: rotate(360deg); }
+  100% { transform: rotate(0deg); }
+}
+@-webkit-keyframes anim2 {
+  0% { transform: rotate(360deg); }
+  100% { transform: rotate(0deg); }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-class-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-class-mainthread-transform.html
new file mode 100644
index 00000000000..8614c21aeda
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-class-mainthread-transform.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  target.addEventListener('webkitAnimationEnd', function(e) {
+    e.target.classList.toggle('anim');
+  });
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      startAnimation();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+target.anim {
+  -webkit-animation: anim2 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { transform: rotate(360deg) translate(1%); }
+  100% { transform: rotate(0deg) translate(0%); }
+}
+@-webkit-keyframes anim2 {
+  0% { transform: rotate(360deg) translate(1%); }
+  100% { transform: rotate(0deg) translate(0%); }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-class-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-class-opacity.html
new file mode 100644
index 00000000000..9a96c0fb067
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-class-opacity.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  target.addEventListener('webkitAnimationEnd', function(e) {
+    e.target.classList.toggle('anim');
+  });
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      startAnimation();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+target.anim {
+  -webkit-animation: anim2 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+@-webkit-keyframes anim2 {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-class-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-class-px-height.html
new file mode 100644
index 00000000000..bea82161872
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-class-px-height.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  target.addEventListener('webkitAnimationEnd', function(e) {
+    e.target.classList.toggle('anim');
+  });
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      startAnimation();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+target.anim {
+  -webkit-animation: anim2 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { height: 20px; }
+  100% { height: 10px; }
+}
+@-webkit-keyframes anim2 {
+  0% { height: 20px; }
+  100% { height: 10px; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-class-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-class-specific-color.html
new file mode 100644
index 00000000000..57dc569f13e
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-class-specific-color.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  target.addEventListener('webkitAnimationEnd', function(e) {
+    e.target.classList.toggle('anim');
+  });
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      startAnimation();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+target.anim {
+  -webkit-animation: anim2 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { background-color: pink; }
+  100% { background-color: lime; }
+}
+@-webkit-keyframes anim2 {
+  0% { background-color: pink; }
+  100% { background-color: lime; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-inline-style-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-inline-style-compositor-transform.html
new file mode 100644
index 00000000000..ac72530997a
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-inline-style-compositor-transform.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  target.i = 1;
+  container.appendChild(target);
+  target.addEventListener('webkitAnimationEnd', function(e) {
+    e.target.style.webkitAnimationName = 'anim' + (1 + e.target.i++ % 2);
+  });
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      startAnimation();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { transform: rotate(360deg); }
+  100% { transform: rotate(0deg); }
+}
+@-webkit-keyframes anim2 {
+  0% { transform: rotate(360deg); }
+  100% { transform: rotate(0deg); }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-inline-style-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-inline-style-mainthread-transform.html
new file mode 100644
index 00000000000..c3439d34af5
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-inline-style-mainthread-transform.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  target.i = 1;
+  container.appendChild(target);
+  target.addEventListener('webkitAnimationEnd', function(e) {
+    e.target.style.webkitAnimationName = 'anim' + (1 + e.target.i++ % 2);
+  });
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      startAnimation();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { transform: rotate(360deg) translate(1%); }
+  100% { transform: rotate(0deg) translate(0%); }
+}
+@-webkit-keyframes anim2 {
+  0% { transform: rotate(360deg) translate(1%); }
+  100% { transform: rotate(0deg) translate(0%); }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-inline-style-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-inline-style-opacity.html
new file mode 100644
index 00000000000..695afb39d2a
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-inline-style-opacity.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  target.i = 1;
+  container.appendChild(target);
+  target.addEventListener('webkitAnimationEnd', function(e) {
+    e.target.style.webkitAnimationName = 'anim' + (1 + e.target.i++ % 2);
+  });
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      startAnimation();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+@-webkit-keyframes anim2 {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-inline-style-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-inline-style-px-height.html
new file mode 100644
index 00000000000..5bb36e7f4be
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-inline-style-px-height.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  target.i = 1;
+  container.appendChild(target);
+  target.addEventListener('webkitAnimationEnd', function(e) {
+    e.target.style.webkitAnimationName = 'anim' + (1 + e.target.i++ % 2);
+  });
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      startAnimation();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { height: 20px; }
+  100% { height: 10px; }
+}
+@-webkit-keyframes anim2 {
+  0% { height: 20px; }
+  100% { height: 10px; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-inline-style-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-inline-style-specific-color.html
new file mode 100644
index 00000000000..e63cde723d6
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-chaining-by-updating-inline-style-specific-color.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  target.i = 1;
+  container.appendChild(target);
+  target.addEventListener('webkitAnimationEnd', function(e) {
+    e.target.style.webkitAnimationName = 'anim' + (1 + e.target.i++ % 2);
+  });
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      startAnimation();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { background-color: pink; }
+  100% { background-color: lime; }
+}
+@-webkit-keyframes anim2 {
+  0% { background-color: pink; }
+  100% { background-color: lime; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-infinite-iterations-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-infinite-iterations-compositor-transform.html
new file mode 100644
index 00000000000..01fff15e423
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-infinite-iterations-compositor-transform.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target.style.animationDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+}
+
+var style = document.createElement('style');
+style.textContent = '\
+target {\
+  display: inline-block;\
+  width: 9px; height: 9px;\
+  background: orange;\
+  -webkit-animation: anim ' + duration + 'ms infinite;\
+}\n\
+@-webkit-keyframes anim {\
+  0% { transform: rotate(360deg); }\
+  100% { transform: rotate(0deg); }\
+}';
+container.appendChild(style);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-infinite-iterations-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-infinite-iterations-mainthread-transform.html
new file mode 100644
index 00000000000..29cbbcc9319
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-infinite-iterations-mainthread-transform.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target.style.animationDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+}
+
+var style = document.createElement('style');
+style.textContent = '\
+target {\
+  display: inline-block;\
+  width: 9px; height: 9px;\
+  background: orange;\
+  -webkit-animation: anim ' + duration + 'ms infinite;\
+}\n\
+@-webkit-keyframes anim {\
+  0% { transform: rotate(360deg) translate(1%); }\
+  100% { transform: rotate(0deg) translate(0%); }\
+}';
+container.appendChild(style);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-infinite-iterations-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-infinite-iterations-opacity.html
new file mode 100644
index 00000000000..5463be8b2f4
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-infinite-iterations-opacity.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target.style.animationDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+}
+
+var style = document.createElement('style');
+style.textContent = '\
+target {\
+  display: inline-block;\
+  width: 9px; height: 9px;\
+  background: orange;\
+  -webkit-animation: anim ' + duration + 'ms infinite;\
+}\n\
+@-webkit-keyframes anim {\
+  0% { opacity: 0; }\
+  100% { opacity: 1; }\
+}';
+container.appendChild(style);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-infinite-iterations-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-infinite-iterations-px-height.html
new file mode 100644
index 00000000000..4f6f8bc6efa
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-infinite-iterations-px-height.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target.style.animationDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+}
+
+var style = document.createElement('style');
+style.textContent = '\
+target {\
+  display: inline-block;\
+  width: 9px; height: 9px;\
+  background: orange;\
+  -webkit-animation: anim ' + duration + 'ms infinite;\
+}\n\
+@-webkit-keyframes anim {\
+  0% { height: 20px; }\
+  100% { height: 10px; }\
+}';
+container.appendChild(style);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-infinite-iterations-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-infinite-iterations-specific-color.html
new file mode 100644
index 00000000000..89ac6f09479
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-infinite-iterations-specific-color.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target.style.animationDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+}
+
+var style = document.createElement('style');
+style.textContent = '\
+target {\
+  display: inline-block;\
+  width: 9px; height: 9px;\
+  background: orange;\
+  -webkit-animation: anim ' + duration + 'ms infinite;\
+}\n\
+@-webkit-keyframes anim {\
+  0% { background-color: pink; }\
+  100% { background-color: lime; }\
+}';
+container.appendChild(style);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-new-element-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-new-element-compositor-transform.html
new file mode 100644
index 00000000000..6bcb0466b82
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-new-element-compositor-transform.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (targets[i])
+    targets[i].remove();
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets[i] = target;
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      window.measurementReady = true;
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s linear;
+}
+@-webkit-keyframes anim1 {
+  0% { transform: rotate(360deg); }
+  100% { transform: rotate(0deg); }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-new-element-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-new-element-mainthread-transform.html
new file mode 100644
index 00000000000..d8a079800ab
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-new-element-mainthread-transform.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (targets[i])
+    targets[i].remove();
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets[i] = target;
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      window.measurementReady = true;
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s linear;
+}
+@-webkit-keyframes anim1 {
+  0% { transform: rotate(360deg) translate(1%); }
+  100% { transform: rotate(0deg) translate(0%); }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-new-element-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-new-element-opacity.html
new file mode 100644
index 00000000000..4a8ab5aeb77
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-new-element-opacity.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (targets[i])
+    targets[i].remove();
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets[i] = target;
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      window.measurementReady = true;
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s linear;
+}
+@-webkit-keyframes anim1 {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-new-element-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-new-element-px-height.html
new file mode 100644
index 00000000000..1c1ab375a7e
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-new-element-px-height.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (targets[i])
+    targets[i].remove();
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets[i] = target;
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      window.measurementReady = true;
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s linear;
+}
+@-webkit-keyframes anim1 {
+  0% { height: 20px; }
+  100% { height: 10px; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-new-element-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-new-element-specific-color.html
new file mode 100644
index 00000000000..5ec1fbbcab2
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-new-element-specific-color.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (targets[i])
+    targets[i].remove();
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets[i] = target;
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      window.measurementReady = true;
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s linear;
+}
+@-webkit-keyframes anim1 {
+  0% { background-color: pink; }
+  100% { background-color: lime; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-style-element-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-style-element-compositor-transform.html
new file mode 100644
index 00000000000..5cc36da21a0
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-style-element-compositor-transform.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 500;
+var duration = 1000;
+var targets = [];
+var styles = [];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function addNewAnimationStyle(step) {
+  // Clean up overwritten styles.
+  var i = 0;
+  for (; i < styles.length && styles[i].lastStep < step; i++) {
+    styles[i].style.remove();
+  }
+  styles.splice(0, i);
+
+  var style = document.createElement('style');
+  var animationName = 'anim' + step;
+  style.textContent = '@-webkit-keyframes ' + animationName + ' { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } }';
+  container.appendChild(style);
+  styles.push({
+    style: style,
+    lastStep: step + N,
+  });
+
+  return animationName;
+}
+
+function startAnimations(startingTargets, startStep, endStep) {
+  var newAnimationName = addNewAnimationStyle(startStep, endStep);
+  startingTargets.forEach(function(startInfo) {
+    startInfo.target.style.animationName = newAnimationName;
+    startInfo.target.style.animationDelay = -startInfo.fastForward + 'ms';
+  });
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var previousStep = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    var restartingTargets = [];
+    for (var step = Math.max(targetStep - N, previousStep); step < targetStep; step++) {
+      var stepStartTime = step / N * duration;
+      restartingTargets.push({
+        target: targets[step % N],
+        fastForward: elapsed - stepStartTime,
+      });
+    }
+    startAnimations(restartingTargets, targetStep);
+    previousStep = targetStep;
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  -webkit-animation: 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-style-element-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-style-element-mainthread-transform.html
new file mode 100644
index 00000000000..287d44863c7
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-style-element-mainthread-transform.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 500;
+var duration = 1000;
+var targets = [];
+var styles = [];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function addNewAnimationStyle(step) {
+  // Clean up overwritten styles.
+  var i = 0;
+  for (; i < styles.length && styles[i].lastStep < step; i++) {
+    styles[i].style.remove();
+  }
+  styles.splice(0, i);
+
+  var style = document.createElement('style');
+  var animationName = 'anim' + step;
+  style.textContent = '@-webkit-keyframes ' + animationName + ' { 0% { transform: rotate(360deg) translate(1%); } 100% { transform: rotate(0deg) translate(0%); } }';
+  container.appendChild(style);
+  styles.push({
+    style: style,
+    lastStep: step + N,
+  });
+
+  return animationName;
+}
+
+function startAnimations(startingTargets, startStep, endStep) {
+  var newAnimationName = addNewAnimationStyle(startStep, endStep);
+  startingTargets.forEach(function(startInfo) {
+    startInfo.target.style.animationName = newAnimationName;
+    startInfo.target.style.animationDelay = -startInfo.fastForward + 'ms';
+  });
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var previousStep = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    var restartingTargets = [];
+    for (var step = Math.max(targetStep - N, previousStep); step < targetStep; step++) {
+      var stepStartTime = step / N * duration;
+      restartingTargets.push({
+        target: targets[step % N],
+        fastForward: elapsed - stepStartTime,
+      });
+    }
+    startAnimations(restartingTargets, targetStep);
+    previousStep = targetStep;
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  -webkit-animation: 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-style-element-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-style-element-opacity.html
new file mode 100644
index 00000000000..20b6404c771
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-style-element-opacity.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 500;
+var duration = 1000;
+var targets = [];
+var styles = [];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function addNewAnimationStyle(step) {
+  // Clean up overwritten styles.
+  var i = 0;
+  for (; i < styles.length && styles[i].lastStep < step; i++) {
+    styles[i].style.remove();
+  }
+  styles.splice(0, i);
+
+  var style = document.createElement('style');
+  var animationName = 'anim' + step;
+  style.textContent = '@-webkit-keyframes ' + animationName + ' { 0% { opacity: 0; } 100% { opacity: 1; } }';
+  container.appendChild(style);
+  styles.push({
+    style: style,
+    lastStep: step + N,
+  });
+
+  return animationName;
+}
+
+function startAnimations(startingTargets, startStep, endStep) {
+  var newAnimationName = addNewAnimationStyle(startStep, endStep);
+  startingTargets.forEach(function(startInfo) {
+    startInfo.target.style.animationName = newAnimationName;
+    startInfo.target.style.animationDelay = -startInfo.fastForward + 'ms';
+  });
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var previousStep = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    var restartingTargets = [];
+    for (var step = Math.max(targetStep - N, previousStep); step < targetStep; step++) {
+      var stepStartTime = step / N * duration;
+      restartingTargets.push({
+        target: targets[step % N],
+        fastForward: elapsed - stepStartTime,
+      });
+    }
+    startAnimations(restartingTargets, targetStep);
+    previousStep = targetStep;
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  -webkit-animation: 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-style-element-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-style-element-px-height.html
new file mode 100644
index 00000000000..43ecbf56f9b
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-style-element-px-height.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 500;
+var duration = 1000;
+var targets = [];
+var styles = [];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function addNewAnimationStyle(step) {
+  // Clean up overwritten styles.
+  var i = 0;
+  for (; i < styles.length && styles[i].lastStep < step; i++) {
+    styles[i].style.remove();
+  }
+  styles.splice(0, i);
+
+  var style = document.createElement('style');
+  var animationName = 'anim' + step;
+  style.textContent = '@-webkit-keyframes ' + animationName + ' { 0% { height: 20px; } 100% { height: 10px; } }';
+  container.appendChild(style);
+  styles.push({
+    style: style,
+    lastStep: step + N,
+  });
+
+  return animationName;
+}
+
+function startAnimations(startingTargets, startStep, endStep) {
+  var newAnimationName = addNewAnimationStyle(startStep, endStep);
+  startingTargets.forEach(function(startInfo) {
+    startInfo.target.style.animationName = newAnimationName;
+    startInfo.target.style.animationDelay = -startInfo.fastForward + 'ms';
+  });
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var previousStep = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    var restartingTargets = [];
+    for (var step = Math.max(targetStep - N, previousStep); step < targetStep; step++) {
+      var stepStartTime = step / N * duration;
+      restartingTargets.push({
+        target: targets[step % N],
+        fastForward: elapsed - stepStartTime,
+      });
+    }
+    startAnimations(restartingTargets, targetStep);
+    previousStep = targetStep;
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  -webkit-animation: 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-style-element-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-style-element-specific-color.html
new file mode 100644
index 00000000000..a37312b53f8
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-inserting-style-element-specific-color.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 500;
+var duration = 1000;
+var targets = [];
+var styles = [];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function addNewAnimationStyle(step) {
+  // Clean up overwritten styles.
+  var i = 0;
+  for (; i < styles.length && styles[i].lastStep < step; i++) {
+    styles[i].style.remove();
+  }
+  styles.splice(0, i);
+
+  var style = document.createElement('style');
+  var animationName = 'anim' + step;
+  style.textContent = '@-webkit-keyframes ' + animationName + ' { 0% { background-color: pink; } 100% { background-color: lime; } }';
+  container.appendChild(style);
+  styles.push({
+    style: style,
+    lastStep: step + N,
+  });
+
+  return animationName;
+}
+
+function startAnimations(startingTargets, startStep, endStep) {
+  var newAnimationName = addNewAnimationStyle(startStep, endStep);
+  startingTargets.forEach(function(startInfo) {
+    startInfo.target.style.animationName = newAnimationName;
+    startInfo.target.style.animationDelay = -startInfo.fastForward + 'ms';
+  });
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var previousStep = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    var restartingTargets = [];
+    for (var step = Math.max(targetStep - N, previousStep); step < targetStep; step++) {
+      var stepStartTime = step / N * duration;
+      restartingTargets.push({
+        target: targets[step % N],
+        fastForward: elapsed - stepStartTime,
+      });
+    }
+    startAnimations(restartingTargets, targetStep);
+    previousStep = targetStep;
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  -webkit-animation: 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-class-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-class-compositor-transform.html
new file mode 100644
index 00000000000..a7dedda103a
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-class-compositor-transform.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (targets[i]) {
+    targets[i].classList.toggle('anim');
+    return;
+  }
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets[i] = target;
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      window.measurementReady = true;
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+target.anim {
+  -webkit-animation: anim2 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { transform: rotate(360deg); }
+  100% { transform: rotate(0deg); }
+}
+@-webkit-keyframes anim2 {
+  0% { transform: rotate(360deg); }
+  100% { transform: rotate(0deg); }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-class-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-class-mainthread-transform.html
new file mode 100644
index 00000000000..33250042835
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-class-mainthread-transform.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (targets[i]) {
+    targets[i].classList.toggle('anim');
+    return;
+  }
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets[i] = target;
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      window.measurementReady = true;
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+target.anim {
+  -webkit-animation: anim2 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { transform: rotate(360deg) translate(1%); }
+  100% { transform: rotate(0deg) translate(0%); }
+}
+@-webkit-keyframes anim2 {
+  0% { transform: rotate(360deg) translate(1%); }
+  100% { transform: rotate(0deg) translate(0%); }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-class-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-class-opacity.html
new file mode 100644
index 00000000000..438393a47d8
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-class-opacity.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (targets[i]) {
+    targets[i].classList.toggle('anim');
+    return;
+  }
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets[i] = target;
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      window.measurementReady = true;
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+target.anim {
+  -webkit-animation: anim2 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+@-webkit-keyframes anim2 {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-class-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-class-px-height.html
new file mode 100644
index 00000000000..48b8e2f7928
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-class-px-height.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (targets[i]) {
+    targets[i].classList.toggle('anim');
+    return;
+  }
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets[i] = target;
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      window.measurementReady = true;
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+target.anim {
+  -webkit-animation: anim2 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { height: 20px; }
+  100% { height: 10px; }
+}
+@-webkit-keyframes anim2 {
+  0% { height: 20px; }
+  100% { height: 10px; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-class-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-class-specific-color.html
new file mode 100644
index 00000000000..c287c385f6b
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-class-specific-color.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (targets[i]) {
+    targets[i].classList.toggle('anim');
+    return;
+  }
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets[i] = target;
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      window.measurementReady = true;
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+target.anim {
+  -webkit-animation: anim2 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { background-color: pink; }
+  100% { background-color: lime; }
+}
+@-webkit-keyframes anim2 {
+  0% { background-color: pink; }
+  100% { background-color: lime; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-inline-style-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-inline-style-compositor-transform.html
new file mode 100644
index 00000000000..dfe47f48d0e
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-inline-style-compositor-transform.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (targets[i]) {
+    targets[i].style.webkitAnimationName = 'anim' + (1 + targets[i].i++ % 2);
+    targets[i].classList.toggle('anim');
+    return;
+  }
+  var target = document.createElement('target');
+  target.i = 1;
+  container.appendChild(target);
+  targets[i] = target;
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      window.measurementReady = true;
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { transform: rotate(360deg); }
+  100% { transform: rotate(0deg); }
+}
+@-webkit-keyframes anim2 {
+  0% { transform: rotate(360deg); }
+  100% { transform: rotate(0deg); }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-inline-style-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-inline-style-mainthread-transform.html
new file mode 100644
index 00000000000..f3ade6427cc
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-inline-style-mainthread-transform.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (targets[i]) {
+    targets[i].style.webkitAnimationName = 'anim' + (1 + targets[i].i++ % 2);
+    targets[i].classList.toggle('anim');
+    return;
+  }
+  var target = document.createElement('target');
+  target.i = 1;
+  container.appendChild(target);
+  targets[i] = target;
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      window.measurementReady = true;
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { transform: rotate(360deg) translate(1%); }
+  100% { transform: rotate(0deg) translate(0%); }
+}
+@-webkit-keyframes anim2 {
+  0% { transform: rotate(360deg) translate(1%); }
+  100% { transform: rotate(0deg) translate(0%); }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-inline-style-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-inline-style-opacity.html
new file mode 100644
index 00000000000..21df45b7d9d
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-inline-style-opacity.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (targets[i]) {
+    targets[i].style.webkitAnimationName = 'anim' + (1 + targets[i].i++ % 2);
+    targets[i].classList.toggle('anim');
+    return;
+  }
+  var target = document.createElement('target');
+  target.i = 1;
+  container.appendChild(target);
+  targets[i] = target;
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      window.measurementReady = true;
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+@-webkit-keyframes anim2 {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-inline-style-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-inline-style-px-height.html
new file mode 100644
index 00000000000..43086e033da
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-inline-style-px-height.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (targets[i]) {
+    targets[i].style.webkitAnimationName = 'anim' + (1 + targets[i].i++ % 2);
+    targets[i].classList.toggle('anim');
+    return;
+  }
+  var target = document.createElement('target');
+  target.i = 1;
+  container.appendChild(target);
+  targets[i] = target;
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      window.measurementReady = true;
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { height: 20px; }
+  100% { height: 10px; }
+}
+@-webkit-keyframes anim2 {
+  0% { height: 20px; }
+  100% { height: 10px; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-inline-style-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-inline-style-specific-color.html
new file mode 100644
index 00000000000..dd8f70173b9
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-animations-staggered-triggering-by-updating-inline-style-specific-color.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (targets[i]) {
+    targets[i].style.webkitAnimationName = 'anim' + (1 + targets[i].i++ % 2);
+    targets[i].classList.toggle('anim');
+    return;
+  }
+  var target = document.createElement('target');
+  target.i = 1;
+  container.appendChild(target);
+  targets[i] = target;
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      window.measurementReady = true;
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { background-color: pink; }
+  100% { background-color: lime; }
+}
+@-webkit-keyframes anim2 {
+  0% { background-color: pink; }
+  100% { background-color: lime; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-new-elements-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-new-elements-compositor-transform.html
new file mode 100644
index 00000000000..294e0e9f5dd
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-new-elements-compositor-transform.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+var triggers = [];
+
+for (var i = 0; i < N; i++) {
+  triggers.push(document.createElement('trigger'));
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startAllTransitions() {
+  requestAnimationFrame(function() {
+    targets.forEach(function(target, i) {
+      container.insertBefore(triggers[i], target);
+    });
+    requestAnimationFrame(function() {
+      triggers.forEach(function(trigger) {
+        trigger.remove();
+      })
+    });
+  });
+}
+
+startAllTransitions();
+setInterval(startAllTransitions, duration);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: transform 1000ms linear;
+  transform: rotate(360deg);
+}
+trigger + target {
+  transition: none;
+  transform: rotate(0deg);
+}
+trigger {
+  display: none;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-new-elements-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-new-elements-mainthread-transform.html
new file mode 100644
index 00000000000..ed280f9759a
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-new-elements-mainthread-transform.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+var triggers = [];
+
+for (var i = 0; i < N; i++) {
+  triggers.push(document.createElement('trigger'));
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startAllTransitions() {
+  requestAnimationFrame(function() {
+    targets.forEach(function(target, i) {
+      container.insertBefore(triggers[i], target);
+    });
+    requestAnimationFrame(function() {
+      triggers.forEach(function(trigger) {
+        trigger.remove();
+      })
+    });
+  });
+}
+
+startAllTransitions();
+setInterval(startAllTransitions, duration);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: transform 1000ms linear;
+  transform: rotate(360deg) translate(1%);
+}
+trigger + target {
+  transition: none;
+  transform: rotate(0deg) translate(0%);
+}
+trigger {
+  display: none;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-new-elements-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-new-elements-opacity.html
new file mode 100644
index 00000000000..05e97aa47b9
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-new-elements-opacity.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+var triggers = [];
+
+for (var i = 0; i < N; i++) {
+  triggers.push(document.createElement('trigger'));
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startAllTransitions() {
+  requestAnimationFrame(function() {
+    targets.forEach(function(target, i) {
+      container.insertBefore(triggers[i], target);
+    });
+    requestAnimationFrame(function() {
+      triggers.forEach(function(trigger) {
+        trigger.remove();
+      })
+    });
+  });
+}
+
+startAllTransitions();
+setInterval(startAllTransitions, duration);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: opacity 1000ms linear;
+  opacity: 0;
+}
+trigger + target {
+  transition: none;
+  opacity: 1;
+}
+trigger {
+  display: none;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-new-elements-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-new-elements-px-height.html
new file mode 100644
index 00000000000..6ce86842867
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-new-elements-px-height.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+var triggers = [];
+
+for (var i = 0; i < N; i++) {
+  triggers.push(document.createElement('trigger'));
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startAllTransitions() {
+  requestAnimationFrame(function() {
+    targets.forEach(function(target, i) {
+      container.insertBefore(triggers[i], target);
+    });
+    requestAnimationFrame(function() {
+      triggers.forEach(function(trigger) {
+        trigger.remove();
+      })
+    });
+  });
+}
+
+startAllTransitions();
+setInterval(startAllTransitions, duration);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: height 1000ms linear;
+  height: 20px;
+}
+trigger + target {
+  transition: none;
+  height: 10px;
+}
+trigger {
+  display: none;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-new-elements-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-new-elements-specific-color.html
new file mode 100644
index 00000000000..2512924bf5a
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-new-elements-specific-color.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+var triggers = [];
+
+for (var i = 0; i < N; i++) {
+  triggers.push(document.createElement('trigger'));
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startAllTransitions() {
+  requestAnimationFrame(function() {
+    targets.forEach(function(target, i) {
+      container.insertBefore(triggers[i], target);
+    });
+    requestAnimationFrame(function() {
+      triggers.forEach(function(trigger) {
+        trigger.remove();
+      })
+    });
+  });
+}
+
+startAllTransitions();
+setInterval(startAllTransitions, duration);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: background-color 1000ms linear;
+  background-color: pink;
+}
+trigger + target {
+  transition: none;
+  background-color: lime;
+}
+trigger {
+  display: none;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-style-element-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-style-element-compositor-transform.html
new file mode 100644
index 00000000000..58720ed6736
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-style-element-compositor-transform.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 500;
+var duration = 1000;
+var style = null;
+var keyframe = 1;
+var keyframeValues = ['rotate(360deg)', 'rotate(0deg)']
+
+for (var i = 0; i < N; i++) {
+  container.appendChild(document.createElement('target'));
+}
+
+function startAllAnimations() {
+  keyframe ^= 1;
+  if (style) {
+    style.remove();
+  }
+  style = document.createElement('style');
+  style.textContent = 'target { transform: ' + keyframeValues[keyframe] + '; }';
+  container.appendChild(style);
+}
+
+requestAnimationFrame(startAllAnimations);
+setInterval(startAllAnimations, duration);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: transform 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-style-element-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-style-element-mainthread-transform.html
new file mode 100644
index 00000000000..4d3d140346e
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-style-element-mainthread-transform.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 500;
+var duration = 1000;
+var style = null;
+var keyframe = 1;
+var keyframeValues = ['rotate(360deg) translate(1%)', 'rotate(0deg) translate(0%)']
+
+for (var i = 0; i < N; i++) {
+  container.appendChild(document.createElement('target'));
+}
+
+function startAllAnimations() {
+  keyframe ^= 1;
+  if (style) {
+    style.remove();
+  }
+  style = document.createElement('style');
+  style.textContent = 'target { transform: ' + keyframeValues[keyframe] + '; }';
+  container.appendChild(style);
+}
+
+requestAnimationFrame(startAllAnimations);
+setInterval(startAllAnimations, duration);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: transform 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-style-element-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-style-element-opacity.html
new file mode 100644
index 00000000000..0aa17670dff
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-style-element-opacity.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 500;
+var duration = 1000;
+var style = null;
+var keyframe = 1;
+var keyframeValues = ['0', '1']
+
+for (var i = 0; i < N; i++) {
+  container.appendChild(document.createElement('target'));
+}
+
+function startAllAnimations() {
+  keyframe ^= 1;
+  if (style) {
+    style.remove();
+  }
+  style = document.createElement('style');
+  style.textContent = 'target { opacity: ' + keyframeValues[keyframe] + '; }';
+  container.appendChild(style);
+}
+
+requestAnimationFrame(startAllAnimations);
+setInterval(startAllAnimations, duration);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: opacity 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-style-element-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-style-element-px-height.html
new file mode 100644
index 00000000000..0c5e318f127
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-style-element-px-height.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 500;
+var duration = 1000;
+var style = null;
+var keyframe = 1;
+var keyframeValues = ['20px', '10px']
+
+for (var i = 0; i < N; i++) {
+  container.appendChild(document.createElement('target'));
+}
+
+function startAllAnimations() {
+  keyframe ^= 1;
+  if (style) {
+    style.remove();
+  }
+  style = document.createElement('style');
+  style.textContent = 'target { height: ' + keyframeValues[keyframe] + '; }';
+  container.appendChild(style);
+}
+
+requestAnimationFrame(startAllAnimations);
+setInterval(startAllAnimations, duration);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: height 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-style-element-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-style-element-specific-color.html
new file mode 100644
index 00000000000..2fd12fef7b5
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-inserting-style-element-specific-color.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 500;
+var duration = 1000;
+var style = null;
+var keyframe = 1;
+var keyframeValues = ['pink', 'lime']
+
+for (var i = 0; i < N; i++) {
+  container.appendChild(document.createElement('target'));
+}
+
+function startAllAnimations() {
+  keyframe ^= 1;
+  if (style) {
+    style.remove();
+  }
+  style = document.createElement('style');
+  style.textContent = 'target { background-color: ' + keyframeValues[keyframe] + '; }';
+  container.appendChild(style);
+}
+
+requestAnimationFrame(startAllAnimations);
+setInterval(startAllAnimations, duration);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: background-color 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-class-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-class-compositor-transform.html
new file mode 100644
index 00000000000..8f75184ebb1
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-class-compositor-transform.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var keyframe = 1;
+var targets = [];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startAllAnimations() {
+  keyframe ^= 1;
+  targets.forEach(function(target) {
+    target.className = 'keyframe' + keyframe;
+  });
+}
+
+requestAnimationFrame(startAllAnimations);
+setInterval(startAllAnimations, duration);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: transform 1000ms linear;
+}
+.keyframe0 {
+  transform: rotate(360deg);
+}
+.keyframe1 {
+  transform: rotate(0deg);
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-class-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-class-mainthread-transform.html
new file mode 100644
index 00000000000..37c0f0f8362
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-class-mainthread-transform.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var keyframe = 1;
+var targets = [];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startAllAnimations() {
+  keyframe ^= 1;
+  targets.forEach(function(target) {
+    target.className = 'keyframe' + keyframe;
+  });
+}
+
+requestAnimationFrame(startAllAnimations);
+setInterval(startAllAnimations, duration);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: transform 1000ms linear;
+}
+.keyframe0 {
+  transform: rotate(360deg) translate(1%);
+}
+.keyframe1 {
+  transform: rotate(0deg) translate(0%);
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-class-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-class-opacity.html
new file mode 100644
index 00000000000..a736e721618
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-class-opacity.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var keyframe = 1;
+var targets = [];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startAllAnimations() {
+  keyframe ^= 1;
+  targets.forEach(function(target) {
+    target.className = 'keyframe' + keyframe;
+  });
+}
+
+requestAnimationFrame(startAllAnimations);
+setInterval(startAllAnimations, duration);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: opacity 1000ms linear;
+}
+.keyframe0 {
+  opacity: 0;
+}
+.keyframe1 {
+  opacity: 1;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-class-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-class-px-height.html
new file mode 100644
index 00000000000..a2372f89090
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-class-px-height.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var keyframe = 1;
+var targets = [];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startAllAnimations() {
+  keyframe ^= 1;
+  targets.forEach(function(target) {
+    target.className = 'keyframe' + keyframe;
+  });
+}
+
+requestAnimationFrame(startAllAnimations);
+setInterval(startAllAnimations, duration);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: height 1000ms linear;
+}
+.keyframe0 {
+  height: 20px;
+}
+.keyframe1 {
+  height: 10px;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-class-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-class-specific-color.html
new file mode 100644
index 00000000000..2ac299b1d4e
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-class-specific-color.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var keyframe = 1;
+var targets = [];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startAllAnimations() {
+  keyframe ^= 1;
+  targets.forEach(function(target) {
+    target.className = 'keyframe' + keyframe;
+  });
+}
+
+requestAnimationFrame(startAllAnimations);
+setInterval(startAllAnimations, duration);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: background-color 1000ms linear;
+}
+.keyframe0 {
+  background-color: pink;
+}
+.keyframe1 {
+  background-color: lime;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-inline-style-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-inline-style-compositor-transform.html
new file mode 100644
index 00000000000..cf7d130da17
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-inline-style-compositor-transform.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+var keyframe = 1;
+var keyframeValues = ['rotate(360deg)', 'rotate(0deg)']
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startAllAnimations() {
+  keyframe ^= 1;
+  targets.forEach(function(target) {
+    target.style.transform = keyframeValues[keyframe];
+  });
+}
+
+requestAnimationFrame(startAllAnimations);
+setInterval(startAllAnimations, duration);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: transform 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-inline-style-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-inline-style-mainthread-transform.html
new file mode 100644
index 00000000000..777ce994a5f
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-inline-style-mainthread-transform.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+var keyframe = 1;
+var keyframeValues = ['rotate(360deg) translate(1%)', 'rotate(0deg) translate(0%)']
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startAllAnimations() {
+  keyframe ^= 1;
+  targets.forEach(function(target) {
+    target.style.transform = keyframeValues[keyframe];
+  });
+}
+
+requestAnimationFrame(startAllAnimations);
+setInterval(startAllAnimations, duration);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: transform 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-inline-style-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-inline-style-opacity.html
new file mode 100644
index 00000000000..7d687b2be2f
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-inline-style-opacity.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+var keyframe = 1;
+var keyframeValues = ['0', '1']
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startAllAnimations() {
+  keyframe ^= 1;
+  targets.forEach(function(target) {
+    target.style.opacity = keyframeValues[keyframe];
+  });
+}
+
+requestAnimationFrame(startAllAnimations);
+setInterval(startAllAnimations, duration);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: opacity 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-inline-style-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-inline-style-px-height.html
new file mode 100644
index 00000000000..9df28eeab70
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-inline-style-px-height.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+var keyframe = 1;
+var keyframeValues = ['20px', '10px']
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startAllAnimations() {
+  keyframe ^= 1;
+  targets.forEach(function(target) {
+    target.style.height = keyframeValues[keyframe];
+  });
+}
+
+requestAnimationFrame(startAllAnimations);
+setInterval(startAllAnimations, duration);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: height 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-inline-style-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-inline-style-specific-color.html
new file mode 100644
index 00000000000..48ec7c9cb11
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-simultaneous-by-updating-inline-style-specific-color.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+var keyframe = 1;
+var keyframeValues = ['pink', 'lime']
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startAllAnimations() {
+  keyframe ^= 1;
+  targets.forEach(function(target) {
+    target.style.backgroundColor = keyframeValues[keyframe];
+  });
+}
+
+requestAnimationFrame(startAllAnimations);
+setInterval(startAllAnimations, duration);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: background-color 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-new-element-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-new-element-compositor-transform.html
new file mode 100644
index 00000000000..efecdc0cc30
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-new-element-compositor-transform.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var keyframeValues = ['rotate(360deg)', 'rotate(0deg)'];
+var keyframeStash = [[], []];
+var targets = [];
+
+for (var i = 0; i < N; i++) {
+  keyframeStash[0].push(document.createElement('keyframe0'));
+  keyframeStash[1].push(document.createElement('keyframe1'));
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  target.style.transitionDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+  target.addEventListener('transitionend', restartTransition);
+  targets.push(target);
+}
+
+function restartTransition(event) {
+  var target = event.target;
+  target.style.removeProperty('transition-delay');
+  keyframeStash[target._keyframe].push(target.previousSibling);
+  target.previousSibling.remove();
+  target._keyframe ^= 1;
+  container.insertBefore(keyframeStash[target._keyframe].pop(), target);
+}
+
+var measurementReady = false;
+requestAnimationFrame(function() {
+  requestAnimationFrame(function() {
+    targets.forEach(function(target) {
+      container.insertBefore(keyframeStash[0].pop(), target);
+    });
+    measurementReady = true;
+  });
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: transform 1000ms linear;
+}
+keyframe0 + target {
+  transform: rotate(360deg);
+}
+keyframe1 + target {
+  transform: rotate(0deg);
+}
+keyframe0, keyframe1 {
+  display: none;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-new-element-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-new-element-mainthread-transform.html
new file mode 100644
index 00000000000..2651d9eb201
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-new-element-mainthread-transform.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var keyframeValues = ['rotate(360deg) translate(1%)', 'rotate(0deg) translate(0%)'];
+var keyframeStash = [[], []];
+var targets = [];
+
+for (var i = 0; i < N; i++) {
+  keyframeStash[0].push(document.createElement('keyframe0'));
+  keyframeStash[1].push(document.createElement('keyframe1'));
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  target.style.transitionDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+  target.addEventListener('transitionend', restartTransition);
+  targets.push(target);
+}
+
+function restartTransition(event) {
+  var target = event.target;
+  target.style.removeProperty('transition-delay');
+  keyframeStash[target._keyframe].push(target.previousSibling);
+  target.previousSibling.remove();
+  target._keyframe ^= 1;
+  container.insertBefore(keyframeStash[target._keyframe].pop(), target);
+}
+
+var measurementReady = false;
+requestAnimationFrame(function() {
+  requestAnimationFrame(function() {
+    targets.forEach(function(target) {
+      container.insertBefore(keyframeStash[0].pop(), target);
+    });
+    measurementReady = true;
+  });
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: transform 1000ms linear;
+}
+keyframe0 + target {
+  transform: rotate(360deg) translate(1%);
+}
+keyframe1 + target {
+  transform: rotate(0deg) translate(0%);
+}
+keyframe0, keyframe1 {
+  display: none;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-new-element-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-new-element-opacity.html
new file mode 100644
index 00000000000..284b7de1270
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-new-element-opacity.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var keyframeValues = ['0', '1'];
+var keyframeStash = [[], []];
+var targets = [];
+
+for (var i = 0; i < N; i++) {
+  keyframeStash[0].push(document.createElement('keyframe0'));
+  keyframeStash[1].push(document.createElement('keyframe1'));
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  target.style.transitionDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+  target.addEventListener('transitionend', restartTransition);
+  targets.push(target);
+}
+
+function restartTransition(event) {
+  var target = event.target;
+  target.style.removeProperty('transition-delay');
+  keyframeStash[target._keyframe].push(target.previousSibling);
+  target.previousSibling.remove();
+  target._keyframe ^= 1;
+  container.insertBefore(keyframeStash[target._keyframe].pop(), target);
+}
+
+var measurementReady = false;
+requestAnimationFrame(function() {
+  requestAnimationFrame(function() {
+    targets.forEach(function(target) {
+      container.insertBefore(keyframeStash[0].pop(), target);
+    });
+    measurementReady = true;
+  });
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: opacity 1000ms linear;
+}
+keyframe0 + target {
+  opacity: 0;
+}
+keyframe1 + target {
+  opacity: 1;
+}
+keyframe0, keyframe1 {
+  display: none;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-new-element-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-new-element-px-height.html
new file mode 100644
index 00000000000..34cbc5cf803
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-new-element-px-height.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var keyframeValues = ['20px', '10px'];
+var keyframeStash = [[], []];
+var targets = [];
+
+for (var i = 0; i < N; i++) {
+  keyframeStash[0].push(document.createElement('keyframe0'));
+  keyframeStash[1].push(document.createElement('keyframe1'));
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  target.style.transitionDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+  target.addEventListener('transitionend', restartTransition);
+  targets.push(target);
+}
+
+function restartTransition(event) {
+  var target = event.target;
+  target.style.removeProperty('transition-delay');
+  keyframeStash[target._keyframe].push(target.previousSibling);
+  target.previousSibling.remove();
+  target._keyframe ^= 1;
+  container.insertBefore(keyframeStash[target._keyframe].pop(), target);
+}
+
+var measurementReady = false;
+requestAnimationFrame(function() {
+  requestAnimationFrame(function() {
+    targets.forEach(function(target) {
+      container.insertBefore(keyframeStash[0].pop(), target);
+    });
+    measurementReady = true;
+  });
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: height 1000ms linear;
+}
+keyframe0 + target {
+  height: 20px;
+}
+keyframe1 + target {
+  height: 10px;
+}
+keyframe0, keyframe1 {
+  display: none;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-new-element-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-new-element-specific-color.html
new file mode 100644
index 00000000000..5a34a403fec
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-new-element-specific-color.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var keyframeValues = ['pink', 'lime'];
+var keyframeStash = [[], []];
+var targets = [];
+
+for (var i = 0; i < N; i++) {
+  keyframeStash[0].push(document.createElement('keyframe0'));
+  keyframeStash[1].push(document.createElement('keyframe1'));
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  target.style.transitionDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+  target.addEventListener('transitionend', restartTransition);
+  targets.push(target);
+}
+
+function restartTransition(event) {
+  var target = event.target;
+  target.style.removeProperty('transition-delay');
+  keyframeStash[target._keyframe].push(target.previousSibling);
+  target.previousSibling.remove();
+  target._keyframe ^= 1;
+  container.insertBefore(keyframeStash[target._keyframe].pop(), target);
+}
+
+var measurementReady = false;
+requestAnimationFrame(function() {
+  requestAnimationFrame(function() {
+    targets.forEach(function(target) {
+      container.insertBefore(keyframeStash[0].pop(), target);
+    });
+    measurementReady = true;
+  });
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: background-color 1000ms linear;
+}
+keyframe0 + target {
+  background-color: pink;
+}
+keyframe1 + target {
+  background-color: lime;
+}
+keyframe0, keyframe1 {
+  display: none;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-style-element-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-style-element-compositor-transform.html
new file mode 100644
index 00000000000..14d1d7c16ae
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-style-element-compositor-transform.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 500;
+var duration = 1000;
+var keyframeValues = ['rotate(360deg)', 'rotate(0deg)'];
+var id = 0;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  target.style.transitionDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+  target.addEventListener('transitionend', restartTransition);
+}
+
+function restartTransition(event) {
+  event.target._keyframe ^= 1;
+  addNewIDStyle(event.target);
+  event.target.style.removeProperty('transition-delay');
+}
+
+function addNewIDStyle(target) {
+  id++;
+  if (target._currentIDStyle) {
+    target._currentIDStyle.remove();
+  }
+  var style = document.createElement('style');
+  style.textContent = '#id' + id + ' { transform: ' + keyframeValues[target._keyframe] + ';}';
+  container.appendChild(style);
+  target.id = 'id' + id;
+  target._currentIDStyle = style;
+}
+
+var measurementReady = false;
+requestAnimationFrame(function() {
+  var styleRule = document.styleSheets[0].rules[2].style;
+  styleRule.transform = keyframeValues[1];
+  requestAnimationFrame(function() {
+    styleRule.transform = keyframeValues[0];
+    measurementReady = true;
+  });
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: transform 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-style-element-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-style-element-mainthread-transform.html
new file mode 100644
index 00000000000..3de2977751b
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-style-element-mainthread-transform.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 500;
+var duration = 1000;
+var keyframeValues = ['rotate(360deg) translate(1%)', 'rotate(0deg) translate(0%)'];
+var id = 0;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  target.style.transitionDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+  target.addEventListener('transitionend', restartTransition);
+}
+
+function restartTransition(event) {
+  event.target._keyframe ^= 1;
+  addNewIDStyle(event.target);
+  event.target.style.removeProperty('transition-delay');
+}
+
+function addNewIDStyle(target) {
+  id++;
+  if (target._currentIDStyle) {
+    target._currentIDStyle.remove();
+  }
+  var style = document.createElement('style');
+  style.textContent = '#id' + id + ' { transform: ' + keyframeValues[target._keyframe] + ';}';
+  container.appendChild(style);
+  target.id = 'id' + id;
+  target._currentIDStyle = style;
+}
+
+var measurementReady = false;
+requestAnimationFrame(function() {
+  var styleRule = document.styleSheets[0].rules[2].style;
+  styleRule.transform = keyframeValues[1];
+  requestAnimationFrame(function() {
+    styleRule.transform = keyframeValues[0];
+    measurementReady = true;
+  });
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: transform 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-style-element-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-style-element-opacity.html
new file mode 100644
index 00000000000..f61572d56ac
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-style-element-opacity.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 500;
+var duration = 1000;
+var keyframeValues = ['0', '1'];
+var id = 0;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  target.style.transitionDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+  target.addEventListener('transitionend', restartTransition);
+}
+
+function restartTransition(event) {
+  event.target._keyframe ^= 1;
+  addNewIDStyle(event.target);
+  event.target.style.removeProperty('transition-delay');
+}
+
+function addNewIDStyle(target) {
+  id++;
+  if (target._currentIDStyle) {
+    target._currentIDStyle.remove();
+  }
+  var style = document.createElement('style');
+  style.textContent = '#id' + id + ' { opacity: ' + keyframeValues[target._keyframe] + ';}';
+  container.appendChild(style);
+  target.id = 'id' + id;
+  target._currentIDStyle = style;
+}
+
+var measurementReady = false;
+requestAnimationFrame(function() {
+  var styleRule = document.styleSheets[0].rules[2].style;
+  styleRule.opacity = keyframeValues[1];
+  requestAnimationFrame(function() {
+    styleRule.opacity = keyframeValues[0];
+    measurementReady = true;
+  });
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: opacity 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-style-element-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-style-element-px-height.html
new file mode 100644
index 00000000000..8c80e28f4b3
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-style-element-px-height.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 500;
+var duration = 1000;
+var keyframeValues = ['20px', '10px'];
+var id = 0;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  target.style.transitionDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+  target.addEventListener('transitionend', restartTransition);
+}
+
+function restartTransition(event) {
+  event.target._keyframe ^= 1;
+  addNewIDStyle(event.target);
+  event.target.style.removeProperty('transition-delay');
+}
+
+function addNewIDStyle(target) {
+  id++;
+  if (target._currentIDStyle) {
+    target._currentIDStyle.remove();
+  }
+  var style = document.createElement('style');
+  style.textContent = '#id' + id + ' { height: ' + keyframeValues[target._keyframe] + ';}';
+  container.appendChild(style);
+  target.id = 'id' + id;
+  target._currentIDStyle = style;
+}
+
+var measurementReady = false;
+requestAnimationFrame(function() {
+  var styleRule = document.styleSheets[0].rules[2].style;
+  styleRule.height = keyframeValues[1];
+  requestAnimationFrame(function() {
+    styleRule.height = keyframeValues[0];
+    measurementReady = true;
+  });
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: height 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-style-element-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-style-element-specific-color.html
new file mode 100644
index 00000000000..da75d03b14b
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-inserting-style-element-specific-color.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 500;
+var duration = 1000;
+var keyframeValues = ['pink', 'lime'];
+var id = 0;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  target.style.transitionDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+  target.addEventListener('transitionend', restartTransition);
+}
+
+function restartTransition(event) {
+  event.target._keyframe ^= 1;
+  addNewIDStyle(event.target);
+  event.target.style.removeProperty('transition-delay');
+}
+
+function addNewIDStyle(target) {
+  id++;
+  if (target._currentIDStyle) {
+    target._currentIDStyle.remove();
+  }
+  var style = document.createElement('style');
+  style.textContent = '#id' + id + ' { background-color: ' + keyframeValues[target._keyframe] + ';}';
+  container.appendChild(style);
+  target.id = 'id' + id;
+  target._currentIDStyle = style;
+}
+
+var measurementReady = false;
+requestAnimationFrame(function() {
+  var styleRule = document.styleSheets[0].rules[2].style;
+  styleRule.backgroundColor = keyframeValues[1];
+  requestAnimationFrame(function() {
+    styleRule.backgroundColor = keyframeValues[0];
+    measurementReady = true;
+  });
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: background-color 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-class-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-class-compositor-transform.html
new file mode 100644
index 00000000000..6296c83e681
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-class-compositor-transform.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var keyframeValues = ['rotate(360deg)', 'rotate(0deg)'];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  target.style.transitionDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+  target.addEventListener('transitionend', restartTransition);
+}
+
+function restartTransition(event) {
+  event.target._keyframe ^= 1;
+  event.target.className = 'keyframe' + event.target._keyframe;
+  event.target.style.removeProperty('transition-delay');
+}
+
+var measurementReady = false;
+requestAnimationFrame(function() {
+  var styleRule = document.styleSheets[0].rules[2].style;
+  styleRule.transform = keyframeValues[1];
+  requestAnimationFrame(function() {
+    styleRule.transform = keyframeValues[0];
+    measurementReady = true;
+  });
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: transform 1000ms linear;
+}
+.keyframe0 {
+  transform: rotate(360deg);
+}
+.keyframe1 {
+  transform: rotate(0deg);
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-class-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-class-mainthread-transform.html
new file mode 100644
index 00000000000..c6a42911db4
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-class-mainthread-transform.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var keyframeValues = ['rotate(360deg) translate(1%)', 'rotate(0deg) translate(0%)'];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  target.style.transitionDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+  target.addEventListener('transitionend', restartTransition);
+}
+
+function restartTransition(event) {
+  event.target._keyframe ^= 1;
+  event.target.className = 'keyframe' + event.target._keyframe;
+  event.target.style.removeProperty('transition-delay');
+}
+
+var measurementReady = false;
+requestAnimationFrame(function() {
+  var styleRule = document.styleSheets[0].rules[2].style;
+  styleRule.transform = keyframeValues[1];
+  requestAnimationFrame(function() {
+    styleRule.transform = keyframeValues[0];
+    measurementReady = true;
+  });
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: transform 1000ms linear;
+}
+.keyframe0 {
+  transform: rotate(360deg) translate(1%);
+}
+.keyframe1 {
+  transform: rotate(0deg) translate(0%);
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-class-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-class-opacity.html
new file mode 100644
index 00000000000..ad76d4d142e
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-class-opacity.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var keyframeValues = ['0', '1'];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  target.style.transitionDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+  target.addEventListener('transitionend', restartTransition);
+}
+
+function restartTransition(event) {
+  event.target._keyframe ^= 1;
+  event.target.className = 'keyframe' + event.target._keyframe;
+  event.target.style.removeProperty('transition-delay');
+}
+
+var measurementReady = false;
+requestAnimationFrame(function() {
+  var styleRule = document.styleSheets[0].rules[2].style;
+  styleRule.opacity = keyframeValues[1];
+  requestAnimationFrame(function() {
+    styleRule.opacity = keyframeValues[0];
+    measurementReady = true;
+  });
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: opacity 1000ms linear;
+}
+.keyframe0 {
+  opacity: 0;
+}
+.keyframe1 {
+  opacity: 1;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-class-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-class-px-height.html
new file mode 100644
index 00000000000..264617b5237
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-class-px-height.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var keyframeValues = ['20px', '10px'];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  target.style.transitionDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+  target.addEventListener('transitionend', restartTransition);
+}
+
+function restartTransition(event) {
+  event.target._keyframe ^= 1;
+  event.target.className = 'keyframe' + event.target._keyframe;
+  event.target.style.removeProperty('transition-delay');
+}
+
+var measurementReady = false;
+requestAnimationFrame(function() {
+  var styleRule = document.styleSheets[0].rules[2].style;
+  styleRule.height = keyframeValues[1];
+  requestAnimationFrame(function() {
+    styleRule.height = keyframeValues[0];
+    measurementReady = true;
+  });
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: height 1000ms linear;
+}
+.keyframe0 {
+  height: 20px;
+}
+.keyframe1 {
+  height: 10px;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-class-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-class-specific-color.html
new file mode 100644
index 00000000000..04b94a6fe0a
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-class-specific-color.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var keyframeValues = ['pink', 'lime'];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  target.style.transitionDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+  target.addEventListener('transitionend', restartTransition);
+}
+
+function restartTransition(event) {
+  event.target._keyframe ^= 1;
+  event.target.className = 'keyframe' + event.target._keyframe;
+  event.target.style.removeProperty('transition-delay');
+}
+
+var measurementReady = false;
+requestAnimationFrame(function() {
+  var styleRule = document.styleSheets[0].rules[2].style;
+  styleRule.backgroundColor = keyframeValues[1];
+  requestAnimationFrame(function() {
+    styleRule.backgroundColor = keyframeValues[0];
+    measurementReady = true;
+  });
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: background-color 1000ms linear;
+}
+.keyframe0 {
+  background-color: pink;
+}
+.keyframe1 {
+  background-color: lime;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-inline-style-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-inline-style-compositor-transform.html
new file mode 100644
index 00000000000..e3266ce218a
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-inline-style-compositor-transform.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var keyframeValues = ['rotate(360deg)', 'rotate(0deg)'];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  target.style.transitionDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+  target.addEventListener('transitionend', restartTransition);
+}
+
+function restartTransition(event) {
+  event.target._keyframe ^= 1;
+  event.target.style.transform = keyframeValues[event.target._keyframe];
+  event.target.style.removeProperty('transition-delay');
+}
+
+var measurementReady = false;
+requestAnimationFrame(function() {
+  var styleRule = document.styleSheets[0].rules[2].style;
+  styleRule.transform = keyframeValues[1];
+  requestAnimationFrame(function() {
+    styleRule.transform = keyframeValues[0];
+    measurementReady = true;
+  });
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: transform 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-inline-style-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-inline-style-mainthread-transform.html
new file mode 100644
index 00000000000..a050af6b80b
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-inline-style-mainthread-transform.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var keyframeValues = ['rotate(360deg) translate(1%)', 'rotate(0deg) translate(0%)'];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  target.style.transitionDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+  target.addEventListener('transitionend', restartTransition);
+}
+
+function restartTransition(event) {
+  event.target._keyframe ^= 1;
+  event.target.style.transform = keyframeValues[event.target._keyframe];
+  event.target.style.removeProperty('transition-delay');
+}
+
+var measurementReady = false;
+requestAnimationFrame(function() {
+  var styleRule = document.styleSheets[0].rules[2].style;
+  styleRule.transform = keyframeValues[1];
+  requestAnimationFrame(function() {
+    styleRule.transform = keyframeValues[0];
+    measurementReady = true;
+  });
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: transform 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-inline-style-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-inline-style-opacity.html
new file mode 100644
index 00000000000..f5a75655dcd
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-inline-style-opacity.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var keyframeValues = ['0', '1'];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  target.style.transitionDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+  target.addEventListener('transitionend', restartTransition);
+}
+
+function restartTransition(event) {
+  event.target._keyframe ^= 1;
+  event.target.style.opacity = keyframeValues[event.target._keyframe];
+  event.target.style.removeProperty('transition-delay');
+}
+
+var measurementReady = false;
+requestAnimationFrame(function() {
+  var styleRule = document.styleSheets[0].rules[2].style;
+  styleRule.opacity = keyframeValues[1];
+  requestAnimationFrame(function() {
+    styleRule.opacity = keyframeValues[0];
+    measurementReady = true;
+  });
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: opacity 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-inline-style-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-inline-style-px-height.html
new file mode 100644
index 00000000000..86708848748
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-inline-style-px-height.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var keyframeValues = ['20px', '10px'];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  target.style.transitionDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+  target.addEventListener('transitionend', restartTransition);
+}
+
+function restartTransition(event) {
+  event.target._keyframe ^= 1;
+  event.target.style.height = keyframeValues[event.target._keyframe];
+  event.target.style.removeProperty('transition-delay');
+}
+
+var measurementReady = false;
+requestAnimationFrame(function() {
+  var styleRule = document.styleSheets[0].rules[2].style;
+  styleRule.height = keyframeValues[1];
+  requestAnimationFrame(function() {
+    styleRule.height = keyframeValues[0];
+    measurementReady = true;
+  });
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: height 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-inline-style-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-inline-style-specific-color.html
new file mode 100644
index 00000000000..4d8a5018bfd
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-chaining-by-updating-inline-style-specific-color.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var keyframeValues = ['pink', 'lime'];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  target.style.transitionDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+  target.addEventListener('transitionend', restartTransition);
+}
+
+function restartTransition(event) {
+  event.target._keyframe ^= 1;
+  event.target.style.backgroundColor = keyframeValues[event.target._keyframe];
+  event.target.style.removeProperty('transition-delay');
+}
+
+var measurementReady = false;
+requestAnimationFrame(function() {
+  var styleRule = document.styleSheets[0].rules[2].style;
+  styleRule.backgroundColor = keyframeValues[1];
+  requestAnimationFrame(function() {
+    styleRule.backgroundColor = keyframeValues[0];
+    measurementReady = true;
+  });
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: background-color 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-new-element-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-new-element-compositor-transform.html
new file mode 100644
index 00000000000..ea43a55c92e
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-new-element-compositor-transform.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var stash = {SHOW: [], HIDE: []};
+var targets = [];
+
+for (var i = 0; i < N; i++) {
+  stash.HIDE.push(document.createElement('hide'));
+  var show = document.createElement('show');
+  container.appendChild(show);
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startTransition(target, fastForward) {
+  var state = target.previousSibling;
+  stash[state.tagName].push(state);
+  state.remove();
+  var newState = state.tagName == 'SHOW' ? stash.HIDE.pop() : stash.SHOW.pop();
+  container.insertBefore(newState, target);
+  target.style.transitionDelay = -fastForward + 'ms';
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var step = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    step = Math.max(targetStep - N, step);
+    for (; step < targetStep; step++) {
+      startTransition(targets[step % N], elapsed - (step / N * duration));
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: transform 1000ms linear;
+}
+show + target {
+  transform: rotate(0deg);
+}
+hide + target {
+  transform: rotate(360deg);
+}
+show, hide {
+  display: none;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-new-element-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-new-element-mainthread-transform.html
new file mode 100644
index 00000000000..dd2d213e378
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-new-element-mainthread-transform.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var stash = {SHOW: [], HIDE: []};
+var targets = [];
+
+for (var i = 0; i < N; i++) {
+  stash.HIDE.push(document.createElement('hide'));
+  var show = document.createElement('show');
+  container.appendChild(show);
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startTransition(target, fastForward) {
+  var state = target.previousSibling;
+  stash[state.tagName].push(state);
+  state.remove();
+  var newState = state.tagName == 'SHOW' ? stash.HIDE.pop() : stash.SHOW.pop();
+  container.insertBefore(newState, target);
+  target.style.transitionDelay = -fastForward + 'ms';
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var step = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    step = Math.max(targetStep - N, step);
+    for (; step < targetStep; step++) {
+      startTransition(targets[step % N], elapsed - (step / N * duration));
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: transform 1000ms linear;
+}
+show + target {
+  transform: rotate(0deg) translate(0%);
+}
+hide + target {
+  transform: rotate(360deg) translate(1%);
+}
+show, hide {
+  display: none;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-new-element-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-new-element-opacity.html
new file mode 100644
index 00000000000..02b818ed195
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-new-element-opacity.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var stash = {SHOW: [], HIDE: []};
+var targets = [];
+
+for (var i = 0; i < N; i++) {
+  stash.HIDE.push(document.createElement('hide'));
+  var show = document.createElement('show');
+  container.appendChild(show);
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startTransition(target, fastForward) {
+  var state = target.previousSibling;
+  stash[state.tagName].push(state);
+  state.remove();
+  var newState = state.tagName == 'SHOW' ? stash.HIDE.pop() : stash.SHOW.pop();
+  container.insertBefore(newState, target);
+  target.style.transitionDelay = -fastForward + 'ms';
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var step = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    step = Math.max(targetStep - N, step);
+    for (; step < targetStep; step++) {
+      startTransition(targets[step % N], elapsed - (step / N * duration));
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: opacity 1000ms linear;
+}
+show + target {
+  opacity: 1;
+}
+hide + target {
+  opacity: 0;
+}
+show, hide {
+  display: none;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-new-element-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-new-element-px-height.html
new file mode 100644
index 00000000000..634da722c49
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-new-element-px-height.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var stash = {SHOW: [], HIDE: []};
+var targets = [];
+
+for (var i = 0; i < N; i++) {
+  stash.HIDE.push(document.createElement('hide'));
+  var show = document.createElement('show');
+  container.appendChild(show);
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startTransition(target, fastForward) {
+  var state = target.previousSibling;
+  stash[state.tagName].push(state);
+  state.remove();
+  var newState = state.tagName == 'SHOW' ? stash.HIDE.pop() : stash.SHOW.pop();
+  container.insertBefore(newState, target);
+  target.style.transitionDelay = -fastForward + 'ms';
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var step = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    step = Math.max(targetStep - N, step);
+    for (; step < targetStep; step++) {
+      startTransition(targets[step % N], elapsed - (step / N * duration));
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: height 1000ms linear;
+}
+show + target {
+  height: 10px;
+}
+hide + target {
+  height: 20px;
+}
+show, hide {
+  display: none;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-new-element-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-new-element-specific-color.html
new file mode 100644
index 00000000000..37a7b042995
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-new-element-specific-color.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var stash = {SHOW: [], HIDE: []};
+var targets = [];
+
+for (var i = 0; i < N; i++) {
+  stash.HIDE.push(document.createElement('hide'));
+  var show = document.createElement('show');
+  container.appendChild(show);
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startTransition(target, fastForward) {
+  var state = target.previousSibling;
+  stash[state.tagName].push(state);
+  state.remove();
+  var newState = state.tagName == 'SHOW' ? stash.HIDE.pop() : stash.SHOW.pop();
+  container.insertBefore(newState, target);
+  target.style.transitionDelay = -fastForward + 'ms';
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var step = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    step = Math.max(targetStep - N, step);
+    for (; step < targetStep; step++) {
+      startTransition(targets[step % N], elapsed - (step / N * duration));
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: background-color 1000ms linear;
+}
+show + target {
+  background-color: lime;
+}
+hide + target {
+  background-color: pink;
+}
+show, hide {
+  display: none;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-style-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-style-compositor-transform.html
new file mode 100644
index 00000000000..134b223cc00
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-style-compositor-transform.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+var styles = [];
+var keyframeValues = ['rotate(360deg)', 'rotate(0deg)'];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function addNewClassStyle(step) {
+  // Clean up overwritten styles.
+  var i = 0;
+  for (; i < styles.length && styles[i].lastStep < step; i++) {
+    styles[i].style.remove();
+  }
+  styles.splice(0, i);
+
+  var style = document.createElement('style');
+  var className = 'style' + step + 'keyframe';
+  style.textContent = '.' + className + '0 { transform: ' + keyframeValues[0] + '; }\n';
+  style.textContent += '.' + className + '1 { transform: ' + keyframeValues[1] + '; }\n';
+  container.appendChild(style);
+  styles.push({
+    style: style,
+    lastStep: step + N,
+  });
+
+  return className;
+}
+
+function startTransitions(startingTargets, startStep, endStep) {
+  var newClassName = addNewClassStyle(startStep, endStep);
+  startingTargets.forEach(function(startInfo) {
+    startInfo.target._keyframe ^= 1;
+    startInfo.target.className = newClassName + startInfo.target._keyframe;
+    startInfo.target.style.transitionDelay = -startInfo.fastForward + 'ms';
+  });
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var previousStep = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    var restartingTargets = [];
+    for (var step = Math.max(targetStep - N, previousStep); step < targetStep; step++) {
+      var stepStartTime = step / N * duration;
+      restartingTargets.push({
+        target: targets[step % N], 
+        fastForward: elapsed - stepStartTime,
+      });
+    }
+    startTransitions(restartingTargets, targetStep);
+    previousStep = targetStep;
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: transform 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-style-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-style-mainthread-transform.html
new file mode 100644
index 00000000000..1ff9cd399a0
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-style-mainthread-transform.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+var styles = [];
+var keyframeValues = ['rotate(360deg) translate(1%)', 'rotate(0deg) translate(0%)'];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function addNewClassStyle(step) {
+  // Clean up overwritten styles.
+  var i = 0;
+  for (; i < styles.length && styles[i].lastStep < step; i++) {
+    styles[i].style.remove();
+  }
+  styles.splice(0, i);
+
+  var style = document.createElement('style');
+  var className = 'style' + step + 'keyframe';
+  style.textContent = '.' + className + '0 { transform: ' + keyframeValues[0] + '; }\n';
+  style.textContent += '.' + className + '1 { transform: ' + keyframeValues[1] + '; }\n';
+  container.appendChild(style);
+  styles.push({
+    style: style,
+    lastStep: step + N,
+  });
+
+  return className;
+}
+
+function startTransitions(startingTargets, startStep, endStep) {
+  var newClassName = addNewClassStyle(startStep, endStep);
+  startingTargets.forEach(function(startInfo) {
+    startInfo.target._keyframe ^= 1;
+    startInfo.target.className = newClassName + startInfo.target._keyframe;
+    startInfo.target.style.transitionDelay = -startInfo.fastForward + 'ms';
+  });
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var previousStep = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    var restartingTargets = [];
+    for (var step = Math.max(targetStep - N, previousStep); step < targetStep; step++) {
+      var stepStartTime = step / N * duration;
+      restartingTargets.push({
+        target: targets[step % N], 
+        fastForward: elapsed - stepStartTime,
+      });
+    }
+    startTransitions(restartingTargets, targetStep);
+    previousStep = targetStep;
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: transform 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-style-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-style-opacity.html
new file mode 100644
index 00000000000..2a524967451
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-style-opacity.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+var styles = [];
+var keyframeValues = ['0', '1'];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function addNewClassStyle(step) {
+  // Clean up overwritten styles.
+  var i = 0;
+  for (; i < styles.length && styles[i].lastStep < step; i++) {
+    styles[i].style.remove();
+  }
+  styles.splice(0, i);
+
+  var style = document.createElement('style');
+  var className = 'style' + step + 'keyframe';
+  style.textContent = '.' + className + '0 { opacity: ' + keyframeValues[0] + '; }\n';
+  style.textContent += '.' + className + '1 { opacity: ' + keyframeValues[1] + '; }\n';
+  container.appendChild(style);
+  styles.push({
+    style: style,
+    lastStep: step + N,
+  });
+
+  return className;
+}
+
+function startTransitions(startingTargets, startStep, endStep) {
+  var newClassName = addNewClassStyle(startStep, endStep);
+  startingTargets.forEach(function(startInfo) {
+    startInfo.target._keyframe ^= 1;
+    startInfo.target.className = newClassName + startInfo.target._keyframe;
+    startInfo.target.style.transitionDelay = -startInfo.fastForward + 'ms';
+  });
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var previousStep = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    var restartingTargets = [];
+    for (var step = Math.max(targetStep - N, previousStep); step < targetStep; step++) {
+      var stepStartTime = step / N * duration;
+      restartingTargets.push({
+        target: targets[step % N], 
+        fastForward: elapsed - stepStartTime,
+      });
+    }
+    startTransitions(restartingTargets, targetStep);
+    previousStep = targetStep;
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: opacity 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-style-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-style-px-height.html
new file mode 100644
index 00000000000..45b3fb5a83b
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-style-px-height.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+var styles = [];
+var keyframeValues = ['20px', '10px'];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function addNewClassStyle(step) {
+  // Clean up overwritten styles.
+  var i = 0;
+  for (; i < styles.length && styles[i].lastStep < step; i++) {
+    styles[i].style.remove();
+  }
+  styles.splice(0, i);
+
+  var style = document.createElement('style');
+  var className = 'style' + step + 'keyframe';
+  style.textContent = '.' + className + '0 { height: ' + keyframeValues[0] + '; }\n';
+  style.textContent += '.' + className + '1 { height: ' + keyframeValues[1] + '; }\n';
+  container.appendChild(style);
+  styles.push({
+    style: style,
+    lastStep: step + N,
+  });
+
+  return className;
+}
+
+function startTransitions(startingTargets, startStep, endStep) {
+  var newClassName = addNewClassStyle(startStep, endStep);
+  startingTargets.forEach(function(startInfo) {
+    startInfo.target._keyframe ^= 1;
+    startInfo.target.className = newClassName + startInfo.target._keyframe;
+    startInfo.target.style.transitionDelay = -startInfo.fastForward + 'ms';
+  });
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var previousStep = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    var restartingTargets = [];
+    for (var step = Math.max(targetStep - N, previousStep); step < targetStep; step++) {
+      var stepStartTime = step / N * duration;
+      restartingTargets.push({
+        target: targets[step % N], 
+        fastForward: elapsed - stepStartTime,
+      });
+    }
+    startTransitions(restartingTargets, targetStep);
+    previousStep = targetStep;
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: height 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-style-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-style-specific-color.html
new file mode 100644
index 00000000000..c48e3372ccc
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-inserting-style-specific-color.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+var styles = [];
+var keyframeValues = ['pink', 'lime'];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function addNewClassStyle(step) {
+  // Clean up overwritten styles.
+  var i = 0;
+  for (; i < styles.length && styles[i].lastStep < step; i++) {
+    styles[i].style.remove();
+  }
+  styles.splice(0, i);
+
+  var style = document.createElement('style');
+  var className = 'style' + step + 'keyframe';
+  style.textContent = '.' + className + '0 { background-color: ' + keyframeValues[0] + '; }\n';
+  style.textContent += '.' + className + '1 { background-color: ' + keyframeValues[1] + '; }\n';
+  container.appendChild(style);
+  styles.push({
+    style: style,
+    lastStep: step + N,
+  });
+
+  return className;
+}
+
+function startTransitions(startingTargets, startStep, endStep) {
+  var newClassName = addNewClassStyle(startStep, endStep);
+  startingTargets.forEach(function(startInfo) {
+    startInfo.target._keyframe ^= 1;
+    startInfo.target.className = newClassName + startInfo.target._keyframe;
+    startInfo.target.style.transitionDelay = -startInfo.fastForward + 'ms';
+  });
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var previousStep = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    var restartingTargets = [];
+    for (var step = Math.max(targetStep - N, previousStep); step < targetStep; step++) {
+      var stepStartTime = step / N * duration;
+      restartingTargets.push({
+        target: targets[step % N], 
+        fastForward: elapsed - stepStartTime,
+      });
+    }
+    startTransitions(restartingTargets, targetStep);
+    previousStep = targetStep;
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: background-color 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-class-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-class-compositor-transform.html
new file mode 100644
index 00000000000..f0056441e4d
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-class-compositor-transform.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 1;
+  target.className = 'keyframe' + target._keyframe;
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startTransition(target, fastForward) {
+  target._keyframe ^= 1;
+  target.className = 'keyframe' + target._keyframe;
+  target.style.transitionDelay = -fastForward + 'ms';
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var step = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    step = Math.max(targetStep - N, step);
+    for (; step < targetStep; step++) {
+      startTransition(targets[step % N], elapsed - (step / N * duration));
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: transform 1000ms linear;
+}
+.keyframe0 {
+  transform: rotate(360deg);
+}
+.keyframe1 {
+  transform: rotate(0deg);
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-class-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-class-mainthread-transform.html
new file mode 100644
index 00000000000..dadcd105fdb
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-class-mainthread-transform.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 1;
+  target.className = 'keyframe' + target._keyframe;
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startTransition(target, fastForward) {
+  target._keyframe ^= 1;
+  target.className = 'keyframe' + target._keyframe;
+  target.style.transitionDelay = -fastForward + 'ms';
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var step = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    step = Math.max(targetStep - N, step);
+    for (; step < targetStep; step++) {
+      startTransition(targets[step % N], elapsed - (step / N * duration));
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: transform 1000ms linear;
+}
+.keyframe0 {
+  transform: rotate(360deg) translate(1%);
+}
+.keyframe1 {
+  transform: rotate(0deg) translate(0%);
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-class-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-class-opacity.html
new file mode 100644
index 00000000000..1cbc4dd5932
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-class-opacity.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 1;
+  target.className = 'keyframe' + target._keyframe;
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startTransition(target, fastForward) {
+  target._keyframe ^= 1;
+  target.className = 'keyframe' + target._keyframe;
+  target.style.transitionDelay = -fastForward + 'ms';
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var step = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    step = Math.max(targetStep - N, step);
+    for (; step < targetStep; step++) {
+      startTransition(targets[step % N], elapsed - (step / N * duration));
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: opacity 1000ms linear;
+}
+.keyframe0 {
+  opacity: 0;
+}
+.keyframe1 {
+  opacity: 1;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-class-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-class-px-height.html
new file mode 100644
index 00000000000..51a7466d39a
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-class-px-height.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 1;
+  target.className = 'keyframe' + target._keyframe;
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startTransition(target, fastForward) {
+  target._keyframe ^= 1;
+  target.className = 'keyframe' + target._keyframe;
+  target.style.transitionDelay = -fastForward + 'ms';
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var step = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    step = Math.max(targetStep - N, step);
+    for (; step < targetStep; step++) {
+      startTransition(targets[step % N], elapsed - (step / N * duration));
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: height 1000ms linear;
+}
+.keyframe0 {
+  height: 20px;
+}
+.keyframe1 {
+  height: 10px;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-class-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-class-specific-color.html
new file mode 100644
index 00000000000..d83133e4caf
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-class-specific-color.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 1;
+  target.className = 'keyframe' + target._keyframe;
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startTransition(target, fastForward) {
+  target._keyframe ^= 1;
+  target.className = 'keyframe' + target._keyframe;
+  target.style.transitionDelay = -fastForward + 'ms';
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var step = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    step = Math.max(targetStep - N, step);
+    for (; step < targetStep; step++) {
+      startTransition(targets[step % N], elapsed - (step / N * duration));
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: background-color 1000ms linear;
+}
+.keyframe0 {
+  background-color: pink;
+}
+.keyframe1 {
+  background-color: lime;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-inline-style-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-inline-style-compositor-transform.html
new file mode 100644
index 00000000000..a5fe7c9d0aa
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-inline-style-compositor-transform.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+var keyframeValues = ['rotate(360deg)', 'rotate(0deg)'];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 1;
+  target.style.transform = keyframeValues[target._keyframe];
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startTransition(target, fastForward) {
+  target._keyframe ^= 1;
+  target.style.transform = keyframeValues[target._keyframe];
+  target.style.transitionDelay = -fastForward + 'ms';
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var step = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    step = Math.max(targetStep - N, step);
+    for (; step < targetStep; step++) {
+      startTransition(targets[step % N], elapsed - (step / N * duration));
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: transform 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-inline-style-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-inline-style-mainthread-transform.html
new file mode 100644
index 00000000000..05b6a180be8
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-inline-style-mainthread-transform.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+var keyframeValues = ['rotate(360deg) translate(1%)', 'rotate(0deg) translate(0%)'];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 1;
+  target.style.transform = keyframeValues[target._keyframe];
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startTransition(target, fastForward) {
+  target._keyframe ^= 1;
+  target.style.transform = keyframeValues[target._keyframe];
+  target.style.transitionDelay = -fastForward + 'ms';
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var step = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    step = Math.max(targetStep - N, step);
+    for (; step < targetStep; step++) {
+      startTransition(targets[step % N], elapsed - (step / N * duration));
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: transform 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-inline-style-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-inline-style-opacity.html
new file mode 100644
index 00000000000..34f800e1d6d
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-inline-style-opacity.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+var keyframeValues = ['0', '1'];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 1;
+  target.style.opacity = keyframeValues[target._keyframe];
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startTransition(target, fastForward) {
+  target._keyframe ^= 1;
+  target.style.opacity = keyframeValues[target._keyframe];
+  target.style.transitionDelay = -fastForward + 'ms';
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var step = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    step = Math.max(targetStep - N, step);
+    for (; step < targetStep; step++) {
+      startTransition(targets[step % N], elapsed - (step / N * duration));
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: opacity 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-inline-style-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-inline-style-px-height.html
new file mode 100644
index 00000000000..da9f462c1a0
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-inline-style-px-height.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+var keyframeValues = ['20px', '10px'];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 1;
+  target.style.height = keyframeValues[target._keyframe];
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startTransition(target, fastForward) {
+  target._keyframe ^= 1;
+  target.style.height = keyframeValues[target._keyframe];
+  target.style.transitionDelay = -fastForward + 'ms';
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var step = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    step = Math.max(targetStep - N, step);
+    for (; step < targetStep; step++) {
+      startTransition(targets[step % N], elapsed - (step / N * duration));
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: height 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-inline-style-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-inline-style-specific-color.html
new file mode 100644
index 00000000000..600f543bfd4
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/css-transitions-staggered-triggering-by-updating-inline-style-specific-color.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+var keyframeValues = ['pink', 'lime'];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 1;
+  target.style.backgroundColor = keyframeValues[target._keyframe];
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startTransition(target, fastForward) {
+  target._keyframe ^= 1;
+  target.style.backgroundColor = keyframeValues[target._keyframe];
+  target.style.transitionDelay = -fastForward + 'ms';
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var step = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    step = Math.max(targetStep - N, step);
+    for (; step < targetStep; step++) {
+      startTransition(targets[step % N], elapsed - (step / N * duration));
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: background-color 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/resources/web-animations-api-check.js b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/resources/web-animations-api-check.js
new file mode 100644
index 00000000000..33ebb4ecd76
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/resources/web-animations-api-check.js
@@ -0,0 +1,5 @@
+if (!Element.prototype.animate) {
+  // Generate 0 frames and fail if Web Animations is not present.
+  document.documentElement.style.display = 'none';
+  window.measurementReady = true;
+}
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-compositor-transform.html
new file mode 100644
index 00000000000..71c4d5c8dc1
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-compositor-transform.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var players = [];
+var prevTime = null;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+
+  var animation = new Animation(target, [
+    {transform: 'rotate(360deg)'},
+    {transform: 'rotate(0deg)'},
+  ], {
+    duration: duration,
+    iterations: Infinity,
+  });
+  var player = document.timeline.play(animation);
+  player.pause();
+  players.push(player);
+}
+
+function setCurrentTime(time) {
+  if (prevTime == null) {
+    prevTime = time;
+  }
+  var delta = time - prevTime;
+  players.forEach(function(player) {
+    player.currentTime += delta;
+  });
+  prevTime = time;
+
+  requestAnimationFrame(setCurrentTime);
+}
+requestAnimationFrame(setCurrentTime);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-current-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-current-color.html
new file mode 100644
index 00000000000..bb516986348
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-current-color.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var players = [];
+var prevTime = null;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+
+  var animation = new Animation(target, [
+    {backgroundColor: 'pink'},
+    {backgroundColor: 'currentColor'},
+  ], {
+    duration: duration,
+    iterations: Infinity,
+  });
+  var player = document.timeline.play(animation);
+  player.pause();
+  players.push(player);
+}
+
+function setCurrentTime(time) {
+  if (prevTime == null) {
+    prevTime = time;
+  }
+  var delta = time - prevTime;
+  players.forEach(function(player) {
+    player.currentTime += delta;
+  });
+  prevTime = time;
+
+  requestAnimationFrame(setCurrentTime);
+}
+requestAnimationFrame(setCurrentTime);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-em-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-em-height.html
new file mode 100644
index 00000000000..03f2135ddbb
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-em-height.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var players = [];
+var prevTime = null;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+
+  var animation = new Animation(target, [
+    {height: '8em'},
+    {height: '4em'},
+  ], {
+    duration: duration,
+    iterations: Infinity,
+  });
+  var player = document.timeline.play(animation);
+  player.pause();
+  players.push(player);
+}
+
+function setCurrentTime(time) {
+  if (prevTime == null) {
+    prevTime = time;
+  }
+  var delta = time - prevTime;
+  players.forEach(function(player) {
+    player.currentTime += delta;
+  });
+  prevTime = time;
+
+  requestAnimationFrame(setCurrentTime);
+}
+requestAnimationFrame(setCurrentTime);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-inherit-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-inherit-height.html
new file mode 100644
index 00000000000..f020732b2b2
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-inherit-height.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var players = [];
+var prevTime = null;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+
+  var animation = new Animation(target, [
+    {height: '20px'},
+    {height: 'inherit'},
+  ], {
+    duration: duration,
+    iterations: Infinity,
+  });
+  var player = document.timeline.play(animation);
+  player.pause();
+  players.push(player);
+}
+
+function setCurrentTime(time) {
+  if (prevTime == null) {
+    prevTime = time;
+  }
+  var delta = time - prevTime;
+  players.forEach(function(player) {
+    player.currentTime += delta;
+  });
+  prevTime = time;
+
+  requestAnimationFrame(setCurrentTime);
+}
+requestAnimationFrame(setCurrentTime);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-mainthread-transform.html
new file mode 100644
index 00000000000..a9d3dd0ed4f
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-mainthread-transform.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var players = [];
+var prevTime = null;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+
+  var animation = new Animation(target, [
+    {transform: 'rotate(360deg) translate(1%)'},
+    {transform: 'rotate(0deg) translate(0%)'},
+  ], {
+    duration: duration,
+    iterations: Infinity,
+  });
+  var player = document.timeline.play(animation);
+  player.pause();
+  players.push(player);
+}
+
+function setCurrentTime(time) {
+  if (prevTime == null) {
+    prevTime = time;
+  }
+  var delta = time - prevTime;
+  players.forEach(function(player) {
+    player.currentTime += delta;
+  });
+  prevTime = time;
+
+  requestAnimationFrame(setCurrentTime);
+}
+requestAnimationFrame(setCurrentTime);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-opacity.html
new file mode 100644
index 00000000000..cee3e4f12c9
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-opacity.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var players = [];
+var prevTime = null;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+
+  var animation = new Animation(target, [
+    {opacity: '0'},
+    {opacity: '1'},
+  ], {
+    duration: duration,
+    iterations: Infinity,
+  });
+  var player = document.timeline.play(animation);
+  player.pause();
+  players.push(player);
+}
+
+function setCurrentTime(time) {
+  if (prevTime == null) {
+    prevTime = time;
+  }
+  var delta = time - prevTime;
+  players.forEach(function(player) {
+    player.currentTime += delta;
+  });
+  prevTime = time;
+
+  requestAnimationFrame(setCurrentTime);
+}
+requestAnimationFrame(setCurrentTime);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-px-height.html
new file mode 100644
index 00000000000..afab96813ff
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-px-height.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var players = [];
+var prevTime = null;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+
+  var animation = new Animation(target, [
+    {height: '20px'},
+    {height: '10px'},
+  ], {
+    duration: duration,
+    iterations: Infinity,
+  });
+  var player = document.timeline.play(animation);
+  player.pause();
+  players.push(player);
+}
+
+function setCurrentTime(time) {
+  if (prevTime == null) {
+    prevTime = time;
+  }
+  var delta = time - prevTime;
+  players.forEach(function(player) {
+    player.currentTime += delta;
+  });
+  prevTime = time;
+
+  requestAnimationFrame(setCurrentTime);
+}
+requestAnimationFrame(setCurrentTime);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-specific-color.html
new file mode 100644
index 00000000000..5f7fdfede49
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/set-current-time-request-animation-frame-specific-color.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var players = [];
+var prevTime = null;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+
+  var animation = new Animation(target, [
+    {backgroundColor: 'pink'},
+    {backgroundColor: 'lime'},
+  ], {
+    duration: duration,
+    iterations: Infinity,
+  });
+  var player = document.timeline.play(animation);
+  player.pause();
+  players.push(player);
+}
+
+function setCurrentTime(time) {
+  if (prevTime == null) {
+    prevTime = time;
+  }
+  var delta = time - prevTime;
+  players.forEach(function(player) {
+    player.currentTime += delta;
+  });
+  prevTime = time;
+
+  requestAnimationFrame(setCurrentTime);
+}
+requestAnimationFrame(setCurrentTime);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-compositor-transform.html
new file mode 100644
index 00000000000..396460d9946
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-compositor-transform.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 400;
+var numKeyframes = 500;
+var duration = 4000;
+
+function makeKeyframes(numKeyframes, width, height) {
+    var keyframes = [];
+    for (var i = 0; i < numKeyframes + 1; i++) {
+        var fraction = i / numKeyframes;
+        var t = fraction * 2 * Math.PI;
+        var x = Math.cos(t) - Math.pow(Math.cos(4*t), 3);
+        x = ((x/4 + 1/2) * width).toFixed(5);
+        var y = Math.pow(Math.sin(4*t), 3) - Math.sin(2*t);
+        y = ((y/4 + 1/2) * height).toFixed(5);
+        keyframes.push({transform: 'translate(' + x + 'px, ' + y + 'px)'});
+    }
+    return keyframes;
+}
+
+var keyframes = makeKeyframes(numKeyframes, 550, 800);
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  target.animate(keyframes, {duration: duration, iterations: Infinity, delay: -duration/10 * i/N});
+}
+
+requestAnimationFrame(function() {
+  measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+target {
+  position: absolute;
+  border: 5px solid green;
+  border-radius: 100%;
+}
+container {
+  position: absolute;
+  width: 550px;
+  height: 800px;
+  background-color: lightgrey;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-current-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-current-color.html
new file mode 100644
index 00000000000..396460d9946
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-current-color.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 400;
+var numKeyframes = 500;
+var duration = 4000;
+
+function makeKeyframes(numKeyframes, width, height) {
+    var keyframes = [];
+    for (var i = 0; i < numKeyframes + 1; i++) {
+        var fraction = i / numKeyframes;
+        var t = fraction * 2 * Math.PI;
+        var x = Math.cos(t) - Math.pow(Math.cos(4*t), 3);
+        x = ((x/4 + 1/2) * width).toFixed(5);
+        var y = Math.pow(Math.sin(4*t), 3) - Math.sin(2*t);
+        y = ((y/4 + 1/2) * height).toFixed(5);
+        keyframes.push({transform: 'translate(' + x + 'px, ' + y + 'px)'});
+    }
+    return keyframes;
+}
+
+var keyframes = makeKeyframes(numKeyframes, 550, 800);
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  target.animate(keyframes, {duration: duration, iterations: Infinity, delay: -duration/10 * i/N});
+}
+
+requestAnimationFrame(function() {
+  measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+target {
+  position: absolute;
+  border: 5px solid green;
+  border-radius: 100%;
+}
+container {
+  position: absolute;
+  width: 550px;
+  height: 800px;
+  background-color: lightgrey;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-em-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-em-height.html
new file mode 100644
index 00000000000..396460d9946
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-em-height.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 400;
+var numKeyframes = 500;
+var duration = 4000;
+
+function makeKeyframes(numKeyframes, width, height) {
+    var keyframes = [];
+    for (var i = 0; i < numKeyframes + 1; i++) {
+        var fraction = i / numKeyframes;
+        var t = fraction * 2 * Math.PI;
+        var x = Math.cos(t) - Math.pow(Math.cos(4*t), 3);
+        x = ((x/4 + 1/2) * width).toFixed(5);
+        var y = Math.pow(Math.sin(4*t), 3) - Math.sin(2*t);
+        y = ((y/4 + 1/2) * height).toFixed(5);
+        keyframes.push({transform: 'translate(' + x + 'px, ' + y + 'px)'});
+    }
+    return keyframes;
+}
+
+var keyframes = makeKeyframes(numKeyframes, 550, 800);
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  target.animate(keyframes, {duration: duration, iterations: Infinity, delay: -duration/10 * i/N});
+}
+
+requestAnimationFrame(function() {
+  measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+target {
+  position: absolute;
+  border: 5px solid green;
+  border-radius: 100%;
+}
+container {
+  position: absolute;
+  width: 550px;
+  height: 800px;
+  background-color: lightgrey;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-inherit-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-inherit-height.html
new file mode 100644
index 00000000000..396460d9946
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-inherit-height.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 400;
+var numKeyframes = 500;
+var duration = 4000;
+
+function makeKeyframes(numKeyframes, width, height) {
+    var keyframes = [];
+    for (var i = 0; i < numKeyframes + 1; i++) {
+        var fraction = i / numKeyframes;
+        var t = fraction * 2 * Math.PI;
+        var x = Math.cos(t) - Math.pow(Math.cos(4*t), 3);
+        x = ((x/4 + 1/2) * width).toFixed(5);
+        var y = Math.pow(Math.sin(4*t), 3) - Math.sin(2*t);
+        y = ((y/4 + 1/2) * height).toFixed(5);
+        keyframes.push({transform: 'translate(' + x + 'px, ' + y + 'px)'});
+    }
+    return keyframes;
+}
+
+var keyframes = makeKeyframes(numKeyframes, 550, 800);
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  target.animate(keyframes, {duration: duration, iterations: Infinity, delay: -duration/10 * i/N});
+}
+
+requestAnimationFrame(function() {
+  measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+target {
+  position: absolute;
+  border: 5px solid green;
+  border-radius: 100%;
+}
+container {
+  position: absolute;
+  width: 550px;
+  height: 800px;
+  background-color: lightgrey;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-mainthread-transform.html
new file mode 100644
index 00000000000..396460d9946
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-mainthread-transform.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 400;
+var numKeyframes = 500;
+var duration = 4000;
+
+function makeKeyframes(numKeyframes, width, height) {
+    var keyframes = [];
+    for (var i = 0; i < numKeyframes + 1; i++) {
+        var fraction = i / numKeyframes;
+        var t = fraction * 2 * Math.PI;
+        var x = Math.cos(t) - Math.pow(Math.cos(4*t), 3);
+        x = ((x/4 + 1/2) * width).toFixed(5);
+        var y = Math.pow(Math.sin(4*t), 3) - Math.sin(2*t);
+        y = ((y/4 + 1/2) * height).toFixed(5);
+        keyframes.push({transform: 'translate(' + x + 'px, ' + y + 'px)'});
+    }
+    return keyframes;
+}
+
+var keyframes = makeKeyframes(numKeyframes, 550, 800);
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  target.animate(keyframes, {duration: duration, iterations: Infinity, delay: -duration/10 * i/N});
+}
+
+requestAnimationFrame(function() {
+  measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+target {
+  position: absolute;
+  border: 5px solid green;
+  border-radius: 100%;
+}
+container {
+  position: absolute;
+  width: 550px;
+  height: 800px;
+  background-color: lightgrey;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-opacity.html
new file mode 100644
index 00000000000..396460d9946
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-opacity.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 400;
+var numKeyframes = 500;
+var duration = 4000;
+
+function makeKeyframes(numKeyframes, width, height) {
+    var keyframes = [];
+    for (var i = 0; i < numKeyframes + 1; i++) {
+        var fraction = i / numKeyframes;
+        var t = fraction * 2 * Math.PI;
+        var x = Math.cos(t) - Math.pow(Math.cos(4*t), 3);
+        x = ((x/4 + 1/2) * width).toFixed(5);
+        var y = Math.pow(Math.sin(4*t), 3) - Math.sin(2*t);
+        y = ((y/4 + 1/2) * height).toFixed(5);
+        keyframes.push({transform: 'translate(' + x + 'px, ' + y + 'px)'});
+    }
+    return keyframes;
+}
+
+var keyframes = makeKeyframes(numKeyframes, 550, 800);
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  target.animate(keyframes, {duration: duration, iterations: Infinity, delay: -duration/10 * i/N});
+}
+
+requestAnimationFrame(function() {
+  measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+target {
+  position: absolute;
+  border: 5px solid green;
+  border-radius: 100%;
+}
+container {
+  position: absolute;
+  width: 550px;
+  height: 800px;
+  background-color: lightgrey;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-px-height.html
new file mode 100644
index 00000000000..396460d9946
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-px-height.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 400;
+var numKeyframes = 500;
+var duration = 4000;
+
+function makeKeyframes(numKeyframes, width, height) {
+    var keyframes = [];
+    for (var i = 0; i < numKeyframes + 1; i++) {
+        var fraction = i / numKeyframes;
+        var t = fraction * 2 * Math.PI;
+        var x = Math.cos(t) - Math.pow(Math.cos(4*t), 3);
+        x = ((x/4 + 1/2) * width).toFixed(5);
+        var y = Math.pow(Math.sin(4*t), 3) - Math.sin(2*t);
+        y = ((y/4 + 1/2) * height).toFixed(5);
+        keyframes.push({transform: 'translate(' + x + 'px, ' + y + 'px)'});
+    }
+    return keyframes;
+}
+
+var keyframes = makeKeyframes(numKeyframes, 550, 800);
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  target.animate(keyframes, {duration: duration, iterations: Infinity, delay: -duration/10 * i/N});
+}
+
+requestAnimationFrame(function() {
+  measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+target {
+  position: absolute;
+  border: 5px solid green;
+  border-radius: 100%;
+}
+container {
+  position: absolute;
+  width: 550px;
+  height: 800px;
+  background-color: lightgrey;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-specific-color.html
new file mode 100644
index 00000000000..396460d9946
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-many-keyframes-specific-color.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = 400;
+var numKeyframes = 500;
+var duration = 4000;
+
+function makeKeyframes(numKeyframes, width, height) {
+    var keyframes = [];
+    for (var i = 0; i < numKeyframes + 1; i++) {
+        var fraction = i / numKeyframes;
+        var t = fraction * 2 * Math.PI;
+        var x = Math.cos(t) - Math.pow(Math.cos(4*t), 3);
+        x = ((x/4 + 1/2) * width).toFixed(5);
+        var y = Math.pow(Math.sin(4*t), 3) - Math.sin(2*t);
+        y = ((y/4 + 1/2) * height).toFixed(5);
+        keyframes.push({transform: 'translate(' + x + 'px, ' + y + 'px)'});
+    }
+    return keyframes;
+}
+
+var keyframes = makeKeyframes(numKeyframes, 550, 800);
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  target.animate(keyframes, {duration: duration, iterations: Infinity, delay: -duration/10 * i/N});
+}
+
+requestAnimationFrame(function() {
+  measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+target {
+  position: absolute;
+  border: 5px solid green;
+  border-radius: 100%;
+}
+container {
+  position: absolute;
+  width: 550px;
+  height: 800px;
+  background-color: lightgrey;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-compositor-transform.html
new file mode 100644
index 00000000000..a6634594384
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-compositor-transform.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+
+function startAnimation(element) {
+  element.animate([
+    {transform: 'rotate(360deg)'},
+    {transform: 'rotate(0deg)'},
+  ], duration);
+}
+
+function startAllAnimations() {
+  for (var i in targets)
+    startAnimation(targets[i]);
+  setTimeout(startAllAnimations, duration);
+}
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+startAllAnimations();
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-current-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-current-color.html
new file mode 100644
index 00000000000..dc1a91f05e5
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-current-color.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+
+function startAnimation(element) {
+  element.animate([
+    {backgroundColor: 'pink'},
+    {backgroundColor: 'currentColor'},
+  ], duration);
+}
+
+function startAllAnimations() {
+  for (var i in targets)
+    startAnimation(targets[i]);
+  setTimeout(startAllAnimations, duration);
+}
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+startAllAnimations();
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-em-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-em-height.html
new file mode 100644
index 00000000000..f2ac8c77321
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-em-height.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+
+function startAnimation(element) {
+  element.animate([
+    {height: '8em'},
+    {height: '4em'},
+  ], duration);
+}
+
+function startAllAnimations() {
+  for (var i in targets)
+    startAnimation(targets[i]);
+  setTimeout(startAllAnimations, duration);
+}
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+startAllAnimations();
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-inherit-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-inherit-height.html
new file mode 100644
index 00000000000..dbd324de48f
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-inherit-height.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+
+function startAnimation(element) {
+  element.animate([
+    {height: '20px'},
+    {height: 'inherit'},
+  ], duration);
+}
+
+function startAllAnimations() {
+  for (var i in targets)
+    startAnimation(targets[i]);
+  setTimeout(startAllAnimations, duration);
+}
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+startAllAnimations();
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-mainthread-transform.html
new file mode 100644
index 00000000000..3b71e45a4ff
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-mainthread-transform.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+
+function startAnimation(element) {
+  element.animate([
+    {transform: 'rotate(360deg) translate(1%)'},
+    {transform: 'rotate(0deg) translate(0%)'},
+  ], duration);
+}
+
+function startAllAnimations() {
+  for (var i in targets)
+    startAnimation(targets[i]);
+  setTimeout(startAllAnimations, duration);
+}
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+startAllAnimations();
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-opacity.html
new file mode 100644
index 00000000000..375f211dc48
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-opacity.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+
+function startAnimation(element) {
+  element.animate([
+    {opacity: '0'},
+    {opacity: '1'},
+  ], duration);
+}
+
+function startAllAnimations() {
+  for (var i in targets)
+    startAnimation(targets[i]);
+  setTimeout(startAllAnimations, duration);
+}
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+startAllAnimations();
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-px-height.html
new file mode 100644
index 00000000000..e216db1e1cc
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-px-height.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+
+function startAnimation(element) {
+  element.animate([
+    {height: '20px'},
+    {height: '10px'},
+  ], duration);
+}
+
+function startAllAnimations() {
+  for (var i in targets)
+    startAnimation(targets[i]);
+  setTimeout(startAllAnimations, duration);
+}
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+startAllAnimations();
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-specific-color.html
new file mode 100644
index 00000000000..1a14a70611c
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-simultaneous-specific-color.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+var targets = [];
+
+function startAnimation(element) {
+  element.animate([
+    {backgroundColor: 'pink'},
+    {backgroundColor: 'lime'},
+  ], duration);
+}
+
+function startAllAnimations() {
+  for (var i in targets)
+    startAnimation(targets[i]);
+  setTimeout(startAllAnimations, duration);
+}
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+startAllAnimations();
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-compositor-transform.html
new file mode 100644
index 00000000000..21ee2f12ca2
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-compositor-transform.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation(element) {
+  var player = element.animate([
+    {transform: 'rotate(360deg)'},
+    {transform: 'rotate(0deg)'},
+  ], duration);
+  player.onfinish = function() {
+    startAnimation(element);
+  }
+}
+
+function addElement() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  startAnimation(target);
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      addElement();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-current-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-current-color.html
new file mode 100644
index 00000000000..a7b7ba26818
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-current-color.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation(element) {
+  var player = element.animate([
+    {backgroundColor: 'pink'},
+    {backgroundColor: 'currentColor'},
+  ], duration);
+  player.onfinish = function() {
+    startAnimation(element);
+  }
+}
+
+function addElement() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  startAnimation(target);
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      addElement();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-em-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-em-height.html
new file mode 100644
index 00000000000..036f1d86415
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-em-height.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation(element) {
+  var player = element.animate([
+    {height: '8em'},
+    {height: '4em'},
+  ], duration);
+  player.onfinish = function() {
+    startAnimation(element);
+  }
+}
+
+function addElement() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  startAnimation(target);
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      addElement();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-inherit-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-inherit-height.html
new file mode 100644
index 00000000000..5f60134102a
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-inherit-height.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation(element) {
+  var player = element.animate([
+    {height: '20px'},
+    {height: 'inherit'},
+  ], duration);
+  player.onfinish = function() {
+    startAnimation(element);
+  }
+}
+
+function addElement() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  startAnimation(target);
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      addElement();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-mainthread-transform.html
new file mode 100644
index 00000000000..1fecb629d5c
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-mainthread-transform.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation(element) {
+  var player = element.animate([
+    {transform: 'rotate(360deg) translate(1%)'},
+    {transform: 'rotate(0deg) translate(0%)'},
+  ], duration);
+  player.onfinish = function() {
+    startAnimation(element);
+  }
+}
+
+function addElement() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  startAnimation(target);
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      addElement();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-opacity.html
new file mode 100644
index 00000000000..0eeefbd4f36
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-opacity.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation(element) {
+  var player = element.animate([
+    {opacity: '0'},
+    {opacity: '1'},
+  ], duration);
+  player.onfinish = function() {
+    startAnimation(element);
+  }
+}
+
+function addElement() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  startAnimation(target);
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      addElement();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-px-height.html
new file mode 100644
index 00000000000..c3d4e5e70e3
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-px-height.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation(element) {
+  var player = element.animate([
+    {height: '20px'},
+    {height: '10px'},
+  ], duration);
+  player.onfinish = function() {
+    startAnimation(element);
+  }
+}
+
+function addElement() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  startAnimation(target);
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      addElement();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-specific-color.html
new file mode 100644
index 00000000000..1c15cdb4fd3
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-chaining-specific-color.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation(element) {
+  var player = element.animate([
+    {backgroundColor: 'pink'},
+    {backgroundColor: 'lime'},
+  ], duration);
+  player.onfinish = function() {
+    startAnimation(element);
+  }
+}
+
+function addElement() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  startAnimation(target);
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      addElement();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-compositor-transform.html
new file mode 100644
index 00000000000..37bad0534b7
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-compositor-transform.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation(element, delay) {
+  target.animate([
+    {transform: 'rotate(360deg)'},
+    {transform: 'rotate(0deg)'},
+  ], {
+    duration: duration,
+    iterations: Infinity,
+    delay: delay,
+  });
+}
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  startAnimation(target, -i * (duration / N));
+}
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-current-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-current-color.html
new file mode 100644
index 00000000000..833d4adad29
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-current-color.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation(element, delay) {
+  target.animate([
+    {backgroundColor: 'pink'},
+    {backgroundColor: 'currentColor'},
+  ], {
+    duration: duration,
+    iterations: Infinity,
+    delay: delay,
+  });
+}
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  startAnimation(target, -i * (duration / N));
+}
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-em-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-em-height.html
new file mode 100644
index 00000000000..09fbd057d73
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-em-height.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation(element, delay) {
+  target.animate([
+    {height: '8em'},
+    {height: '4em'},
+  ], {
+    duration: duration,
+    iterations: Infinity,
+    delay: delay,
+  });
+}
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  startAnimation(target, -i * (duration / N));
+}
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-inherit-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-inherit-height.html
new file mode 100644
index 00000000000..77311c8694f
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-inherit-height.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation(element, delay) {
+  target.animate([
+    {height: '20px'},
+    {height: 'inherit'},
+  ], {
+    duration: duration,
+    iterations: Infinity,
+    delay: delay,
+  });
+}
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  startAnimation(target, -i * (duration / N));
+}
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-mainthread-transform.html
new file mode 100644
index 00000000000..217cc9ae6fa
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-mainthread-transform.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation(element, delay) {
+  target.animate([
+    {transform: 'rotate(360deg) translate(1%)'},
+    {transform: 'rotate(0deg) translate(0%)'},
+  ], {
+    duration: duration,
+    iterations: Infinity,
+    delay: delay,
+  });
+}
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  startAnimation(target, -i * (duration / N));
+}
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-opacity.html
new file mode 100644
index 00000000000..94fb2268a87
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-opacity.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation(element, delay) {
+  target.animate([
+    {opacity: '0'},
+    {opacity: '1'},
+  ], {
+    duration: duration,
+    iterations: Infinity,
+    delay: delay,
+  });
+}
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  startAnimation(target, -i * (duration / N));
+}
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-px-height.html
new file mode 100644
index 00000000000..2235f7bed96
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-px-height.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation(element, delay) {
+  target.animate([
+    {height: '20px'},
+    {height: '10px'},
+  ], {
+    duration: duration,
+    iterations: Infinity,
+    delay: delay,
+  });
+}
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  startAnimation(target, -i * (duration / N));
+}
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-specific-color.html
new file mode 100644
index 00000000000..f6cc50331b5
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-infinite-iterations-specific-color.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+function startAnimation(element, delay) {
+  target.animate([
+    {backgroundColor: 'pink'},
+    {backgroundColor: 'lime'},
+  ], {
+    duration: duration,
+    iterations: Infinity,
+    delay: delay,
+  });
+}
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  startAnimation(target, -i * (duration / N));
+}
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-compositor-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-compositor-transform.html
new file mode 100644
index 00000000000..bf96b0d8680
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-compositor-transform.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (!targets[i]) {
+    targets[i] = document.createElement('target');
+    container.appendChild(targets[i]);
+  }
+  targets[i].animate([
+    {transform: 'rotate(360deg)'},
+    {transform: 'rotate(0deg)'},
+  ], duration);
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      window.measurementReady = true;
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-current-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-current-color.html
new file mode 100644
index 00000000000..5f729a7f2b2
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-current-color.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (!targets[i]) {
+    targets[i] = document.createElement('target');
+    container.appendChild(targets[i]);
+  }
+  targets[i].animate([
+    {backgroundColor: 'pink'},
+    {backgroundColor: 'currentColor'},
+  ], duration);
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      window.measurementReady = true;
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-em-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-em-height.html
new file mode 100644
index 00000000000..d9058478c4a
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-em-height.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (!targets[i]) {
+    targets[i] = document.createElement('target');
+    container.appendChild(targets[i]);
+  }
+  targets[i].animate([
+    {height: '8em'},
+    {height: '4em'},
+  ], duration);
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      window.measurementReady = true;
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-inherit-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-inherit-height.html
new file mode 100644
index 00000000000..30a8dea891c
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-inherit-height.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (!targets[i]) {
+    targets[i] = document.createElement('target');
+    container.appendChild(targets[i]);
+  }
+  targets[i].animate([
+    {height: '20px'},
+    {height: 'inherit'},
+  ], duration);
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      window.measurementReady = true;
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-mainthread-transform.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-mainthread-transform.html
new file mode 100644
index 00000000000..3b55513523c
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-mainthread-transform.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (!targets[i]) {
+    targets[i] = document.createElement('target');
+    container.appendChild(targets[i]);
+  }
+  targets[i].animate([
+    {transform: 'rotate(360deg) translate(1%)'},
+    {transform: 'rotate(0deg) translate(0%)'},
+  ], duration);
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      window.measurementReady = true;
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-opacity.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-opacity.html
new file mode 100644
index 00000000000..127b3b1e842
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-opacity.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (!targets[i]) {
+    targets[i] = document.createElement('target');
+    container.appendChild(targets[i]);
+  }
+  targets[i].animate([
+    {opacity: '0'},
+    {opacity: '1'},
+  ], duration);
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      window.measurementReady = true;
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-px-height.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-px-height.html
new file mode 100644
index 00000000000..6d7aa0da180
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-px-height.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (!targets[i]) {
+    targets[i] = document.createElement('target');
+    container.appendChild(targets[i]);
+  }
+  targets[i].animate([
+    {height: '20px'},
+    {height: '10px'},
+  ], duration);
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      window.measurementReady = true;
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-specific-color.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-specific-color.html
new file mode 100644
index 00000000000..9c1fabe175b
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_generated/web-animations-staggered-triggering-specific-color.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = 1000;
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (!targets[i]) {
+    targets[i] = document.createElement('target');
+    container.appendChild(targets[i]);
+  }
+  targets[i].animate([
+    {backgroundColor: 'pink'},
+    {backgroundColor: 'lime'},
+  ], duration);
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      window.measurementReady = true;
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-many-keyframes.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-many-keyframes.html
new file mode 100644
index 00000000000..a7692f4f727
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-many-keyframes.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = {{NUM_ELEMENTS}};
+var numKeyframes = 500;
+var duration = 4000;
+
+function makeKeyframes(numKeyframes, width, height) {
+    var keyframes = '@-webkit-keyframes anim {\n'
+    for (var i = 0; i < numKeyframes + 1; i++) {
+        var fraction = i / numKeyframes;
+        var t = fraction * 2 * Math.PI;
+        var x = Math.cos(t) - Math.pow(Math.cos(4*t), 3);
+        x = ((x/4 + 1/2) * width).toFixed(5);
+        var y = Math.pow(Math.sin(4*t), 3) - Math.sin(2*t);
+        y = ((y/4 + 1/2) * height).toFixed(5);
+        keyframes += (fraction*100) + '% { transform: translate(' + x + 'px, ' + y + 'px) }\n';
+    }
+    return keyframes;
+}
+
+var style = document.createElement('style');
+style.textContent = makeKeyframes(numKeyframes, 550, 800);
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target.style.webkitAnimation = 'anim ' + duration + 'ms linear infinite -' + duration/10 * i/N + 'ms';
+  container.appendChild(target);
+}
+
+container.appendChild(style);
+
+requestAnimationFrame(function() {
+  measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+target {
+  position: absolute;
+  border: 5px solid green;
+  border-radius: 100%;
+}
+container {
+  position: absolute;
+  width: 550px;
+  height: 800px;
+  background-color: lightgrey;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-simultaneous-by-inserting-new-element.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-simultaneous-by-inserting-new-element.html
new file mode 100644
index 00000000000..f856d9aea70
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-simultaneous-by-inserting-new-element.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+window.measurementReady = true;
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+}
+
+function startAllAnimations() {
+  container.textContent = '';
+  for (var i = 0; i < N; i++) {
+    startAnimation();
+  }
+}
+
+startAllAnimations();
+setInterval(startAllAnimations, duration);
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { {{START}}; }
+  100% { {{END}}; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-simultaneous-by-inserting-style-element.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-simultaneous-by-inserting-style-element.html
new file mode 100644
index 00000000000..485b54cfd51
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-simultaneous-by-inserting-style-element.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+window.measurementReady = true;
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+var style = null;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+}
+
+var nextAnim = 0;
+function updateStyle() {
+  if (style) {
+    style.remove();
+  }
+  anim = 'anim' + nextAnim++;
+  style = document.createElement('style');
+  style.textContent = '\
+  target {\
+    display: inline-block;\
+    width: 9px; height: 9px;\
+    background: orange;\
+    -webkit-animation: ' + anim + ' 1s infinite;\
+  }\n\
+  @-webkit-keyframes ' + anim + ' {\
+    0% { {{START}}; }\
+    100% { {{END}}; }\
+  }';
+  container.appendChild(style);
+}
+
+updateStyle();
+setInterval(updateStyle, duration);
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-simultaneous-by-updating-class.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-simultaneous-by-updating-class.html
new file mode 100644
index 00000000000..c932dc1daec
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-simultaneous-by-updating-class.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+window.measurementReady = true;
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+}
+
+function startAllAnimations() {
+  for (var i = 0; i < container.childNodes.length; i++) {
+    container.childNodes[i].classList.toggle('anim');
+  }
+}
+startAllAnimations();
+setInterval(startAllAnimations, duration);
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+target.anim {
+  -webkit-animation: anim2 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { {{START}}; }
+  100% { {{END}}; }
+}
+@-webkit-keyframes anim2 {
+  0% { {{START}}; }
+  100% { {{END}}; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-simultaneous-by-updating-inline-style.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-simultaneous-by-updating-inline-style.html
new file mode 100644
index 00000000000..6211e458247
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-simultaneous-by-updating-inline-style.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+window.measurementReady = true;
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+}
+
+var anim = 0;
+function startAllAnimations() {
+  anim++;
+  for (var i = 0; i < container.childNodes.length; i++) {
+    container.childNodes[i].style.webkitAnimationName = 'anim' + (1 + (i + anim) % 2);
+  }
+}
+
+startAllAnimations();
+setInterval(startAllAnimations, duration);
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { {{START}}; }
+  100% { {{END}}; }
+}
+@-webkit-keyframes anim2 {
+  0% { {{END}}; }
+  100% { {{START}}; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-chaining-by-inserting-new-element.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-chaining-by-inserting-new-element.html
new file mode 100644
index 00000000000..c55548144d5
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-chaining-by-inserting-new-element.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  target.i = 1;
+  container.appendChild(target);
+  target.addEventListener('webkitAnimationEnd', function(e) {
+    e.target.remove();
+    startAnimation();
+  });
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      startAnimation();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { {{START}}; }
+  100% { {{END}}; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-chaining-by-inserting-style-element.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-chaining-by-inserting-style-element.html
new file mode 100644
index 00000000000..762410eeff5
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-chaining-by-inserting-style-element.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  updateStyle(target);
+  target.addEventListener('webkitAnimationEnd', function(e) {
+    updateStyle(target);
+  });
+}
+
+var nextId = 0;
+var nextAnim = 0;
+function updateStyle(element) {
+  if (!element.id) {
+    element.id = 'e' + nextId++;
+  }
+  if (element.styleSheet) {
+    element.styleSheet.remove();
+  }
+  var id = element.id;
+  var anim = id + 'anim' + nextAnim++;
+  var style = document.createElement('style');
+  style.textContent = '\
+  #' + id + ' {\
+    display: inline-block;\
+    width: 9px; height: 9px;\
+    background: orange;\
+    -webkit-animation: ' + anim + ' 1s;\
+  }\n\
+  @-webkit-keyframes ' + anim + ' {\
+    0% { {{START}}; }\
+    100% { {{END}}; }\
+  }';
+  container.appendChild(style);
+  element.styleSheet = style;
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      startAnimation();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-chaining-by-updating-class.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-chaining-by-updating-class.html
new file mode 100644
index 00000000000..1dafecf6e2a
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-chaining-by-updating-class.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  target.addEventListener('webkitAnimationEnd', function(e) {
+    e.target.classList.toggle('anim');
+  });
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      startAnimation();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+target.anim {
+  -webkit-animation: anim2 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { {{START}}; }
+  100% { {{END}}; }
+}
+@-webkit-keyframes anim2 {
+  0% { {{START}}; }
+  100% { {{END}}; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-chaining-by-updating-inline-style.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-chaining-by-updating-inline-style.html
new file mode 100644
index 00000000000..defb6d2d8e3
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-chaining-by-updating-inline-style.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+
+function startAnimation() {
+  var target = document.createElement('target');
+  target.i = 1;
+  container.appendChild(target);
+  target.addEventListener('webkitAnimationEnd', function(e) {
+    e.target.style.webkitAnimationName = 'anim' + (1 + e.target.i++ % 2);
+  });
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      startAnimation();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { {{START}}; }
+  100% { {{END}}; }
+}
+@-webkit-keyframes anim2 {
+  0% { {{START}}; }
+  100% { {{END}}; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-infinite-iterations.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-infinite-iterations.html
new file mode 100644
index 00000000000..ec6120c5296
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-infinite-iterations.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target.style.animationDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+}
+
+var style = document.createElement('style');
+style.textContent = '\
+target {\
+  display: inline-block;\
+  width: 9px; height: 9px;\
+  background: orange;\
+  -webkit-animation: anim ' + duration + 'ms infinite;\
+}\n\
+@-webkit-keyframes anim {\
+  0% { {{START}}; }\
+  100% { {{END}}; }\
+}';
+container.appendChild(style);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-triggering-by-inserting-new-element.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-triggering-by-inserting-new-element.html
new file mode 100644
index 00000000000..73cb1163ab8
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-triggering-by-inserting-new-element.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (targets[i])
+    targets[i].remove();
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets[i] = target;
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      window.measurementReady = true;
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s linear;
+}
+@-webkit-keyframes anim1 {
+  0% { {{START}}; }
+  100% { {{END}}; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-triggering-by-inserting-style-element.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-triggering-by-inserting-style-element.html
new file mode 100644
index 00000000000..5ac7dc949d4
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-triggering-by-inserting-style-element.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+var targets = [];
+var styles = [];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function addNewAnimationStyle(step) {
+  // Clean up overwritten styles.
+  var i = 0;
+  for (; i < styles.length && styles[i].lastStep < step; i++) {
+    styles[i].style.remove();
+  }
+  styles.splice(0, i);
+
+  var style = document.createElement('style');
+  var animationName = 'anim' + step;
+  style.textContent = '@-webkit-keyframes ' + animationName + ' { 0% { {{START}}; } 100% { {{END}}; } }';
+  container.appendChild(style);
+  styles.push({
+    style: style,
+    lastStep: step + N,
+  });
+
+  return animationName;
+}
+
+function startAnimations(startingTargets, startStep, endStep) {
+  var newAnimationName = addNewAnimationStyle(startStep, endStep);
+  startingTargets.forEach(function(startInfo) {
+    startInfo.target.style.animationName = newAnimationName;
+    startInfo.target.style.animationDelay = -startInfo.fastForward + 'ms';
+  });
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var previousStep = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    var restartingTargets = [];
+    for (var step = Math.max(targetStep - N, previousStep); step < targetStep; step++) {
+      var stepStartTime = step / N * duration;
+      restartingTargets.push({
+        target: targets[step % N],
+        fastForward: elapsed - stepStartTime,
+      });
+    }
+    startAnimations(restartingTargets, targetStep);
+    previousStep = targetStep;
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  -webkit-animation: 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-triggering-by-updating-class.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-triggering-by-updating-class.html
new file mode 100644
index 00000000000..4a33220b332
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-triggering-by-updating-class.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (targets[i]) {
+    targets[i].classList.toggle('anim');
+    return;
+  }
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets[i] = target;
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      window.measurementReady = true;
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+target.anim {
+  -webkit-animation: anim2 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { {{START}}; }
+  100% { {{END}}; }
+}
+@-webkit-keyframes anim2 {
+  0% { {{START}}; }
+  100% { {{END}}; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-triggering-by-updating-inline-style.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-triggering-by-updating-inline-style.html
new file mode 100644
index 00000000000..19b43e13697
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-animations-staggered-triggering-by-updating-inline-style.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (targets[i]) {
+    targets[i].style.webkitAnimationName = 'anim' + (1 + targets[i].i++ % 2);
+    targets[i].classList.toggle('anim');
+    return;
+  }
+  var target = document.createElement('target');
+  target.i = 1;
+  container.appendChild(target);
+  targets[i] = target;
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      window.measurementReady = true;
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+  -webkit-animation: anim1 1s;
+}
+@-webkit-keyframes anim1 {
+  0% { {{START}}; }
+  100% { {{END}}; }
+}
+@-webkit-keyframes anim2 {
+  0% { {{START}}; }
+  100% { {{END}}; }
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-simultaneous-by-inserting-new-elements.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-simultaneous-by-inserting-new-elements.html
new file mode 100644
index 00000000000..8bbe73413ff
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-simultaneous-by-inserting-new-elements.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+var targets = [];
+var triggers = [];
+
+for (var i = 0; i < N; i++) {
+  triggers.push(document.createElement('trigger'));
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startAllTransitions() {
+  requestAnimationFrame(function() {
+    targets.forEach(function(target, i) {
+      container.insertBefore(triggers[i], target);
+    });
+    requestAnimationFrame(function() {
+      triggers.forEach(function(trigger) {
+        trigger.remove();
+      })
+    });
+  });
+}
+
+startAllTransitions();
+setInterval(startAllTransitions, duration);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: {{PROPERTY_NAME}} 1000ms linear;
+  {{START}};
+}
+trigger + target {
+  transition: none;
+  {{END}};
+}
+trigger {
+  display: none;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-simultaneous-by-inserting-style-element.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-simultaneous-by-inserting-style-element.html
new file mode 100644
index 00000000000..e24c109a9b9
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-simultaneous-by-inserting-style-element.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+var style = null;
+var keyframe = 1;
+var keyframeValues = [{{PROPERTY_VALUES}}]
+
+for (var i = 0; i < N; i++) {
+  container.appendChild(document.createElement('target'));
+}
+
+function startAllAnimations() {
+  keyframe ^= 1;
+  if (style) {
+    style.remove();
+  }
+  style = document.createElement('style');
+  style.textContent = 'target { {{PROPERTY_NAME}}: ' + keyframeValues[keyframe] + '; }';
+  container.appendChild(style);
+}
+
+requestAnimationFrame(startAllAnimations);
+setInterval(startAllAnimations, duration);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: {{PROPERTY_NAME}} 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-simultaneous-by-updating-class.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-simultaneous-by-updating-class.html
new file mode 100644
index 00000000000..30ae5b47fdb
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-simultaneous-by-updating-class.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+var keyframe = 1;
+var targets = [];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startAllAnimations() {
+  keyframe ^= 1;
+  targets.forEach(function(target) {
+    target.className = 'keyframe' + keyframe;
+  });
+}
+
+requestAnimationFrame(startAllAnimations);
+setInterval(startAllAnimations, duration);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: {{PROPERTY_NAME}} 1000ms linear;
+}
+.keyframe0 {
+  {{START}};
+}
+.keyframe1 {
+  {{END}};
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-simultaneous-by-updating-inline-style.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-simultaneous-by-updating-inline-style.html
new file mode 100644
index 00000000000..4d659c6f2ff
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-simultaneous-by-updating-inline-style.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+var targets = [];
+var keyframe = 1;
+var keyframeValues = [{{PROPERTY_VALUES}}]
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startAllAnimations() {
+  keyframe ^= 1;
+  targets.forEach(function(target) {
+    target.style.{{PROPERTY_JAVASCRIPT_NAME}} = keyframeValues[keyframe];
+  });
+}
+
+requestAnimationFrame(startAllAnimations);
+setInterval(startAllAnimations, duration);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: {{PROPERTY_NAME}} 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-chaining-by-inserting-new-element.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-chaining-by-inserting-new-element.html
new file mode 100644
index 00000000000..04a9c68d38e
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-chaining-by-inserting-new-element.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+var keyframeValues = [{{PROPERTY_VALUES}}];
+var keyframeStash = [[], []];
+var targets = [];
+
+for (var i = 0; i < N; i++) {
+  keyframeStash[0].push(document.createElement('keyframe0'));
+  keyframeStash[1].push(document.createElement('keyframe1'));
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  target.style.transitionDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+  target.addEventListener('transitionend', restartTransition);
+  targets.push(target);
+}
+
+function restartTransition(event) {
+  var target = event.target;
+  target.style.removeProperty('transition-delay');
+  keyframeStash[target._keyframe].push(target.previousSibling);
+  target.previousSibling.remove();
+  target._keyframe ^= 1;
+  container.insertBefore(keyframeStash[target._keyframe].pop(), target);
+}
+
+var measurementReady = false;
+requestAnimationFrame(function() {
+  requestAnimationFrame(function() {
+    targets.forEach(function(target) {
+      container.insertBefore(keyframeStash[0].pop(), target);
+    });
+    measurementReady = true;
+  });
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: {{PROPERTY_NAME}} 1000ms linear;
+}
+keyframe0 + target {
+  {{START}};
+}
+keyframe1 + target {
+  {{END}};
+}
+keyframe0, keyframe1 {
+  display: none;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-chaining-by-inserting-style-element.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-chaining-by-inserting-style-element.html
new file mode 100644
index 00000000000..a5e4fb1aec4
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-chaining-by-inserting-style-element.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+var keyframeValues = [{{PROPERTY_VALUES}}];
+var id = 0;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  target.style.transitionDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+  target.addEventListener('transitionend', restartTransition);
+}
+
+function restartTransition(event) {
+  event.target._keyframe ^= 1;
+  addNewIDStyle(event.target);
+  event.target.style.removeProperty('transition-delay');
+}
+
+function addNewIDStyle(target) {
+  id++;
+  if (target._currentIDStyle) {
+    target._currentIDStyle.remove();
+  }
+  var style = document.createElement('style');
+  style.textContent = '#id' + id + ' { {{PROPERTY_NAME}}: ' + keyframeValues[target._keyframe] + ';}';
+  container.appendChild(style);
+  target.id = 'id' + id;
+  target._currentIDStyle = style;
+}
+
+var measurementReady = false;
+requestAnimationFrame(function() {
+  var styleRule = document.styleSheets[0].rules[2].style;
+  styleRule.{{PROPERTY_JAVASCRIPT_NAME}} = keyframeValues[1];
+  requestAnimationFrame(function() {
+    styleRule.{{PROPERTY_JAVASCRIPT_NAME}} = keyframeValues[0];
+    measurementReady = true;
+  });
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: {{PROPERTY_NAME}} 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-chaining-by-updating-class.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-chaining-by-updating-class.html
new file mode 100644
index 00000000000..e61ccea7269
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-chaining-by-updating-class.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+var keyframeValues = [{{PROPERTY_VALUES}}];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  target.style.transitionDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+  target.addEventListener('transitionend', restartTransition);
+}
+
+function restartTransition(event) {
+  event.target._keyframe ^= 1;
+  event.target.className = 'keyframe' + event.target._keyframe;
+  event.target.style.removeProperty('transition-delay');
+}
+
+var measurementReady = false;
+requestAnimationFrame(function() {
+  var styleRule = document.styleSheets[0].rules[2].style;
+  styleRule.{{PROPERTY_JAVASCRIPT_NAME}} = keyframeValues[1];
+  requestAnimationFrame(function() {
+    styleRule.{{PROPERTY_JAVASCRIPT_NAME}} = keyframeValues[0];
+    measurementReady = true;
+  });
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: {{PROPERTY_NAME}} 1000ms linear;
+}
+.keyframe0 {
+  {{START}};
+}
+.keyframe1 {
+  {{END}};
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-chaining-by-updating-inline-style.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-chaining-by-updating-inline-style.html
new file mode 100644
index 00000000000..bbe2c3de8ad
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-chaining-by-updating-inline-style.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+var keyframeValues = [{{PROPERTY_VALUES}}];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  target.style.transitionDelay = (-i / N * duration) + 'ms';
+  container.appendChild(target);
+  target.addEventListener('transitionend', restartTransition);
+}
+
+function restartTransition(event) {
+  event.target._keyframe ^= 1;
+  event.target.style.{{PROPERTY_JAVASCRIPT_NAME}} = keyframeValues[event.target._keyframe];
+  event.target.style.removeProperty('transition-delay');
+}
+
+var measurementReady = false;
+requestAnimationFrame(function() {
+  var styleRule = document.styleSheets[0].rules[2].style;
+  styleRule.{{PROPERTY_JAVASCRIPT_NAME}} = keyframeValues[1];
+  requestAnimationFrame(function() {
+    styleRule.{{PROPERTY_JAVASCRIPT_NAME}} = keyframeValues[0];
+    measurementReady = true;
+  });
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: {{PROPERTY_NAME}} 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-triggering-by-inserting-new-element.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-triggering-by-inserting-new-element.html
new file mode 100644
index 00000000000..24955650bea
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-triggering-by-inserting-new-element.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+var stash = {SHOW: [], HIDE: []};
+var targets = [];
+
+for (var i = 0; i < N; i++) {
+  stash.HIDE.push(document.createElement('hide'));
+  var show = document.createElement('show');
+  container.appendChild(show);
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startTransition(target, fastForward) {
+  var state = target.previousSibling;
+  stash[state.tagName].push(state);
+  state.remove();
+  var newState = state.tagName == 'SHOW' ? stash.HIDE.pop() : stash.SHOW.pop();
+  container.insertBefore(newState, target);
+  target.style.transitionDelay = -fastForward + 'ms';
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var step = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    step = Math.max(targetStep - N, step);
+    for (; step < targetStep; step++) {
+      startTransition(targets[step % N], elapsed - (step / N * duration));
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: {{PROPERTY_NAME}} 1000ms linear;
+}
+show + target {
+  {{END}};
+}
+hide + target {
+  {{START}};
+}
+show, hide {
+  display: none;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-triggering-by-inserting-style.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-triggering-by-inserting-style.html
new file mode 100644
index 00000000000..2830af3769f
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-triggering-by-inserting-style.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+var targets = [];
+var styles = [];
+var keyframeValues = [{{PROPERTY_VALUES}}];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 0;
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function addNewClassStyle(step) {
+  // Clean up overwritten styles.
+  var i = 0;
+  for (; i < styles.length && styles[i].lastStep < step; i++) {
+    styles[i].style.remove();
+  }
+  styles.splice(0, i);
+
+  var style = document.createElement('style');
+  var className = 'style' + step + 'keyframe';
+  style.textContent = '.' + className + '0 { {{PROPERTY_NAME}}: ' + keyframeValues[0] + '; }\n';
+  style.textContent += '.' + className + '1 { {{PROPERTY_NAME}}: ' + keyframeValues[1] + '; }\n';
+  container.appendChild(style);
+  styles.push({
+    style: style,
+    lastStep: step + N,
+  });
+
+  return className;
+}
+
+function startTransitions(startingTargets, startStep, endStep) {
+  var newClassName = addNewClassStyle(startStep, endStep);
+  startingTargets.forEach(function(startInfo) {
+    startInfo.target._keyframe ^= 1;
+    startInfo.target.className = newClassName + startInfo.target._keyframe;
+    startInfo.target.style.transitionDelay = -startInfo.fastForward + 'ms';
+  });
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var previousStep = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    var restartingTargets = [];
+    for (var step = Math.max(targetStep - N, previousStep); step < targetStep; step++) {
+      var stepStartTime = step / N * duration;
+      restartingTargets.push({
+        target: targets[step % N], 
+        fastForward: elapsed - stepStartTime,
+      });
+    }
+    startTransitions(restartingTargets, targetStep);
+    previousStep = targetStep;
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: {{PROPERTY_NAME}} 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-triggering-by-updating-class.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-triggering-by-updating-class.html
new file mode 100644
index 00000000000..3336a6fc62e
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-triggering-by-updating-class.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+var targets = [];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 1;
+  target.className = 'keyframe' + target._keyframe;
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startTransition(target, fastForward) {
+  target._keyframe ^= 1;
+  target.className = 'keyframe' + target._keyframe;
+  target.style.transitionDelay = -fastForward + 'ms';
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var step = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    step = Math.max(targetStep - N, step);
+    for (; step < targetStep; step++) {
+      startTransition(targets[step % N], elapsed - (step / N * duration));
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: {{PROPERTY_NAME}} 1000ms linear;
+}
+.keyframe0 {
+  {{START}};
+}
+.keyframe1 {
+  {{END}};
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-triggering-by-updating-inline-style.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-triggering-by-updating-inline-style.html
new file mode 100644
index 00000000000..b941c863655
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/css-transitions-staggered-triggering-by-updating-inline-style.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+var targets = [];
+var keyframeValues = [{{PROPERTY_VALUES}}];
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  target._keyframe = 1;
+  target.style.{{PROPERTY_JAVASCRIPT_NAME}} = keyframeValues[target._keyframe];
+  container.appendChild(target);
+  targets.push(target);
+}
+
+function startTransition(target, fastForward) {
+  target._keyframe ^= 1;
+  target.style.{{PROPERTY_JAVASCRIPT_NAME}} = keyframeValues[target._keyframe];
+  target.style.transitionDelay = -fastForward + 'ms';
+}
+
+requestAnimationFrame(function(time) {
+  window.measurementReady = true;
+  var startTime = time - duration;
+  var step = 0;
+
+  function staggeredStart(time) {
+    var elapsed = time - startTime;
+    var targetStep = Math.floor(N * elapsed / duration);
+    step = Math.max(targetStep - N, step);
+    for (; step < targetStep; step++) {
+      startTransition(targets[step % N], elapsed - (step / N * duration));
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  staggeredStart(time);
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: lightgoldenrodyellow;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: magenta;
+  transition: {{PROPERTY_NAME}} 1000ms linear;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/set-current-time-request-animation-frame-pow3.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/set-current-time-request-animation-frame-pow3.html
new file mode 100644
index 00000000000..be56536582f
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/set-current-time-request-animation-frame-pow3.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+var players = [];
+var prevTime = null;
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+
+  var animation = new Animation(target, [
+    {{{START}}},
+    {{{END}}},
+  ], {
+    duration: duration,
+    iterations: Infinity,
+  });
+  var player = document.timeline.play(animation);
+  player.pause();
+  players.push(player);
+}
+
+function setCurrentTime(time) {
+  if (prevTime == null) {
+    prevTime = time;
+  }
+  var delta = time - prevTime;
+  players.forEach(function(player) {
+    player.currentTime += delta;
+  });
+  prevTime = time;
+
+  requestAnimationFrame(setCurrentTime);
+}
+requestAnimationFrame(setCurrentTime);
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/web-animations-many-keyframes.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/web-animations-many-keyframes.html
new file mode 100644
index 00000000000..023213fcbb3
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/web-animations-many-keyframes.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<container id="container"></container>
+<script>
+var N = {{NUM_ELEMENTS}};
+var numKeyframes = 500;
+var duration = 4000;
+
+function makeKeyframes(numKeyframes, width, height) {
+    var keyframes = [];
+    for (var i = 0; i < numKeyframes + 1; i++) {
+        var fraction = i / numKeyframes;
+        var t = fraction * 2 * Math.PI;
+        var x = Math.cos(t) - Math.pow(Math.cos(4*t), 3);
+        x = ((x/4 + 1/2) * width).toFixed(5);
+        var y = Math.pow(Math.sin(4*t), 3) - Math.sin(2*t);
+        y = ((y/4 + 1/2) * height).toFixed(5);
+        keyframes.push({transform: 'translate(' + x + 'px, ' + y + 'px)'});
+    }
+    return keyframes;
+}
+
+var keyframes = makeKeyframes(numKeyframes, 550, 800);
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  target.animate(keyframes, {duration: duration, iterations: Infinity, delay: -duration/10 * i/N});
+}
+
+requestAnimationFrame(function() {
+  measurementReady = true;
+});
+</script>
+
+<style>
+body {
+  margin: 0;
+  overflow: hidden;
+}
+target {
+  position: absolute;
+  border: 5px solid green;
+  border-radius: 100%;
+}
+container {
+  position: absolute;
+  width: 550px;
+  height: 800px;
+  background-color: lightgrey;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/web-animations-simultaneous.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/web-animations-simultaneous.html
new file mode 100644
index 00000000000..98667cc2109
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/web-animations-simultaneous.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+var targets = [];
+
+function startAnimation(element) {
+  element.animate([
+    {{{START}}},
+    {{{END}}},
+  ], duration);
+}
+
+function startAllAnimations() {
+  for (var i in targets)
+    startAnimation(targets[i]);
+  setTimeout(startAllAnimations, duration);
+}
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  targets.push(target);
+}
+
+startAllAnimations();
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/web-animations-staggered-chaining.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/web-animations-staggered-chaining.html
new file mode 100644
index 00000000000..dcfe4b09342
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/web-animations-staggered-chaining.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+
+function startAnimation(element) {
+  var player = element.animate([
+    {{{START}}},
+    {{{END}}},
+  ], duration);
+  player.onfinish = function() {
+    startAnimation(element);
+  }
+}
+
+function addElement() {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  startAnimation(target);
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    elapsed = t - base;
+    for (; i < N * elapsed / duration; i++) {
+      addElement();
+    }
+    if (i < N) {
+      requestAnimationFrame(staggeredStart);
+    } else {
+      window.measurementReady = true;
+    }
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/web-animations-staggered-infinite-iterations.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/web-animations-staggered-infinite-iterations.html
new file mode 100644
index 00000000000..518c3f5581d
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/web-animations-staggered-infinite-iterations.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+
+function startAnimation(element, delay) {
+  target.animate([
+    {{{START}}},
+    {{{END}}},
+  ], {
+    duration: duration,
+    iterations: Infinity,
+    delay: delay,
+  });
+}
+
+for (var i = 0; i < N; i++) {
+  var target = document.createElement('target');
+  container.appendChild(target);
+  startAnimation(target, -i * (duration / N));
+}
+
+requestAnimationFrame(function() {
+  window.measurementReady = true;
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/web-animations-staggered-triggering.html b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/web-animations-staggered-triggering.html
new file mode 100644
index 00000000000..599ed8f376e
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/BigBenchmarks_templates/web-animations-staggered-triggering.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<script src="resources/web-animations-api-check.js"></script>
+<container id="container"></container>
+<script>
+var N = {{NUM_ELEMENTS}};
+var duration = 1000;
+
+var targets = [];
+function startAnimation(i) {
+  if (!targets[i]) {
+    targets[i] = document.createElement('target');
+    container.appendChild(targets[i]);
+  }
+  targets[i].animate([
+    {{{START}}},
+    {{{END}}},
+  ], duration);
+}
+
+requestAnimationFrame(function(t) {
+  var base = t;
+  var i = 0;
+
+  function staggeredStart(t) {
+    var elapsed = t - base;
+    for (; i < N && i < N * elapsed / duration; i++) {
+      startAnimation(i);
+    }
+    if (elapsed > duration) {
+      window.measurementReady = true;
+      i = 0;
+      base = t - (elapsed % duration);
+      elapsed = 0;
+    }
+    requestAnimationFrame(staggeredStart);
+  }
+  requestAnimationFrame(staggeredStart);
+});
+</script>
+
+<style>
+target {
+  display: inline-block;
+  width: 9px; height: 9px;
+  background: orange;
+}
+body {
+  margin: 0;
+  overflow: hidden;
+}
+container {
+  display: flex;
+  flex-flow: row wrap;
+  width: 550px;
+  height: 800px;
+  background: magenta;
+}
+</style>
diff --git a/PerformanceTests/Animation/PerfWeek/generate-variations.py b/PerformanceTests/Animation/PerfWeek/generate-variations.py
new file mode 100755
index 00000000000..53755384fda
--- /dev/null
+++ b/PerformanceTests/Animation/PerfWeek/generate-variations.py
@@ -0,0 +1,149 @@
+#! /usr/bin/env python
+
+import os
+import shutil
+
+
+SOURCE_DIR = 'BigBenchmarks'
+TEMPLATE_DIR = 'BigBenchmarks_templates'
+GENERATED_DIR = 'BigBenchmarks_generated'
+
+SOURCE_START = 'opacity: 0'
+SOURCE_END = 'opacity: 1'
+
+TEMPLATE_START = '{{START}}'
+TEMPLATE_END = '{{END}}'
+TEMPLATE_PROPERTY_NAME = '{{PROPERTY_NAME}}'
+TEMPLATE_PROPERTY_JAVASCRIPT_NAME = '{{PROPERTY_JAVASCRIPT_NAME}}'
+TEMPLATE_PROPERTY_VALUES = '{{PROPERTY_VALUES}}'
+TEMPLATE_NUM_ELEMENTS = '{{NUM_ELEMENTS}}'
+
+GENERATED_NUM_ELEMENTS = '1000'
+
+class Variation(object):
+    def __init__(self, name, start, end, css_anim, css_transition, web_anim):
+        self.name = name
+        self.start = start
+        self.end = end
+        self.property_name = start[0:start.index(':')]
+        self.property_values = "'" + start[start.index(':')+2:] + "', '" + end[end.index(':')+2:] + "'"
+        self.css_anim = css_anim
+        self.css_transition = css_transition
+        self.web_anim = web_anim
+
+
+VARIATIONS = [
+    Variation('-compositor-transform', 'transform: rotate(360deg)', 'transform: rotate(0deg)', True, True, True),
+    Variation('-mainthread-transform', 'transform: rotate(360deg) translate(1%)', 'transform: rotate(0deg) translate(0%)', True, True, True),
+    Variation('-opacity', 'opacity: 0', 'opacity: 1', True, True, True),
+    Variation('-px-height', 'height: 20px', 'height: 10px', True, True, True),
+    Variation('-em-height', 'height: 8em', 'height: 4em', False, False, True),
+    Variation('-inherit-height', 'height: 20px', 'height: inherit', False, False, True),
+    Variation('-specific-color', 'background-color: pink', 'background-color: lime', True, True, True),
+    Variation('-current-color', 'background-color: pink', 'background-color: currentColor', False, False, True)
+]
+
+def optionally_quote_property(property, is_web_anim):
+    if not is_web_anim:
+        return property
+    return property.replace(": ", ": '").replace('-color', 'Color') + "'"
+
+def never_quote_property(property, is_web_anim):
+    if not is_web_anim:
+        return property
+    return property.replace('-color', 'Color')
+
+def prepare():
+    try:
+        shutil.rmtree(TEMPLATE_DIR)
+    except:
+        pass
+    os.mkdir(TEMPLATE_DIR)
+
+    try:
+        shutil.rmtree(GENERATED_DIR)
+    except:
+        pass
+    os.mkdir(GENERATED_DIR)
+
+
+def read_candidates():
+    return os.listdir(SOURCE_DIR)
+
+
+def is_css_animation(candidate):
+    return 'css-animation' in candidate
+
+def is_css_transition(candidate):
+    return 'css-transition' in candidate
+
+def is_web_animation(candidate):
+    return 'web-animation' in candidate or 'current-time' in candidate
+
+
+def process(candidate):
+    is_web_anim = is_web_animation(candidate)
+
+    with open(SOURCE_DIR + '/' + candidate, 'r') as source_file:
+        content = source_file.readlines()
+
+    template_name = TEMPLATE_DIR + '/' + candidate
+    with open(template_name, 'w') as template_file:
+        for line in content:
+            # In web animations, numeric values for properties may or may not be quoted.
+            template_file.write(line
+                # remove the .0 in set-current-time-request-animation-frame-pow3.html
+                .replace(".0'", "'")
+                # remove the .4 in css-animations-staggered-triggering-by-inserting-style-element.html
+                .replace("0.4;", "0;")
+                .replace('var N = 400;', 'var N = '+TEMPLATE_NUM_ELEMENTS+';')
+                .replace('var N = 500;', 'var N = '+TEMPLATE_NUM_ELEMENTS+';')
+                .replace('var N = 1000;', 'var N = '+TEMPLATE_NUM_ELEMENTS+';')
+                .replace(optionally_quote_property(SOURCE_START, is_web_anim), TEMPLATE_START)
+                .replace(optionally_quote_property(SOURCE_END, is_web_anim), TEMPLATE_END)
+                .replace(SOURCE_START, TEMPLATE_START)
+                .replace(SOURCE_END, TEMPLATE_END)
+                .replace('transition: opacity', 'transition: '+TEMPLATE_PROPERTY_NAME)
+                .replace('style.opacity', 'style.'+TEMPLATE_PROPERTY_JAVASCRIPT_NAME)
+                .replace('styleRule.opacity', 'styleRule.'+TEMPLATE_PROPERTY_JAVASCRIPT_NAME)
+                .replace(" { opacity: ' + keyframeValues[", " { "+TEMPLATE_PROPERTY_NAME+": ' + keyframeValues[")
+                .replace('keyframeValues = [0, 1]', 'keyframeValues = ['+TEMPLATE_PROPERTY_VALUES+']'))
+
+    with open(template_name, 'r') as template_file:
+        content = template_file.readlines()
+
+    for variation in VARIATIONS:
+        if (variation.css_anim and is_css_animation(candidate)) or (variation.css_transition and is_css_transition(candidate)) or (variation.web_anim and is_web_animation(candidate)):
+            # drop -pow3 from set-current-time-request-animation-frame-pow3.html
+            generated_name = candidate.replace('-pow3', '').replace('.html', variation.name + '.html')
+
+            # set-current-time-request-animation-frame-pow3.html is currently the only benchmark with pow in its name 
+            generated_name = generated_name.replace('-pow3', '')
+
+            generated_num_elements = GENERATED_NUM_ELEMENTS
+            # inserting-style-element tests often fail with too many elements, e.g. with px-height changing
+            if 'inserting-style-element' in candidate:
+                generated_num_elements = '500'
+            elif 'animations-many-keyframes' in candidate:
+                generated_num_elements = '400'
+
+            # can use jinja2 when requirements become more complex
+            with open(GENERATED_DIR + '/' + generated_name, 'w') as generated_file:
+                for line in content:
+                    generated_file.write(line
+                        .replace(TEMPLATE_NUM_ELEMENTS, generated_num_elements)
+                        .replace(TEMPLATE_START, optionally_quote_property(variation.start, is_web_anim))
+                        .replace(TEMPLATE_END, optionally_quote_property(variation.end, is_web_anim))
+                        .replace(TEMPLATE_PROPERTY_NAME, never_quote_property(variation.property_name, is_web_anim))
+                        .replace(TEMPLATE_PROPERTY_JAVASCRIPT_NAME, never_quote_property(variation.property_name, True))
+                        .replace(TEMPLATE_PROPERTY_VALUES, variation.property_values))
+
+prepare()
+candidates = read_candidates()
+for candidate in candidates:
+    if is_css_animation(candidate) or is_css_transition(candidate) or is_web_animation(candidate):
+        process(candidate)
+    elif candidate == 'resources':
+        shutil.copytree(SOURCE_DIR + '/' + candidate, GENERATED_DIR + '/' + candidate)
+    else:
+        print('Skipping ' + candidate)
diff --git a/PerformanceTests/Animation/PerfWeek/run-big-benchmarks.py b/PerformanceTests/Animation/PerfWeek/run-big-benchmarks.py
index 9753fb3ab5a..073233b0d81 100755
--- a/PerformanceTests/Animation/PerfWeek/run-big-benchmarks.py
+++ b/PerformanceTests/Animation/PerfWeek/run-big-benchmarks.py
@@ -27,7 +27,7 @@ def ensureSmoothnessPerfWeekBenchmark():
   subprocess.call(['cp', resource_perf_week_page_set_path, smoothness_perf_week_page_set_path])
 
 def refreshPerfWeekFolder():
-  source = perf_week_path + '/BigBenchmarks'
+  source = perf_week_path + '/BigBenchmarks_generated'
   destination = page_sets_path + '/perf_week'
   subprocess.call(['rm', '-r', destination])
   subprocess.call(['cp', '-r', source, destination])