| OLD | NEW |
| 1 Tests the display of animations on the animation timeline. | 1 Tests the display of animations on the animation timeline. |
| 2 | 2 |
| 3 >>>> Animation with start delay only | 3 >>>> Animation with start delay only |
| 4 WebAnimation | 4 WebAnimation |
| 5 testId | 5 testId |
| 6 <g style="cursor: -webkit-grab; transform: translateX(200px);"><g style="transfo
rm: translateX(0px);"><line class="animation-line" x1="7" y1="26" y2="26" x2="40
7.00" style="stroke: black;"></line><path class="animation-keyframe" d="M 0 26 L
0 5 L 400.00 5 L 400.00 26 Z" style="transform: translateX(7px); fill: black;">
</path><circle class="animation-endpoint" cx="7.00" cy="26" r="3.5" style="strok
e: black; fill: black; cursor: ew-resize;"></circle><circle class="animation-end
point" cx="407.00" cy="26" r="3.5" style="stroke: black; fill: black; cursor: ew
-resize;"></circle></g><g class="animation-tail-iterations"></g></g><line class=
"animation-delay-line" x1="7" y1="26" y2="26" x2="207.00" style="stroke: black;"
></line><line class="animation-delay-line" x1="7" y1="26" y2="26" x2="7.00" styl
e="stroke: black; transform: translateX(600px);"></line> | 6 <g style="cursor: -webkit-grab; transform: translateX(200px);"><g style="transfo
rm: translateX(0px);"><line class="animation-line" x1="7" y1="26" y2="26" x2="40
7.00" style="stroke: black;"></line><path class="animation-keyframe" d="M 0 26 L
0 5 L 400.00 5 L 400.00 26 Z" style="transform: translateX(7px); fill: black;">
</path><circle class="animation-endpoint" cx="7.00" cy="26" r="3.5" style="strok
e: black; fill: black; cursor: ew-resize;"></circle><circle class="animation-end
point" cx="407.00" cy="26" r="3.5" style="stroke: black; fill: black; cursor: ew
-resize;"></circle></g><g class="animation-tail-iterations"></g></g><line class=
"animation-delay-line" x1="7" y1="26" y2="26" x2="207.00" style="stroke: black;"
></line><line class="animation-delay-line" x1="7" y1="26" y2="26" x2="7.00" styl
e="stroke: black; transform: translateX(600px);"></line> |
| 7 >>>> Animation with start and end delay | 7 >>>> Animation with start and end delay |
| 8 WebAnimation | 8 WebAnimation |
| 9 | 9 |
| 10 <g style="cursor: -webkit-grab; transform: translateX(4.95px);"><g style="transf
orm: translateX(0px);"><line class="animation-line" x1="7" y1="26" y2="26" x2="9
97.10" style="stroke: black;"></line><path class="animation-keyframe" d="M 0 26
L 0 5 L 990.10 5 L 990.10 26 Z" style="transform: translateX(7px); fill: black;"
></path><circle class="animation-endpoint" cx="7.00" cy="26" r="3.5" style="stro
ke: black; fill: black; cursor: ew-resize;"></circle><circle class="animation-en
dpoint" cx="997.10" cy="26" r="3.5" style="stroke: black; fill: black; cursor: e
w-resize;"></circle></g><g class="animation-tail-iterations"></g></g><line class
="animation-delay-line" x1="7" y1="26" y2="26" x2="11.95" style="stroke: black;"
></line><line class="animation-delay-line" x1="7" y1="26" y2="26" x2="16.90" sty
le="stroke: black; transform: translateX(995.05px);"></line> | 10 <g style="cursor: -webkit-grab; transform: translateX(4.95px);"><g style="transf
orm: translateX(0px);"><line class="animation-line" x1="7" y1="26" y2="26" x2="9
97.10" style="stroke: black;"></line><path class="animation-keyframe" d="M 0 26
L 0 5 L 990.10 5 L 990.10 26 Z" style="transform: translateX(7px); fill: black;"
></path><circle class="animation-endpoint" cx="7.00" cy="26" r="3.5" style="stro
ke: black; fill: black; cursor: ew-resize;"></circle><circle class="animation-en
dpoint" cx="997.10" cy="26" r="3.5" style="stroke: black; fill: black; cursor: e
w-resize;"></circle></g><g class="animation-tail-iterations"></g></g><line class
="animation-delay-line" x1="7" y1="26" y2="26" x2="11.95" style="stroke: black;"
></line><line class="animation-delay-line" x1="7" y1="26" y2="26" x2="16.90" sty
le="stroke: black; transform: translateX(995.05px);"></line> |
| 11 >>>> Animation with step timing function | 11 >>>> Animation with step timing function |
| 12 WebAnimation | 12 WebAnimation |
| 13 | 13 |
| 14 <g style="cursor: -webkit-grab; transform: translateX(0px);"><g style="transform
: translateX(0px);"><line class="animation-line" x1="7" y1="26" y2="26" x2="407.
00" style="stroke: black;"></line><path class="animation-keyframe" d="M 0 26 L 0
5 L 400.00 5 L 400.00 26 Z" style="transform: translateX(7px); fill: black;"></
path><circle class="animation-endpoint" cx="7.00" cy="26" r="3.5" style="stroke:
black; fill: black; cursor: ew-resize;"></circle><circle class="animation-endpo
int" cx="407.00" cy="26" r="3.5" style="stroke: black; fill: black; cursor: ew-r
esize;"></circle></g><g class="animation-tail-iterations"></g></g><line class="a
nimation-delay-line" x1="7" y1="26" y2="26" x2="7.00" style="stroke: black;"></l
ine><line class="animation-delay-line" x1="7" y1="26" y2="26" x2="7.00" style="s
troke: black; transform: translateX(400px);"></line> | 14 <g style="cursor: -webkit-grab; transform: translateX(0px);"><g style="transform
: translateX(0px);"><line class="animation-line" x1="7" y1="26" y2="26" x2="407.
00" style="stroke: black;"></line><g class="animation-keyframe-step" style="tran
sform: translateX(7px);"><line x1="80" x2="80" y1="7" y2="26" style="stroke: bla
ck;"></line><line x1="160" x2="160" y1="7" y2="26" style="stroke: black;"></line
><line x1="240" x2="240" y1="7" y2="26" style="stroke: black;"></line><line x1="
320" x2="320" y1="7" y2="26" style="stroke: black;"></line><line x1="400" x2="40
0" y1="7" y2="26" style="stroke: black;"></line></g><circle class="animation-end
point" cx="7.00" cy="26" r="3.5" style="stroke: black; fill: black; cursor: ew-r
esize;"></circle><circle class="animation-endpoint" cx="407.00" cy="26" r="3.5"
style="stroke: black; fill: black; cursor: ew-resize;"></circle></g><g class="an
imation-tail-iterations"></g></g><line class="animation-delay-line" x1="7" y1="2
6" y2="26" x2="7.00" style="stroke: black;"></line><line class="animation-delay-
line" x1="7" y1="26" y2="26" x2="7.00" style="stroke: black; transform: translat
eX(400px);"></line> |
| 15 >>>> CSS animation started | 15 >>>> CSS animation started |
| 16 CSSAnimation | 16 CSSAnimation |
| 17 anim | 17 anim |
| 18 <g style="cursor: -webkit-grab; transform: translateX(0px);"><g style="transform
: translateX(0px);"><line class="animation-line" x1="7" y1="26" y2="26" x2="607.
00" style="stroke: black;"></line><path class="animation-keyframe" d="M 0 26 L 0
.47 24.97 L 19.52 22.90 L 37.98 20.86 L 55.90 18.88 L 73.30 16.99 L 90.22 15.22
L 106.67 13.59 L 122.71 12.11 L 138.35 10.79 L 153.63 9.63 L 168.58 8.62 L 183.2
3 7.75 L 197.61 7.02 L 211.76 6.41 L 225.71 5.91 L 239.48 5.51 L 253.11 5.20 L 2
66.63 4.97 L 280.08 4.83 L 293.47 4.76 L 306.85 4.76 L 320.25 4.83 L 333.70 4.97
L 347.22 5.20 L 360.85 5.51 L 374.63 5.91 L 388.58 6.41 L 402.73 7.02 L 417.12
7.75 L 431.78 8.62 L 446.74 9.63 L 462.03 10.79 L 477.68 12.11 L 493.72 13.59 L
510.19 15.22 L 527.11 16.99 L 544.52 18.88 L 562.45 20.86 L 580.94 22.90 L 600.0
0 24.97 L 600.00 26 Z" style="transform: translateX(7px); fill: black;"></path><
circle class="animation-endpoint" cx="7.00" cy="26" r="3.5" style="stroke: black
; fill: black; cursor: ew-resize;"></circle><circle class="animation-endpoint" c
x="607.00" cy="26" r="3.5" style="stroke: black; fill: black; cursor: ew-resize;
"></circle></g><g class="animation-tail-iterations"></g></g><line class="animati
on-delay-line" x1="7" y1="26" y2="26" x2="7.00" style="stroke: black;"></line><l
ine class="animation-delay-line" x1="7" y1="26" y2="26" x2="7.00" style="stroke:
black; transform: translateX(600px);"></line> | 18 <g style="cursor: -webkit-grab; transform: translateX(0px);"><g style="transform
: translateX(0px);"><line class="animation-line" x1="7" y1="26" y2="26" x2="607.
00" style="stroke: black;"></line><path class="animation-keyframe" d="M 0 26 L 0
.47 24.97 L 19.52 22.90 L 37.98 20.86 L 55.90 18.88 L 73.30 16.99 L 90.22 15.22
L 106.67 13.59 L 122.71 12.11 L 138.35 10.79 L 153.63 9.63 L 168.58 8.62 L 183.2
3 7.75 L 197.61 7.02 L 211.76 6.41 L 225.71 5.91 L 239.48 5.51 L 253.11 5.20 L 2
66.63 4.97 L 280.08 4.83 L 293.47 4.76 L 306.85 4.76 L 320.25 4.83 L 333.70 4.97
L 347.22 5.20 L 360.85 5.51 L 374.63 5.91 L 388.58 6.41 L 402.73 7.02 L 417.12
7.75 L 431.78 8.62 L 446.74 9.63 L 462.03 10.79 L 477.68 12.11 L 493.72 13.59 L
510.19 15.22 L 527.11 16.99 L 544.52 18.88 L 562.45 20.86 L 580.94 22.90 L 600.0
0 24.97 L 600.00 26 Z" style="transform: translateX(7px); fill: black;"></path><
circle class="animation-endpoint" cx="7.00" cy="26" r="3.5" style="stroke: black
; fill: black; cursor: ew-resize;"></circle><circle class="animation-endpoint" c
x="607.00" cy="26" r="3.5" style="stroke: black; fill: black; cursor: ew-resize;
"></circle></g><g class="animation-tail-iterations"></g></g><line class="animati
on-delay-line" x1="7" y1="26" y2="26" x2="7.00" style="stroke: black;"></line><l
ine class="animation-delay-line" x1="7" y1="26" y2="26" x2="7.00" style="stroke:
black; transform: translateX(600px);"></line> |
| 19 >>>> CSS transition started | 19 >>>> CSS transition started |
| 20 CSSTransition | 20 CSSTransition |
| 21 background-color | 21 background-color |
| 22 <g style="cursor: -webkit-grab; transform: translateX(0px);"><line class="animat
ion-line" x1="7" y1="26" y2="26" x2="307.00" style="stroke: black;"></line><path
class="animation-keyframe" d="M 0 26 L 0.01 0.00 L 0.32 0.00 L 1.21 0.00 L 2.66
0.02 L 4.65 0.11 L 7.17 0.31 L 10.21 0.66 L 13.74 1.15 L 17.76 1.76 L 22.25 2.4
5 L 27.19 3.21 L 32.57 4.00 L 38.38 4.82 L 44.59 5.64 L 51.20 6.47 L 58.18 7.29
L 65.53 8.10 L 73.23 8.90 L 81.26 9.69 L 89.60 10.46 L 98.25 11.23 L 107.19 11.9
8 L 116.40 12.72 L 125.87 13.46 L 135.58 14.19 L 145.51 14.91 L 155.66 15.63 L 1
66.00 16.35 L 176.53 17.08 L 187.23 17.80 L 198.07 18.53 L 209.05 19.26 L 220.15
20.01 L 231.36 20.76 L 242.66 21.52 L 254.04 22.30 L 265.48 23.09 L 276.96 23.9
0 L 288.47 24.72 L 300.00 25.57 L 300.00 26 Z" style="transform: translateX(7px)
; fill: black;"></path><circle class="animation-endpoint" cx="7.00" cy="26" r="3
.5" style="stroke: black; fill: black; cursor: ew-resize;"></circle><circle clas
s="animation-endpoint" cx="307.00" cy="26" r="3.5" style="stroke: black; fill: b
lack; cursor: ew-resize;"></circle></g><line class="animation-delay-line" x1="7"
y1="26" y2="26" x2="7.00" style="stroke: black;"></line><line class="animation-
delay-line" x1="7" y1="26" y2="26" x2="7.00" style="stroke: black; transform: tr
anslateX(300px);"></line> | 22 <g style="cursor: -webkit-grab; transform: translateX(0px);"><line class="animat
ion-line" x1="7" y1="26" y2="26" x2="307.00" style="stroke: black;"></line><path
class="animation-keyframe" d="M 0 26 L 0.01 0.00 L 0.32 0.00 L 1.21 0.00 L 2.66
0.02 L 4.65 0.11 L 7.17 0.31 L 10.21 0.66 L 13.74 1.15 L 17.76 1.76 L 22.25 2.4
5 L 27.19 3.21 L 32.57 4.00 L 38.38 4.82 L 44.59 5.64 L 51.20 6.47 L 58.18 7.29
L 65.53 8.10 L 73.23 8.90 L 81.26 9.69 L 89.60 10.46 L 98.25 11.23 L 107.19 11.9
8 L 116.40 12.72 L 125.87 13.46 L 135.58 14.19 L 145.51 14.91 L 155.66 15.63 L 1
66.00 16.35 L 176.53 17.08 L 187.23 17.80 L 198.07 18.53 L 209.05 19.26 L 220.15
20.01 L 231.36 20.76 L 242.66 21.52 L 254.04 22.30 L 265.48 23.09 L 276.96 23.9
0 L 288.47 24.72 L 300.00 25.57 L 300.00 26 Z" style="transform: translateX(7px)
; fill: black;"></path><circle class="animation-endpoint" cx="7.00" cy="26" r="3
.5" style="stroke: black; fill: black; cursor: ew-resize;"></circle><circle clas
s="animation-endpoint" cx="307.00" cy="26" r="3.5" style="stroke: black; fill: b
lack; cursor: ew-resize;"></circle></g><line class="animation-delay-line" x1="7"
y1="26" y2="26" x2="7.00" style="stroke: black;"></line><line class="animation-
delay-line" x1="7" y1="26" y2="26" x2="7.00" style="stroke: black; transform: tr
anslateX(300px);"></line> |
| 23 | 23 |
| OLD | NEW |