VT: Add two blink_perf tests, and add blink_perf.view_transitions ben…

…chmark First test captures a very large element (the test takes about 1s on my linux machine) The second text, captures a lot of small elements (the test takes about 200ms on my linux machine) R=bokan@chromium.org, khushalsagar@chromium.org Bug: 1407677 Change-Id: I9d07de9911ac88ec8db059c4606d9d73dbaedfa9 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4232959 Reviewed-by: John Chen <johnchen@chromium.org> Commit-Queue: Vladimir Levin <vmpstr@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Reviewed-by: Khushal Sagar <khushalsagar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1102916}
chromium · Feb 8, 2023 · 6f48d3d · 6f48d3d
1 parent 88bc604
commit 6f48d3d
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 0 deletions.
diff --git a/third_party/blink/perf_tests/view_transitions/OWNERS b/third_party/blink/perf_tests/view_transitions/OWNERS
@@ -0,0 +1,3 @@
+bokan@chromium.org
+khushalsagar@chromium.org
+vmpstr@chromium.org
diff --git a/third_party/blink/perf_tests/view_transitions/huge_element_capture.html b/third_party/blink/perf_tests/view_transitions/huge_element_capture.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+html { view-transition-name: unset }
+#target {
+  height: 100000px;
+  width: 1000px;
+  position: absolute;
+  background: lightblue;
+  contain: layout;
+  view-transition-name: target;
+}
+.left {
+  left: 8px;
+}
+.right {
+  right: 8px;
+}
+::view-transition-group(*) {
+  animation-duration: 0s;
+}
+</style>
+<script src="../resources/runner.js"></script>
+<script>
+function startTest() {
+  var transition;
+  PerfTestRunner.measureFrameTime({
+      description: "Measures performance starting/finishing a transition with a large element",
+      setup: () => {
+        transition = document.startViewTransition(() => {
+          target.classList.toggle("left");
+          target.classList.toggle("right");
+        });
+      },
+      run: async () => { await transition.finished },
+      done: () => {}
+  });
+}
+</script>
+</head>
+<body onload="startTest()">
+<div id=target class=left>This is a div!</div>
+<div id="log"></div>
+</body></html>
diff --git a/third_party/blink/perf_tests/view_transitions/many_small_elements_capture.html b/third_party/blink/perf_tests/view_transitions/many_small_elements_capture.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+html { view-transition-name: unset }
+#container > * {
+  contain: layout;
+  display: inline-block;
+  border: 1px solid black;
+  width: 20px;
+  height: 20px;
+}
+.green > * {
+  background: green;
+}
+.blue > * {
+  background: blue;
+}
+::view-transition-group(*) {
+  animation-duration: 0s;
+}
+</style>
+<script src="../resources/runner.js"></script>
+
+<script>
+const kCount = 1500;
+
+function startTest() {
+  var transition;
+  for (let i = 0; i < kCount; i++) {
+    let e = document.createElement("div");
+    e.viewTransitionName = "e" + i;
+    container.appendChild(e);
+  }
+  PerfTestRunner.measureFrameTime({
+      description: "Measures performance starting/finishing a transition with many small elements",
+      setup: () => {
+        transition = document.startViewTransition(() => {
+          container.classList.toggle("green");
+          container.classList.toggle("blue");
+        });
+      },
+      run: async () => { await transition.finished },
+      done: () => {}
+  });
+}
+</script>
+</head>
+<body onload="startTest()">
+<div id=container class=green></div>
+<div id="log"></div>
+</body></html>
diff --git a/tools/perf/benchmark.csv b/tools/perf/benchmark.csv
@@ -6,6 +6,7 @@ UNSCHEDULED_ad_frames.iframe,lbrady@google.com,Blink>FencedFrames,https://tinyur
 UNSCHEDULED_blink_perf.base64,csharrison@chromium.org,Blink>Internals>WTF,https://bit.ly/blink-perf-benchmarks,all
 UNSCHEDULED_blink_perf.performance_apis,yoavweiss@chromium.org,Blink>PerformanceAPIs,https://bit.ly/blink-perf-benchmarks,all
 UNSCHEDULED_blink_perf.service_worker,"shimazu@chromium.org, falken@chromium.org, ting.shao@intel.com",Blink>ServiceWorker,https://bit.ly/blink-perf-benchmarks,
+UNSCHEDULED_blink_perf.view_transitions,"bokan@chromium.org, khushalsagar@chromium.org, vmpstr@chromium.org",Blink>ViewTransitions,https://bit.ly/blink-perf-benchmarks,all
 UNSCHEDULED_loading.mbi,blink-isolation-dev@chromium.org,Blink>Internals>Modularization,https://bit.ly/loading-benchmarks,many_agents
 UNSCHEDULED_v8.loading_desktop,"cbruni@chromium.org, tmrts@chromium.org, almuthanna@chromium.org",Blink>JavaScript,https://bit.ly/system-health-v8-benchmarks,"2016,2018,2019,2020,emerging_market,health_check,international,javascript_heavy"
 UNSCHEDULED_v8.loading_mobile,"cbruni@chromium.org, leszeks@chromium.org, tmrts@chromium.org",Blink>JavaScript,https://bit.ly/system-health-v8-benchmarks,"2016,2018,2019,2020,emerging_market,health_check,international,javascript_heavy"

diff --git a/tools/perf/benchmarks/blink_perf.py b/tools/perf/benchmarks/blink_perf.py
@@ -794,3 +794,17 @@ def Name(cls):
   def SetExtraBrowserOptions(self, options):
     options.AppendExtraBrowserArgs(
         ['--enable-unsafe-webgpu', '--enable-features=V8TurboFastApiCalls'])
+
+
+@benchmark.Info(emails=[
+    'bokan@chromium.org', 'khushalsagar@chromium.org', 'vmpstr@chromium.org'
+],
+                component='Blink>ViewTransitions',
+                documentation_url='https://bit.ly/blink-perf-benchmarks')
+class BlinkPerfViewTransitions(_BlinkPerfBenchmark):
+  SUBDIR = 'view_transitions'
+  TAGS = _BlinkPerfBenchmark.TAGS + ['all']
+
+  @classmethod
+  def Name(cls):
+    return 'UNSCHEDULED_blink_perf.view_transitions'