blob: e397b6d0662dabe931762d051bd9835af73f9040 [file] [log] [blame]
<!DOCTYPE HTML>
<head>
<style>
div {
width: 130px;
height: 130px;
background-color: green;
float: left;
margin: 5px;
}
</style>
<script type="text/javascript">
if (window.testRunner)
window.testRunner.waitUntilDone();
var greenWhite1px400msGif = "url('data:image/gif;base64,R0lGODlhAQABAJECAAB/Jv///////wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJKAACACwAAAAAAQABAAACAkQBACH5BAkoAAIALAAAAAABAAEAAAICTAEAOw==')";
window.onload = function () {
var list = document.getElementsByTagName('div');
for (var i = 0; i < list.length; i++)
list[i].style.backgroundImage = greenWhite1px400msGif;
setTimeout(function () {
if (window.testRunner)
window.testRunner.notifyDone();
}, 0);
};
</script>
</head>
<!-- This file should contain a gif on top of a background color with every type of blending. -->
<body>
<div style="background-blend-mode: normal, normal"></div>
<div style="background-blend-mode: multiply, normal"></div>
<div style="background-blend-mode: screen, normal"></div>
<div style="background-blend-mode: overlay, normal"></div>
<div style="background-blend-mode: darken, normal"></div>
<div style="background-blend-mode: lighten, normal"></div>
<div style="background-blend-mode: color-burn, normal"></div>
<div style="background-blend-mode: hard-light, normal"></div>
<div style="background-blend-mode: soft-light, normal"></div>
<div style="background-blend-mode: difference, normal"></div>
<div style="background-blend-mode: exclusion, normal"></div>
</body>