| Tests the display of animations on the animation timeline. |
| |
| >>>> Animation with start delay only |
| WebAnimation |
| testId |
| <g style="cursor: -webkit-grab; transform: translateX(200px);"><g style="transform: translateX(0px);"><line class="animation-line" x1="7" y1="26" y2="26" x2="407.00" style="stroke: rgb(86, 119, 252);"></line><path class="animation-keyframe" tabindex="0" aria-label="testId slider" d="M 0 26 L 0 5 L 400.00 5 L 400.00 26 Z" style="transform: translateX(7px); fill: rgb(86, 119, 252);"></path><circle class="animation-endpoint" cx="7.00" cy="26" r="3.5" tabindex="0" aria-label="Animation Endpoint slider" style="stroke: rgb(86, 119, 252); fill: rgb(86, 119, 252); cursor: ew-resize;"></circle><circle class="animation-endpoint" cx="407.00" cy="26" r="3.5" tabindex="0" aria-label="Animation Endpoint slider" style="stroke: rgb(86, 119, 252); fill: rgb(86, 119, 252); 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: rgb(86, 119, 252);"></line><line class="animation-delay-line" x1="7" y1="26" y2="26" x2="7.00" style="stroke: rgb(86, 119, 252); transform: translateX(600px);"></line> |
| >>>> Animation with start and end delay |
| WebAnimation |
| testId2 |
| <g style="cursor: -webkit-grab; transform: translateX(4.95px);"><g style="transform: translateX(0px);"><line class="animation-line" x1="7" y1="26" y2="26" x2="997.10" style="stroke: rgb(156, 39, 176);"></line><path class="animation-keyframe" tabindex="0" aria-label="testId2 slider" d="M 0 26 L 0 5 L 990.10 5 L 990.10 26 Z" style="transform: translateX(7px); fill: rgb(156, 39, 176);"></path><circle class="animation-endpoint" cx="7.00" cy="26" r="3.5" tabindex="0" aria-label="Animation Endpoint slider" style="stroke: rgb(156, 39, 176); fill: rgb(156, 39, 176); cursor: ew-resize;"></circle><circle class="animation-endpoint" cx="997.10" cy="26" r="3.5" tabindex="0" aria-label="Animation Endpoint slider" style="stroke: rgb(156, 39, 176); fill: rgb(156, 39, 176); cursor: ew-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: rgb(156, 39, 176);"></line><line class="animation-delay-line" x1="7" y1="26" y2="26" x2="16.90" style="stroke: rgb(156, 39, 176); transform: translateX(995.05px);"></line> |
| >>>> Animation with step timing function |
| WebAnimation |
| testId3 |
| <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: rgb(96, 125, 139);"></line><g class="animation-keyframe-step" tabindex="0" aria-label="testId3 slider" style="transform: translateX(7px);"><line x1="80" x2="80" y1="7" y2="26" style="stroke: rgb(96, 125, 139);"></line><line x1="160" x2="160" y1="7" y2="26" style="stroke: rgb(96, 125, 139);"></line><line x1="240" x2="240" y1="7" y2="26" style="stroke: rgb(96, 125, 139);"></line><line x1="320" x2="320" y1="7" y2="26" style="stroke: rgb(96, 125, 139);"></line><line x1="400" x2="400" y1="7" y2="26" style="stroke: rgb(96, 125, 139);"></line></g><circle class="animation-endpoint" cx="7.00" cy="26" r="3.5" tabindex="0" aria-label="Animation Endpoint slider" style="stroke: rgb(96, 125, 139); fill: rgb(96, 125, 139); cursor: ew-resize;"></circle><circle class="animation-endpoint" cx="407.00" cy="26" r="3.5" tabindex="0" aria-label="Animation Endpoint slider" style="stroke: rgb(96, 125, 139); fill: rgb(96, 125, 139); cursor: ew-resize;"></circle></g><g class="animation-tail-iterations"></g></g><line class="animation-delay-line" x1="7" y1="26" y2="26" x2="7.00" style="stroke: rgb(96, 125, 139);"></line><line class="animation-delay-line" x1="7" y1="26" y2="26" x2="7.00" style="stroke: rgb(96, 125, 139); transform: translateX(400px);"></line> |
| >>>> CSS animation started |
| CSSAnimation |
| anim |
| <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: rgb(121, 85, 72);"></line><path class="animation-keyframe" tabindex="0" aria-label="anim slider" 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.23 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 266.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.00 24.97 L 600.00 26 Z" style="transform: translateX(7px); fill: rgb(121, 85, 72);"></path><circle class="animation-endpoint" cx="7.00" cy="26" r="3.5" tabindex="0" aria-label="Animation Endpoint slider" style="stroke: rgb(121, 85, 72); fill: rgb(121, 85, 72); cursor: ew-resize;"></circle><circle class="animation-endpoint" cx="607.00" cy="26" r="3.5" tabindex="0" aria-label="Animation Endpoint slider" style="stroke: rgb(121, 85, 72); fill: rgb(121, 85, 72); cursor: ew-resize;"></circle></g><g class="animation-tail-iterations"></g></g><line class="animation-delay-line" x1="7" y1="26" y2="26" x2="7.00" style="stroke: rgb(121, 85, 72);"></line><line class="animation-delay-line" x1="7" y1="26" y2="26" x2="7.00" style="stroke: rgb(121, 85, 72); transform: translateX(600px);"></line> |
| >>>> CSS transition started |
| CSSTransition |
| background-color |
| <g style="cursor: -webkit-grab; transform: translateX(0px);"><line class="animation-line" x1="7" y1="26" y2="26" x2="307.00" style="stroke: rgb(205, 220, 57);"></line><path class="animation-keyframe" tabindex="0" aria-label="background-color slider" 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.45 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.98 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 166.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.90 L 288.47 24.72 L 300.00 25.57 L 300.00 26 Z" style="transform: translateX(7px); fill: rgb(205, 220, 57);"></path><circle class="animation-endpoint" cx="7.00" cy="26" r="3.5" tabindex="0" aria-label="Animation Endpoint slider" style="stroke: rgb(205, 220, 57); fill: rgb(205, 220, 57); cursor: ew-resize;"></circle><circle class="animation-endpoint" cx="307.00" cy="26" r="3.5" tabindex="0" aria-label="Animation Endpoint slider" style="stroke: rgb(205, 220, 57); fill: rgb(205, 220, 57); cursor: ew-resize;"></circle></g><line class="animation-delay-line animation-fill" x1="7" y1="26" y2="26" x2="7.00" style="stroke: rgb(205, 220, 57);"></line><line class="animation-delay-line" x1="7" y1="26" y2="26" x2="7.00" style="stroke: rgb(205, 220, 57); transform: translateX(300px);"></line> |
| |
