| Index: content/test/data/gpu/filter_effects.html
|
| diff --git a/content/test/data/gpu/filter_effects.html b/content/test/data/gpu/filter_effects.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..63ae469a2a8b13502c715306240ef8977384111c
|
| --- /dev/null
|
| +++ b/content/test/data/gpu/filter_effects.html
|
| @@ -0,0 +1,117 @@
|
| +<!DOCTYPE HTML>
|
| +
|
| +<!-- READ BEFORE UPDATING:
|
| +If this test is updated make sure to increment the "revision" value of the
|
| +associated test in content/test/gpu/page_sets/pixel_tests.py. This will ensure
|
| +that the baseline images are regenerated on the next run.
|
| +-->
|
| +
|
| +<html>
|
| +<head>
|
| +<meta name="viewport" content="initial-scale=1">
|
| +<title>Basic CSS Filter Effects Test</title>
|
| +<!--
|
| +A static CSS filter effect is rastered as a display list item. This test is
|
| +concerned with the compositor implementation of CSS filter effects, so it uses
|
| +CSS keyframe animations to force the non-display list path. Note that the
|
| +animation has no effect, as the start and end keyframes are identical.
|
| +-->
|
| +<style type="text/css">
|
| +body {
|
| + margin: 0px;
|
| + padding: 0px;
|
| + background-color: green;
|
| +}
|
| +#container {
|
| + width: 300px;
|
| + height: 300px;
|
| + background-color: white;
|
| +}
|
| +@-webkit-keyframes blur-anim {
|
| + from {-webkit-filter: blur(8px)}
|
| + to {-webkit-filter: blur(8px)}
|
| +}
|
| +@-webkit-keyframes grayscale-anim {
|
| + from {-webkit-filter: grayscale(90%)}
|
| + to {-webkit-filter: grayscale(90%)}
|
| +}
|
| +@-webkit-keyframes drop-shadow-anim {
|
| + from {-webkit-filter: drop-shadow(8px 8px 10px blue)}
|
| + to {-webkit-filter: drop-shadow(8px 8px 10px blue)}
|
| +}
|
| +@-webkit-keyframes sepia-anim {
|
| + from {-webkit-filter: sepia(70%)}
|
| + to {-webkit-filter: sepia(70%)}
|
| +}
|
| +@-webkit-keyframes brightness-anim {
|
| + from {-webkit-filter: brightness(20%)}
|
| + to {-webkit-filter: brightness(20%)}
|
| +}
|
| +@-webkit-keyframes contrast-anim {
|
| + from {-webkit-filter: contrast(20%)}
|
| + to {-webkit-filter: contrast(20%)}
|
| +}
|
| +@-webkit-keyframes hue-rotate-anim {
|
| + from {-webkit-filter: hue-rotate(50deg)}
|
| + to {-webkit-filter: hue-rotate(50deg)}
|
| +}
|
| +@-webkit-keyframes invert-anim {
|
| + from {-webkit-filter: invert(70%)}
|
| + to {-webkit-filter: invert(70%)}
|
| +}
|
| +@-webkit-keyframes saturate-anim {
|
| + from {-webkit-filter: saturate(40%)}
|
| + to {-webkit-filter: saturate(40%)}
|
| +}
|
| +@-webkit-keyframes opacity-anim {
|
| + from {-webkit-filter: opacity(70%)}
|
| + to {-webkit-filter: opacity(70%)}
|
| +}
|
| +.gradient {
|
| + float: left;
|
| + height: 50px;
|
| + width: 50px;
|
| + margin: 10px;
|
| +}
|
| +
|
| +</style>
|
| +<body onload="main()">
|
| +<div id="container">
|
| + <canvas class="gradient" style="-webkit-animation: blur-anim 150000s;"></canvas>
|
| + <canvas class="gradient" style="-webkit-animation: grayscale-anim 150000s;"></canvas>
|
| + <canvas class="gradient" style="-webkit-animation: drop-shadow-anim 150000s;"></canvas>
|
| + <canvas class="gradient" style="-webkit-animation: sepia-anim 150000s;"></canvas>
|
| + <canvas class="gradient" style="-webkit-animation: brightness-anim 150000s;"></canvas>
|
| + <canvas class="gradient" style="-webkit-animation: contrast-anim 150000s;"></canvas>
|
| + <canvas class="gradient" style="-webkit-animation: hue-rotate-anim 150000s;"></canvas>
|
| + <canvas class="gradient" style="-webkit-animation: invert-anim 150000s;"></canvas>
|
| + <canvas class="gradient" style="-webkit-animation: saturate-anim 150000s;"></canvas>
|
| + <canvas class="gradient" style="-webkit-animation: opacity-anim 150000s;"></canvas>
|
| +</div>
|
| +</body>
|
| +
|
| +<script>
|
| +var elements = document.getElementsByClassName("gradient");
|
| +var i;
|
| +for (i = 0; i < elements.length; i++) {
|
| + var canvas = elements[i];
|
| + var ctx = canvas.getContext("2d");
|
| +
|
| + var grd=ctx.createLinearGradient(0,0,canvas.width,0);
|
| + grd.addColorStop(0,"yellow");
|
| + grd.addColorStop(0.5,"blue");
|
| + grd.addColorStop(0.75,"red");
|
| + grd.addColorStop(1,"black");
|
| + ctx.fillStyle=grd;
|
| + ctx.fillRect(0, 0, canvas.width, canvas.height);
|
| +}
|
| +
|
| +function finish()
|
| +{
|
| + domAutomationController.setAutomationId(1);
|
| + domAutomationController.send("SUCCESS");
|
| +}
|
| +window.webkitRequestAnimationFrame(finish);
|
| +</script>
|
| +</head>
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 2156793002:
Add a pixel test for CSS filter effects. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master