Skip to content

GitLab

T
tangled
Commit 5e4dbee6 authored by Andres Calderon Jaramillo's avatar Andres Calderon Jaramillo Committed by Commit Bot
Browse files
Options

Create a story to detect blur backdrop filter regressions. 

This CL creates a story which consists of a JS animation in which a
group of red squares rotates in the background while three
semi-transparent foregrounds move on top (with some rotation,
translation, and resizing going on). The foregrounds apply a blur
filter.

The motivation is that in Chrome OS, we were having problems with the
launcher animation having a low frame rate. As the launcher is swiped
upwards, it applies a blur on the background. dcastagna@ landed a fix to
improve this significantly (see https://crbug.com/900046). The code used
by the launcher to do the blurring is not unique to Chrome OS, so the
new story should be able to measure regressions in that animation.

For due credit: the story is based on tbuckley@'s example which
reproduced the issue on the web (see
https://codepen.io/anon/pen/MPXYMQ).

Chromebook after reverting bf7c3813 (dcastagna@'s fix) from 96c5b055.

Test: percentage_smooth goes from 90.805% to 36.158% on an eve
Bug: 682082
Change-Id: Ifc4a725a2ba430e7698fccde703d2de4a12db687
Reviewed-on: https://chromium-review.googlesource.com/c/1324240
Commit-Queue: Andres Calderon Jaramillo <andrescj@chromium.org>
Reviewed-by: default avatarAnnie Sullivan <sullivan@chromium.org>
Reviewed-by: default avatarVictor Miura <vmiura@chromium.org>
Cr-Commit-Position: refs/heads/master@{#616050}
parent ceeb4f64
Hide whitespace changes
Inline Side-by-side
Showing with 241 additions and 2 deletions
tools/perf/benchmark.csv
View file @ 5e4dbee6
...@@ -42,8 +42,8 @@ power.desktop,brucedawson@chromium.org,,https://bit.ly/power-benchmarks, ...@@ -42,8 +42,8 @@ power.desktop,brucedawson@chromium.org,,https://bit.ly/power-benchmarks,
power.typical_10_mobile,perezju@chromium.org,,https://bit.ly/power-benchmarks, power.typical_10_mobile,perezju@chromium.org,,https://bit.ly/power-benchmarks,
rasterize_and_record_micro.partial_invalidation,"vmpstr@chromium.org, wkorman@chromium.org",Internals>Compositing>Rasterization,, rasterize_and_record_micro.partial_invalidation,"vmpstr@chromium.org, wkorman@chromium.org",Internals>Compositing>Rasterization,,
rasterize_and_record_micro.top_25,"vmpstr@chromium.org, wkorman@chromium.org",Internals>Compositing>Rasterization,, rasterize_and_record_micro.top_25,"vmpstr@chromium.org, wkorman@chromium.org",Internals>Compositing>Rasterization,,
rendering.desktop,"sadrul@chromium.org, vmiura@chromium.org",Internals>GPU>Metrics,https://bit.ly/rendering-benchmarks,"gpu_rasterization,image_decoding,key_desktop_move,maps,repaint_desktop,required_webgl,top_real_world_desktop,tough_animation,tough_canvas,tough_compositor,tough_filters,tough_image_decode,tough_path_rendering,tough_pinch_zoom,tough_scheduling,tough_scrolling,tough_texture_upload,tough_webgl,use_fake_camera_device" rendering.desktop,"sadrul@chromium.org, vmiura@chromium.org",Internals>GPU>Metrics,https://bit.ly/rendering-benchmarks,"backdrop_filter,gpu_rasterization,image_decoding,key_desktop_move,maps,repaint_desktop,required_webgl,top_real_world_desktop,tough_animation,tough_canvas,tough_compositor,tough_filters,tough_image_decode,tough_path_rendering,tough_pinch_zoom,tough_scheduling,tough_scrolling,tough_texture_upload,tough_webgl,use_fake_camera_device"
rendering.mobile,"sadrul@chromium.org, vmiura@chromium.org",Internals>GPU>Metrics,https://bit.ly/rendering-benchmarks,"fastpath,gpu_rasterization,image_decoding,key_hit_test,key_idle_power,key_noop,key_silk,maps,motionmark,pathological_mobile_sites,polymer,required_webgl,simple_mobile_sites,top_real_world_desktop,top_real_world_mobile,tough_animation,tough_canvas,tough_compositor,tough_filters,tough_image_decode,tough_path_rendering,tough_scheduling,tough_scrolling,tough_texture_upload,tough_webgl,use_fake_camera_device" rendering.mobile,"sadrul@chromium.org, vmiura@chromium.org",Internals>GPU>Metrics,https://bit.ly/rendering-benchmarks,"backdrop_filter,fastpath,gpu_rasterization,image_decoding,key_hit_test,key_idle_power,key_noop,key_silk,maps,motionmark,pathological_mobile_sites,polymer,required_webgl,simple_mobile_sites,top_real_world_desktop,top_real_world_mobile,tough_animation,tough_canvas,tough_compositor,tough_filters,tough_image_decode,tough_path_rendering,tough_scheduling,tough_scrolling,tough_texture_upload,tough_webgl,use_fake_camera_device"
resource_sizes,"agrieve@chromium.org, rnephew@chromium.org, perezju@chromium.org",,, resource_sizes,"agrieve@chromium.org, rnephew@chromium.org, perezju@chromium.org",,,
sizes (linux),thestig@chromium.org,thomasanderson@chromium.org,Internals>PlatformIntegration, sizes (linux),thestig@chromium.org,thomasanderson@chromium.org,Internals>PlatformIntegration,
sizes (mac),tapted@chromium.org,,, sizes (mac),tapted@chromium.org,,,
......
tools/perf/page_sets/backdrop_filter_cases/blur_rotating_background.html 0 → 100644
View file @ 5e4dbee6
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
<style type="text/css">
body {
margin: 0;
overflow: hidden;
}
.box {
background-color: red;
display: inline-block;
margin: 5px;
height: 100px;
width: 100px;
}
/* Note the use of 'will-change' for all the background and foreground divs.
This is to make it explicit that we want a separate compositor layer for each
of these divs. */
#rotating-background {
left: 0px;
top: 0px;
width: 800px;
height: 600px;
position: absolute;
will-change: transform;
}
.foreground {
backdrop-filter: blur(20px);
background-color: rgba(0, 0, 100, 20%);
position: absolute;
}
#left-to-right-foreground {
left: 0px;
top: 0px;
width: 0px;
height: 0px;
will-change: left, width, height;
}
#top-to-bottom-foreground {
left: 0px;
top: 0px;
width: 0px;
height: 0px;
will-change: top, width, height;
}
#rotating-foreground {
left: 0px;
top: 0px;
width: 800px;
height: 600px;
will-change: transform;
font-size: 72px;
}
</style>
<script type="text/javascript">
// There is a "warm-up" phase where we request warmUpFrames animation frames
// prior to setting readyToStart = true. The reason is that we were observing
// some long WaitForAck calls in the GPU process in the win-10-perf bots. This
// suggested some initial setup cost (like shader compilation).
var warmUp = true;
var readyToStart = false;
var animationDone = false;
var frame = 0;
const numFrames = 200;
const warmUpFrames = 25;
function animateRotatingBackground(frame) {
const background = document.getElementById("rotating-background");
background.style.transform = "rotate(" + frame + "deg)";
}
function animateLeftToRightForeground(frame) {
const foreground = document.getElementById("left-to-right-foreground");
if (frame < numFrames / 2) {
foreground.style.left = (frame * 2 * 100 / numFrames) + "px";
foreground.style.width = (frame * 2 * 100 / numFrames) + "%";
foreground.style.height = (frame * 2 * 100 / numFrames) + "%";
} else {
foreground.style.left = ((numFrames - frame) * 2 * 100 / numFrames) + "px";
foreground.style.width = ((numFrames - frame) * 2 * 100 / numFrames) + "%";
foreground.style.height = ((numFrames - frame) * 2 * 100 / numFrames) + "%";
}
}
function animateTopToBottomForeground(frame) {
const foreground = document.getElementById("top-to-bottom-foreground");
if (frame < numFrames / 2) {
foreground.style.top = (frame * 2 * 100 / numFrames) + "px";
foreground.style.width = (frame * 2 * 100 / numFrames) + "%";
foreground.style.height = (frame * 2 * 100 / numFrames) + "%";
} else {
foreground.style.top = ((numFrames - frame) * 2 * 100 / numFrames) + "px";
foreground.style.width = ((numFrames - frame) * 2 * 100 / numFrames) + "%";
foreground.style.height = ((numFrames - frame) * 2 * 100 / numFrames) + "%";
}
}
function animateRotatingForeground(frame) {
const foreground = document.getElementById("rotating-foreground");
foreground.style.transform = "rotate(" + (frame / 3) + "deg)";
}
function animateOneFrame() {
frame++;
animateRotatingBackground(frame);
animateRotatingForeground(frame);
animateLeftToRightForeground(frame);
animateTopToBottomForeground(frame);
if (warmUp && frame == warmUpFrames) {
warmUp = false;
readyToStart = true;
return;
}
if (frame < numFrames) {
window.requestAnimationFrame(animateOneFrame);
} else {
animationDone = true;
}
}
window.onload = function() {
animateOneFrame();
}
</script>
</head>
<body>
<div id="rotating-background">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="foreground" id="rotating-foreground">
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z A B C D E F G H I J K L M
N O P Q R S T U V W X Y Z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
A B C
</div>
<div class="foreground" id="left-to-right-foreground"></div>
<div class="foreground" id="top-to-bottom-foreground"></div>
</body>
</html>
\ No newline at end of file
tools/perf/page_sets/rendering/backdrop_filter_cases.py 0 → 100644
View file @ 5e4dbee6
# Copyright 2018 The Chromium Authors. All rights reserved.
# Use of this source code is governed by a BSD-style license that can be
# found in the LICENSE file.
from telemetry.page import shared_page_state
from page_sets.rendering import rendering_story
from page_sets.rendering import story_tags
class BackdropFilterPage(rendering_story.RenderingStory):
ABSTRACT_STORY = True
TAGS = [story_tags.BACKDROP_FILTER]
def __init__(self,
page_set,
shared_page_state_class=shared_page_state.SharedPageState,
name_suffix='',
extra_browser_args=None):
super(BackdropFilterPage, self).__init__(
page_set=page_set,
shared_page_state_class=shared_page_state_class,
name_suffix=name_suffix,
extra_browser_args=extra_browser_args)
def RunNavigateSteps(self, action_runner):
super(BackdropFilterPage, self).RunNavigateSteps(action_runner)
action_runner.WaitForJavaScriptCondition('window.readyToStart')
def RunPageInteractions(self, action_runner):
with action_runner.CreateInteraction('LetAnimationRun'):
action_runner.ExecuteJavaScript('animateOneFrame()')
action_runner.WaitForJavaScriptCondition('window.animationDone')
# Why: should hopefully get 60 fps when moving foregrounds blur a rotating
# background.
class BlurRotatingBackgroundPage(BackdropFilterPage):
BASE_NAME = 'blur_rotating_background'
URL = 'file://../backdrop_filter_cases/blur_rotating_background.html'
tools/perf/page_sets/rendering/rendering_stories.py
View file @ 5e4dbee6
...@@ -51,6 +51,11 @@ class RenderingStorySet(story.StorySet): ...@@ -51,6 +51,11 @@ class RenderingStorySet(story.StorySet):
'--use-fake-ui-for-media-stream', '--use-fake-ui-for-media-stream',
] ]
if story_class.TAGS and story_tags.BACKDROP_FILTER in story_class.TAGS:
# Experimental web platform features must be enabled in order for the
# 'backdrop-filter' CSS property to work.
required_args.append('--enable-experimental-web-platform-features')
self.AddStory(story_class( self.AddStory(story_class(
page_set=self, page_set=self,
shared_page_state_class=shared_page_state_class, shared_page_state_class=shared_page_state_class,
......
tools/perf/page_sets/rendering/story_tags.py
View file @ 5e4dbee6
...@@ -22,6 +22,8 @@ USE_FAKE_CAMERA_DEVICE = Tag( ...@@ -22,6 +22,8 @@ USE_FAKE_CAMERA_DEVICE = Tag(
# Below are tags for filtering by page sets # Below are tags for filtering by page sets
BACKDROP_FILTER = Tag(
'backdrop_filter', 'Backdrop filter stories')
IMAGE_DECODING = Tag( IMAGE_DECODING = Tag(
'image_decoding', 'Stories with accelerated jpeg decoding') 'image_decoding', 'Stories with accelerated jpeg decoding')
KEY_DESKTOP_MOVE = Tag( KEY_DESKTOP_MOVE = Tag(
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment