Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(223)

Unified Diff: third_party/WebKit/PerformanceTests/Paint/color-changes.html

Issue 2488913002: Add lifecycle update microbenchmarks (Closed)
Patch Set: Created 4 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | third_party/WebKit/PerformanceTests/Paint/paint-offset-changes.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/PerformanceTests/Paint/color-changes.html
diff --git a/third_party/WebKit/PerformanceTests/Paint/color-changes.html b/third_party/WebKit/PerformanceTests/Paint/color-changes.html
new file mode 100644
index 0000000000000000000000000000000000000000..3ed433d400e5e3a85eb2a41928f948faa0097a1c
--- /dev/null
+++ b/third_party/WebKit/PerformanceTests/Paint/color-changes.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<body>
+<script src="../resources/runner.js"></script>
+<style>
+ span {
+ background-color: white;
+ 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, createElementCallback) {
+ for (var child = 0; child < arity; child++) {
+ var element = document.createElement('span');
+ parent.appendChild(element);
+ createElementCallback(element, depth);
+ if (depth > 1)
+ buildTree(element, depth - 1, arity, createElementCallback);
+ }
+}
+
+// Build a tall tree (depth=10) that is skinny (arity=2). A middle layer of
+// the tree should have the changeColor class.
+buildTree(document.body, 11, 2, function(element, depth) {
+ if (depth == 5)
+ element.setAttribute('class', 'changeColor');
+});
+
+// Build a short tree (depth=6) that is fat (arity=4). A middle layer of
+// the tree should have the changeColor class.
+buildTree(document.body, 6, 4, function(element, depth) {
+ 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: 5,
+});
+</script>
+</body>
« no previous file with comments | « no previous file | third_party/WebKit/PerformanceTests/Paint/paint-offset-changes.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698