blob: 35c9e3291faa126222d4410e2a2fe3e7449e7f9c [file] [log] [blame]
dino@apple.com58635032018-09-12 20:59:33 +00001<!DOCTYPE html><!-- webkit-test-runner [ experimental:WebAnimationsCSSIntegrationEnabled=true ] -->
simon.fraser@apple.com252830a2009-01-20 03:31:37 +00002
simon.fraser@apple.com4803cdd2011-04-26 03:25:14 +00003<html>
simon.fraser@apple.com252830a2009-01-20 03:31:37 +00004<head>
simon.fraser@apple.com4803cdd2011-04-26 03:25:14 +00005 <style>
simon.fraser@apple.com252830a2009-01-20 03:31:37 +00006 #box {
7 height: 100px;
8 width: 100px;
9 margin: 10px;
10 background-color: gray;
11 border: 0px solid rgb(0, 0, 0);
ojan@chromium.org586e0692010-01-19 23:49:05 +000012 -webkit-transition: border 1s linear;
simon.fraser@apple.com252830a2009-01-20 03:31:37 +000013 }
14
15 #box.final {
16 border: 20px dashed rgb(255, 0, 255);
17 }
18
19 #box1 {
20 height: 100px;
21 width: 100px;
22 margin: 10px;
23 background-color: gray;
24 border: 0px solid rgb(0, 0, 0);
ojan@chromium.org586e0692010-01-19 23:49:05 +000025 -webkit-transition: border-width 1s linear;
simon.fraser@apple.com252830a2009-01-20 03:31:37 +000026 }
27
28 #box1.final {
29 border: 20px solid rgb(255, 0, 255);
30 }
31
32 #box2 {
33 height: 100px;
34 width: 100px;
35 margin: 10px;
36 background-color: gray;
37 border: 0px solid rgb(0, 0, 0);
ojan@chromium.org586e0692010-01-19 23:49:05 +000038 -webkit-transition: border 1s linear;
simon.fraser@apple.com252830a2009-01-20 03:31:37 +000039 }
40
41 #box2.final {
42 border-width: 20px;
43 border-bottom-width: 40px;
44 }
45 </style>
simon.fraser@apple.com4803cdd2011-04-26 03:25:14 +000046 <script src="resources/transition-test-helpers.js"></script>
47 <script type="text/javascript">
simon.fraser@apple.com252830a2009-01-20 03:31:37 +000048
49 const expectedValues = [
simon.fraser@apple.comcc078e82010-12-08 17:37:32 +000050 // [time, element-id, property, expected-value, tolerance, callback, should-be-transitioning]
simon.fraser@apple.com252830a2009-01-20 03:31:37 +000051 // color and width of each side should be animating
ojan@chromium.org586e0692010-01-19 23:49:05 +000052 [0.5, 'box', 'border-top-color', [128, 0, 128], 30],
53 [0.5, 'box', 'border-right-color', [128, 0, 128], 30],
54 [0.5, 'box', 'border-bottom-color', [128, 0, 128], 30],
55 [0.5, 'box', 'border-left-color', [128, 0, 128], 30],
56 [0.5, 'box', 'border-top-width', 10, 2],
57 [0.5, 'box', 'border-right-width', 10, 2],
58 [0.5, 'box', 'border-bottom-width', 10, 2],
59 [0.5, 'box', 'border-left-width', 10, 2],
simon.fraser@apple.com252830a2009-01-20 03:31:37 +000060
61 // only border-width should be animating
ojan@chromium.org586e0692010-01-19 23:49:05 +000062 [0.5, 'box1', 'border-top-width', 10, 2],
simon.fraser@apple.comcc078e82010-12-08 17:37:32 +000063 [0.5, 'box1', 'border-top-color', [255, 0, 255], 0, null, shouldNotBeTransitioning],
simon.fraser@apple.com252830a2009-01-20 03:31:37 +000064
65 // border-width should be animating
ojan@chromium.org586e0692010-01-19 23:49:05 +000066 [0.5, 'box2', 'border-top-width', 10, 2],
67 [0.5, 'box2', 'border-bottom-width', 20, 4],
simon.fraser@apple.com252830a2009-01-20 03:31:37 +000068 ];
69
70 function setupTest()
71 {
72 var box = document.getElementById('box');
73 box.className = 'final';
74
75 var box1 = document.getElementById('box1');
76 box1.className = 'final';
77
78 var box2 = document.getElementById('box2');
79 box2.className = 'final';
80 }
81
simon.fraser@apple.comcc078e82010-12-08 17:37:32 +000082 runTransitionTest(expectedValues, setupTest, usePauseAPI);
simon.fraser@apple.com252830a2009-01-20 03:31:37 +000083 </script>
84</head>
85<body>
86
87<p>
88 Tests transitions of the border shorthand properties.
89</p>
90<div id="box"></div>
91<div id="box1"></div>
92<div id="box2"></div>
93
94<div id="result">
95</div>
96</body>
97</html>