| Index: third_party/WebKit/PerformanceTests/TestData/color-changes-measure-frame-time.html
|
| diff --git a/third_party/WebKit/PerformanceTests/TestData/color-changes-measure-frame-time.html b/third_party/WebKit/PerformanceTests/TestData/color-changes-measure-frame-time.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..a55b2475db72996c102005be71c7593bcee80150
|
| --- /dev/null
|
| +++ b/third_party/WebKit/PerformanceTests/TestData/color-changes-measure-frame-time.html
|
| @@ -0,0 +1,84 @@
|
| +<!DOCTYPE html>
|
| +<body>
|
| +<script src="../resources/runner.js"></script>
|
| +<style>
|
| + span {
|
| + padding: 1px;
|
| + }
|
| + .changeColor {
|
| + background-color: green;
|
| + }
|
| +</style>
|
| +<script>
|
| +// This test measures the lifecycle update performance of changing background
|
| +// colors in large trees.
|
| +
|
| +function buildTree(parent, depth, arity, tagNameCallback, createElementCallback) {
|
| + for (var child = 0; child < arity; child++) {
|
| + var element = document.createElement(tagNameCallback(depth));
|
| + parent.appendChild(element);
|
| + createElementCallback(element, depth);
|
| + if (depth > 1)
|
| + buildTree(element, depth - 1, arity, tagNameCallback, createElementCallback);
|
| + }
|
| +}
|
| +
|
| +// Build a tall tree that is skinny. A middle layer of
|
| +// the tree should have the changeColor class.
|
| +buildTree(document.body, 15, 2,
|
| + function(depth) {
|
| + // Use divs at upper levels to avoid too much layout time.
|
| + return depth > 9 ? 'div' : 'span';
|
| + },
|
| + function(element, depth) {
|
| + element.style.backgroundColor = 'green';
|
| + if (depth == 5)
|
| + element.setAttribute('class', 'changeColor');
|
| + }
|
| +);
|
| +
|
| +// Build a short tree that is fat. A middle layer of
|
| +// the tree should have the changeColor class.
|
| +buildTree(document.body, 6, 7,
|
| + function(depth) {
|
| + // Use divs at upper levels to avoid too much layout time.
|
| + return depth > 4 ? 'div' : 'span';
|
| + },
|
| + function(element, depth) {
|
| + element.style.backgroundColor = 'orange';
|
| + if (depth == 3)
|
| + element.setAttribute('class', 'changeColor');
|
| + }
|
| +);
|
| +
|
| +var runCount = 0;
|
| +var elementsToChange = document.getElementsByClassName('changeColor');
|
| +var colors = [
|
| + "rgb(128, 18, 237)",
|
| + "rgb(191, 1, 191)",
|
| + "rgb(237, 18, 128)",
|
| + "rgb(255, 64, 64)",
|
| + "rgb(237, 127, 18)",
|
| + "rgb(191, 191, 1)",
|
| + "rgb(128, 237, 18)",
|
| + "rgb(64, 255, 64)",
|
| + "rgb(18, 237, 127)",
|
| + "rgb(1, 191, 191)",
|
| + "rgb(18, 128, 237)",
|
| + "rgb(64, 64, 255)"
|
| +];
|
| +
|
| +PerfTestRunner.measureFrameTime({
|
| + run: function() {
|
| + runCount++;
|
| + var newColor = colors[runCount % colors.length];
|
| + for (var index = 0; index < elementsToChange.length; index++)
|
| + elementsToChange[index].style.backgroundColor = newColor;
|
| + },
|
| + warmUpCount: 3,
|
| + iterationCount: 10,
|
| + tracingCategories: 'blink',
|
| + traceEventsToMeasure: ['FrameView::prePaint', 'FrameView::paintTree']
|
| +});
|
| +</script>
|
| +</body>
|
|
|
Chromium Code Reviews
Issue 2819343002:
Support tracing metrics for measureTime & measureFrameTime method in blink_perf (Closed)
