| <!DOCTYPE HTML> |
| <head> |
| <script> |
| if (window.testRunner) |
| window.testRunner.overridePreference("WebKitAcceleratedCompositingEnabled", "1"); |
| </script> |
| |
| <style> |
| img { |
| width: 130px; |
| height: 130px; |
| -webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); |
| } |
| |
| li { |
| margin: 5px; |
| width: 130px; |
| height: 260px; |
| background: -webkit-gradient(linear, left top, right top, color-stop(0%,#00ffff), color-stop(24%,#0000ff), color-stop(50%,#ff0000), color-stop(75%,#ffff00), color-stop(100%,#00ff00)); |
| display: block; |
| float: left; |
| } |
| </style> |
| </head> |
| |
| <!-- This file should contain a duck on top of a gradient that has a reflection. |
| Both the duck and the reflection should blend. --> |
| <body> |
| <ul><li><img style="-webkit-blend-mode: multiply" src="resources/ducky.png"></li></ul> |
| </body> |
