Skip to content

GitLab

T
tangled
Commit 7ed1214b authored by rosca@adobe.com's avatar rosca@adobe.com
Browse files
Options

Add performance tests for accelerated elements with CSS Blending. 

BUG=243223

Review URL: https://codereview.chromium.org/643693006

git-svn-id: svn://svn.chromium.org/blink/trunk@185186 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent a0fb9fe7
Hide whitespace changes
Inline Side-by-side
Showing with 199 additions and 44 deletions
third_party/WebKit/PerformanceTests/Animation/mix-blend-mode-animation-difference.html 0 → 100644
View file @ 7ed1214b
<!DOCTYPE html>
<html>
<head>
<title>Benchmark - CSS Blending and CSS Animation</title>
<style>
#backdrop {
float: left;
width: 400px;
height: 400px;
isolation: isolate;
background-image: linear-gradient(to bottom,
rgba(255, 255, 0, 0.9),
rgba(255, 0, 0, 0.9),
rgba(0, 255, 0, 0.9),
rgba(0, 0, 255, 0.9),
rgba(0, 0, 0, 0.9));
position: absolute;
top: 50px;
left: 100px;
}
#backdrop div {
width: 5%;
height: 5%;
background-color: rgba(200, 100, 100, 0.7);
float: left;
will-change: transform;
mix-blend-mode: difference;
animation: rotate 3s infinite linear;
}
@keyframes rotate {
to {transform: rotateZ(360deg);}
}
}
</style>
<script src="../resources/runner.js"></script>
<script src="resources/framerate.js"></script>
<script>
window.onload = function () {
var backdrop = document.getElementById("backdrop");
for (var i = 0; i < 400; i++) {
var div = document.createElement("div");
backdrop.appendChild(div);
}
PerfTestRunner.prepareToMeasureValuesAsync({
description: "Measure performance of CSS Animation on elements having mix-blend-mode: difference (a separable popular blend mode).",
done: onCompletedRun,
unit: 'fps'
});
startTrackingFrameRate();
}
function onCompletedRun() {
stopTrackingFrameRate();
}
</script>
</head>
<body>
<pre id="log"></pre>
<div id="backdrop"></div>
</body>
</html>
third_party/WebKit/PerformanceTests/Animation/mix-blend-mode-animation-hue.html 0 → 100644
View file @ 7ed1214b
<!DOCTYPE html>
<html>
<head>
<title>Benchmark - CSS Blending and CSS Animation</title>
<style>
#backdrop {
float: left;
width: 400px;
height: 400px;
isolation: isolate;
background-image: linear-gradient(to bottom,
rgba(255, 255, 0, 0.9),
rgba(255, 0, 0, 0.9),
rgba(0, 255, 0, 0.9),
rgba(0, 0, 255, 0.9),
rgba(0, 0, 0, 0.9));
position: absolute;
top: 50px;
left: 100px;
}
#backdrop div {
width: 5%;
height: 5%;
background-color: rgba(200, 100, 100, 0.7);
float: left;
will-change: transform;
mix-blend-mode: hue;
animation: rotate 3s infinite linear;
}
@keyframes rotate {
to {transform: rotateZ(360deg);}
}
}
</style>
<script src="../resources/runner.js"></script>
<script src="resources/framerate.js"></script>
<script>
window.onload = function () {
var backdrop = document.getElementById("backdrop");
for (var i = 0; i < 400; i++) {
var div = document.createElement("div");
backdrop.appendChild(div);
}
PerfTestRunner.prepareToMeasureValuesAsync({
description: "Measure performance of CSS Animation on elements having mix-blend-mode: hue (a non-separable blend mode).",
done: onCompletedRun,
unit: 'fps'
});
startTrackingFrameRate();
}
function onCompletedRun() {
stopTrackingFrameRate();
}
</script>
</head>
<body>
<pre id="log"></pre>
<div id="backdrop"></div>
</body>
</html>
third_party/WebKit/PerformanceTests/Animation/mix-blend-mode-animation-screen.html 0 → 100644
View file @ 7ed1214b
<!DOCTYPE html>
<html>
<head>
<title>Benchmark - CSS Blending and CSS Animation</title>
<style>
#backdrop {
float: left;
width: 400px;
height: 400px;
isolation: isolate;
background-image: linear-gradient(to bottom,
rgba(255, 255, 0, 0.9),
rgba(255, 0, 0, 0.9),
rgba(0, 255, 0, 0.9),
rgba(0, 0, 255, 0.9),
rgba(0, 0, 0, 0.9));
position: absolute;
top: 50px;
left: 100px;
}
#backdrop div {
width: 5%;
height: 5%;
background-color: rgba(200, 100, 100, 0.7);
float: left;
will-change: transform;
mix-blend-mode: screen;
animation: rotate 3s infinite linear;
}
@keyframes rotate {
to {transform: rotateZ(360deg);}
}
}
</style>
<script src="../resources/runner.js"></script>
<script src="resources/framerate.js"></script>
<script>
window.onload = function () {
var backdrop = document.getElementById("backdrop");
for (var i = 0; i < 400; i++) {
var div = document.createElement("div");
backdrop.appendChild(div);
}
PerfTestRunner.prepareToMeasureValuesAsync({
description: "Measure performance of CSS Animation on elements having mix-blend-mode: screen.",
done: onCompletedRun,
unit: 'fps'
});
startTrackingFrameRate();
}
function onCompletedRun() {
stopTrackingFrameRate();
}
</script>
</head>
<body>
<pre id="log"></pre>
<div id="backdrop"></div>
</body>
</html>
third_party/WebKit/PerformanceTests/Blending/mix-blend-mode-propagating-isolation.html → third_party/WebKit/PerformanceTests/Animation/mix-blend-mode-propagating-isolation.html
View file @ 7ed1214b
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Painting deep tree with CSS Blending</title>
<!-- https://codereview.chromium.org/478333002/ -->
<style> <style>
.box { .box {
width: 100px; width: 100px;
...@@ -23,8 +25,13 @@ ...@@ -23,8 +25,13 @@
<script src="../resources/runner.js"></script> <script src="../resources/runner.js"></script>
<script src="resources/framerate.js"></script> <script src="resources/framerate.js"></script>
<script> <script>
var intervalId = 0;
window.onload = function () { window.onload = function () {
PerfTestRunner.prepareToMeasureValuesAsync({done: onCompletedRun, unit: 'fps'}); PerfTestRunner.prepareToMeasureValuesAsync({
description: "Measure performance of software-animating a deep DOM subtree having one blending leaf.",
done: onCompletedRun,
unit: 'fps'
});
// The leaf element has blending // The leaf element has blending
var lastElement = document.createElement("div"); var lastElement = document.createElement("div");
...@@ -38,16 +45,19 @@ ...@@ -38,16 +45,19 @@
} }
var container = document.getElementById("container"); var container = document.getElementById("container");
container.appendChild(lastElement); container.appendChild(lastElement);
startTrackingFrameRate({run: softwareAnimationStep});
intervalId = window.setInterval(function () {
var leftVal = parseInt(container.style.left) || 0;
container.style.left = (leftVal + 1) + "px";
}, 16);
startTrackingFrameRate();
} }
function onCompletedRun() { function onCompletedRun() {
clearInterval(intervalId);
stopTrackingFrameRate(); stopTrackingFrameRate();
} }
function softwareAnimationStep() {
var leftVal = parseInt(container.style.left) || 0;
container.style.left = (leftVal + 1) + "px";
}
</script> </script>
</head> </head>
<body> <body>
......
third_party/WebKit/PerformanceTests/Blending/resources/framerate.js deleted 100644 → 0
View file @ a0fb9fe7
(function(){
var framesPerTimerReading = 10;
var frameCount = 0;
var startTime;
var trackingFrameRate = false;
var currentTest;
function trackFrameRate(currTime)
{
if (++frameCount == framesPerTimerReading) {
frameCount = 0;
PerfTestRunner.measureValueAsync(1000 * framesPerTimerReading / (currTime - startTime));
startTime = currTime;
}
if (currentTest && currentTest.run)
currentTest.run();
if (trackingFrameRate)
requestAnimationFrame(trackFrameRate);
}
window.startTrackingFrameRate = function(test) {
if (trackingFrameRate)
return;
trackingFrameRate = true;
currentTest = test;
startTime = performance.now();
trackFrameRate();
};
window.stopTrackingFrameRate = function() {
trackingFrameRate = false;
currentTest = undefined;
};
})();
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