45294688c2428c28fa3321a5872b3f8180dd06a0
[WebKit-https.git] / LayoutTests / transitions / blendmode-transitions.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableCSSAnimationsAndCSSTransitionsBackedByWebAnimations=true ] -->
2
3 <html>
4 <head>
5   <style>
6     .box {
7       height: 100px;
8       width: 100px;
9       margin: 50px;
10       border: 1px solid black;
11       text-align: center;
12       padding: 20px;
13       -webkit-transition-duration: 10s;
14       -webkit-transition-timing-function: linear;
15       -webkit-transition-property: opacity;
16           opacity:1;
17           mix-blend-mode: difference;
18     }
19     
20     .final {
21       opacity: 0;
22     }
23   </style>
24   <script src="resources/transition-test-helpers.js"></script>
25   <script type="text/javascript">
26
27     const expectedValues = [
28       // [time, element-id, property, expected-value, tolerance]
29       [0.5, 'box', 'mix-blend-mode', 'difference', 0],
30     ];
31   
32     function setupTest()
33     {
34       document.getElementById('box').className = 'box final';
35     }
36   
37     runTransitionTest(expectedValues, setupTest, false);
38   </script>
39 </head>
40 <body>
41 Test to make sure that the blendmode property is properly propagated to shared styles
42   <div id="box" class="box">BOX</div>
43   <div id="result">
44   </div>
45
46 </body>
47 </html>