Google Git
Sign in
webkit / WebKit / 48679eb30013d73dd3533576e598110693e24f40 / . / LayoutTests / css3 / blending / background-blend-mode-tiled-layers.html
blob: 5cb41df9ec1ff0c210059033ce2ebc2d4ed044d5 [file] [log] [blame]
commit-queue@webkit.org85fa8e42014-01-21 16:36:50 +0000[diff] [blame]1<!DOCTYPE HTML>
2
3<!-- Test background blend mode with several tiled layers. Test passes if you can see 6 lime squares. -->
4
rosca@adobe.com3f0f0ba2014-07-21 08:26:37 +0000[diff] [blame]5<link rel="stylesheet" href="resources/blending-style.css">
commit-queue@webkit.org85fa8e42014-01-21 16:36:50 +0000[diff] [blame]6<style>
7 div {
8 margin: 5px;
9 width: 100px;
10 height: 100px;
commit-queue@webkit.org3de96cd2014-02-07 18:46:47 +0000[diff] [blame]11 background-blend-mode: difference, normal;
commit-queue@webkit.org85fa8e42014-01-21 16:36:50 +0000[diff] [blame]12 float: left;
13 }
14
15 .tiledSVG {
16 background: url('data:image/svg+xml;utf8, \
17 <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> \
18 <rect width="100" height="100" fill="#F00"/> \
19 </svg>'
20 ) 0 0 /50% 50%, #FF0;
21 }
22
23 .tiledGradient {
24 background: linear-gradient(to right, #F00 0%, #F00 100%) 0 0 /50% 50%, #FF0;
25 }
26
27 .tiledCrossfadeImage {
28 background: -webkit-cross-fade(url('data:image/svg+xml;utf8, \
29 <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"> \
30 <rect width="100" height="100" fill="#F00"/> \
31 </svg>'
32 ), url('data:image/svg+xml;utf8, \
33 <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"> \
34 <rect width="100" height="100" fill="#F00"/> \
35 </svg>'
36 ), 100%) 0 0 /50% 50%, #FF0;
37 }
38
commit-queue@webkit.org85fa8e42014-01-21 16:36:50 +0000[diff] [blame]39</style>
40
commit-queue@webkit.org85fa8e42014-01-21 16:36:50 +0000[diff] [blame]41<div class="tiledSVG"></div>
42<div class="tiledSVG accelerated"></div>
43
44<div class="tiledGradient"></div>
45<div class="tiledGradient accelerated"></div>
46
47<div class="tiledCrossfadeImage"></div>
48<div class="tiledCrossfadeImage accelerated"></div>