10 background-color: gray;
11 border:
0px solid rgb(
0,
0,
0);
12 -webkit-transition: border
1s linear;
16 border:
20px dashed rgb(
255,
0,
255);
23 background-color: gray;
24 border:
0px solid rgb(
0,
0,
0);
25 -webkit-transition: border-width
1s linear;
29 border:
20px solid rgb(
255,
0,
255);
36 background-color: gray;
37 border:
0px solid rgb(
0,
0,
0);
38 -webkit-transition: border
1s linear;
43 border-bottom-width:
40px;
46 <script src=
"../animations/resources/animation-test-helpers.js"></script>
47 <script type=
"text/javascript">
49 const expectedValues
= [
50 // [time, element-id, property, expected-value, tolerance]
51 // color and width of each side should be animating
52 [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],
61 // only border-width should be animating
62 [0.5, 'box1', 'border-top-width', 10, 2],
63 [0.5, 'box1', 'border-top-color', [255, 0, 255], 0],
65 // border-width should be animating
66 [0.5, 'box2', 'border-top-width', 10, 2],
67 [0.5, 'box2', 'border-bottom-width', 20, 4],
72 var box
= document
.getElementById('box');
73 box
.className
= 'final';
75 var box1
= document
.getElementById('box1');
76 box1
.className
= 'final';
78 var box2
= document
.getElementById('box2');
79 box2
.className
= 'final';
82 runTransitionTest(expectedValues
, setupTest
);
88 Tests transitions of the border shorthand properties.