f5907d551ae2695de9d10c121877af798eaf262e
[WebKit-https.git] / LayoutTests / transitions / cross-fade-border-image.html
1 <!DOCTYPE><!-- webkit-test-runner [ enableCSSAnimationsAndCSSTransitionsBackedByWebAnimations=true ] -->
2
3 <html>
4 <head>
5     <style>
6     .box {
7         height: 200px;
8         width: 200px;
9         margin: 10px;
10         -webkit-transition-duration: 1s;
11         -webkit-transition-timing-function: linear;
12     }
13
14     #box {
15         border-image: url('../animations/resources/blue-100.png') 5 5 5 5 /40px stretch stretch;
16         -webkit-transition-property: border-image-source;
17     }
18
19     #box.final {
20         border-image-source: url('../animations/resources/stripes-100.png');
21     }
22
23     #boxShorthand {
24         border-image: url('../animations/resources/blue-100.png') 5 5 5 5 /40px stretch stretch;
25         -webkit-transition-property: border-image;
26     }
27
28     #boxShorthand.final {
29         border-image: url('../animations/resources/stripes-100.png') 5 5 5 5 /40px stretch stretch;
30     }
31
32     </style>
33     <script src="resources/transition-test-helpers.js" type="text/javascript"></script>
34     <script>
35
36     const expectedValues = [
37         // [time, element-id, property, expected-value, tolerance]
38         [0.5, 'box', 'border-image-source', 0.5, 0.05],
39         [0.5, 'boxShorthand', 'border-image', 0.5, 0.05],
40     ];
41
42     function setupTest()
43     {
44         document.getElementById('box').className = 'box final';
45         document.getElementById('boxShorthand').className = 'box final';
46     }
47
48     runTransitionTest(expectedValues, setupTest, usePauseAPI, true);
49     </script>
50 </head>
51 <body>
52     <div id="box" class="box"></div>
53     <div id="boxShorthand" class="box"></div>
54
55     <div id="result"></div>
56 </body>
57 </html>