| <!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%)} |
| } |
| @-webkit-keyframes drop-shadow-invert-anim { |
| from {-webkit-filter: drop-shadow(8px 8px 10px blue) invert(70%)} |
| to {-webkit-filter: drop-shadow(8px 8px 10px blue) invert(70%)} |
| } |
| @-webkit-keyframes hue-rotate-invert-anim { |
| from {-webkit-filter: hue-rotate(50deg) invert(70%)} |
| to {-webkit-filter: hue-rotate(50deg) invert(70%)} |
| } |
| @-webkit-keyframes opacity-anim { |
| from {-webkit-filter: opacity(70%)} |
| to {-webkit-filter: opacity(70%)} |
| } |
| @-webkit-keyframes do-nothing-anim { |
| from {-webkit-filter: hue-rotate(0deg)} |
| to {-webkit-filter: hue-rotate(0deg)} |
| } |
| .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; |
| -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);"></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> |
| <canvas class="gradient" style="-webkit-animation: drop-shadow-invert-anim 150000s;"></canvas> |
| <canvas class="gradient" style="-webkit-animation: hue-rotate-invert-anim 150000s;"></canvas> |
| <canvas class="gradient" style="-webkit-animation: opacity-anim 150000s; |
| transform: scale(1.3, 0.8)"></canvas> |
| <canvas class="gradient" style="-webkit-animation: drop-shadow-invert-anim |
| 150000s; transform: scale(1.3, 0.8) rotate(53deg) translate(-3px, 10px); |
| -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);"> |
| </canvas> |
| <canvas class="gradient" style="-webkit-animation: drop-shadow-anim 150000s; |
| transform: scale(1.3, 0.8);"></canvas> |
| <div style="opacity: 0.7;"> |
| <canvas class="gradient" style="-webkit-animation: do-nothing-anim 150000s;"></canvas> |
| </div> |
| </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,canvas.height); |
| 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.send("SUCCESS"); |
| } |
| window.requestAnimationFrame(finish); |
| </script> |
| </head> |
| </html> |
