CSS filters which reference SVG filters fail to respect the "color-interpolation...
[WebKit-https.git] / LayoutTests / css3 / filters / color-interpolation-filters.html
1 <head>
2     <style>
3         body {
4             margin: 0;
5         }
6         .box {
7             width: 200px;
8             height: 200px;
9             background-color: white;
10             float: left;
11         }
12         .container > div {
13             margin: 10px;
14         }
15     </style>
16 </head>
17 <body>
18     <svg width="800" height="240">
19         <defs>
20             <filter id="test-linear" color-interpolation-filters="linearRGB">
21                 <feComponentTransfer>
22                     <feFuncR type="table" tableValues="0.8 0.2"/>
23                     <feFuncG type="table" tableValues="0.8 0.2"/>
24                     <feFuncB type="table" tableValues="0.8 0.2"/>
25                 </feComponentTransfer>
26                 <feColorMatrix type="hueRotate" values="180"/>
27             </filter>
28
29             <filter id="test-srgb" color-interpolation-filters="sRGB">
30                 <feComponentTransfer>
31                     <feFuncR type="table" tableValues="0.8 0.2"/>
32                     <feFuncG type="table" tableValues="0.8 0.2"/>
33                     <feFuncB type="table" tableValues="0.8 0.2"/>
34                 </feComponentTransfer>
35                 <feColorMatrix type="hueRotate" values="180"/>
36             </filter>
37
38             <filter id="test-default">
39                 <feComponentTransfer>
40                     <feFuncR type="table" tableValues="0.8 0.2"/>
41                     <feFuncG type="table" tableValues="0.8 0.2"/>
42                     <feFuncB type="table" tableValues="0.8 0.2"/>
43                 </feComponentTransfer>
44                 <feColorMatrix type="hueRotate" values="180"/>
45             </filter>
46         </defs>
47         <rect filter="url(#test-linear)" x="10" y="10" width="200" height="200" fill="white"/>
48         <rect filter="url(#test-srgb)" x="230" y="10" width="200" height="200" fill="white"/>
49         <rect filter="url(#test-default)" x="450" y="10" width="200" height="200" fill="white"/>
50     </svg>
51     <div class="container">
52         <div class="box" style="filter: url(#test-linear)"></div>
53         <div class="box" style="filter: url(#test-srgb)"></div>
54         <div class="box" style="filter: url(#test-default)"></div>
55     </div>
56 </body>