Merge Chromium + Blink git repositories

[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / inspector / animation / animation-timeline-expected.txt

Tests the display of animations on the animation timeline.

>>>> Animation with start delay only
WebAnimation
<div class="animation-name" style="transform: translateX(229.22px); width: 444px;"></div>
<svg class="animation-ui" height="80" width="680.67" style="margin-left: -7px; transform: translateX(0px);"><g style="transform: translateX(222.22px);"><g style="transform: translateX(0px);"><line class="animation-line" x1="7" y1="32" y2="32" x2="451.44" style="stroke: black;"></line><path class="animation-keyframe" d="M 0 32 L 0.02 13.35 L 0.94 13.35 L 3.51 13.35 L 7.66 13.35 L 13.28 13.35 L 20.28 13.35 L 28.59 13.35 L 38.10 13.35 L 48.73 13.35 L 60.39 13.35 L 72.99 13.35 L 86.44 13.35 L 100.65 13.35 L 115.54 13.35 L 131.00 13.35 L 146.95 13.35 L 163.31 13.35 L 179.98 13.35 L 196.87 13.35 L 213.90 13.35 L 230.96 13.35 L 247.99 13.35 L 264.88 13.35 L 281.54 13.35 L 297.89 13.35 L 313.83 13.35 L 329.28 13.35 L 344.15 13.35 L 358.34 13.35 L 371.77 13.35 L 384.35 13.35 L 395.99 13.35 L 406.60 13.35 L 416.08 13.35 L 424.36 13.35 L 431.33 13.35 L 436.92 13.35 L 441.03 13.35 L 443.56 13.35 L 444.44 13.35 L 444.44 32 Z" style="transform: translateX(7px); fill: black;"></path><circle class="animation-endpoint" cx="7.00" cy="32" r="3.5" style="stroke: black; fill: black;"></circle><circle class="animation-endpoint" cx="451.44" cy="32" r="3.5" style="stroke: black; fill: black;"></circle></g><g class="animation-tail-iterations"></g></g><line class="animation-delay-line" x1="7" y1="32" y2="32" x2="229.22" style="stroke: black;"></line><line class="animation-delay-line" x1="7" y1="32" y2="32" x2="7.00" style="stroke: black; transform: translateX(666.67px);"></line></svg>
>>>> Animation with start and end delay
WebAnimation
<div class="animation-name" style="transform: translateX(10.28px); width: 600px;"></div>
<svg class="animation-ui" height="80" width="680.67" style="margin-left: -7px; transform: translateX(0px);"><g style="transform: translateX(3.28px);"><g style="transform: translateX(0px);"><line class="animation-line" x1="7" y1="32" y2="32" x2="663.81" style="stroke: black;"></line><path class="animation-keyframe" d="M 0 32 L 0.03 13.35 L 1.39 13.35 L 5.19 13.35 L 11.32 13.35 L 19.62 13.35 L 29.97 13.35 L 42.25 13.35 L 56.31 13.35 L 72.02 13.35 L 89.25 13.35 L 107.87 13.35 L 127.75 13.35 L 148.75 13.35 L 170.74 13.35 L 193.59 13.35 L 217.17 13.35 L 241.34 13.35 L 265.98 13.35 L 290.94 13.35 L 316.10 13.35 L 341.33 13.35 L 366.49 13.35 L 391.44 13.35 L 416.07 13.35 L 440.23 13.35 L 463.79 13.35 L 486.62 13.35 L 508.59 13.35 L 529.57 13.35 L 549.42 13.35 L 568.01 13.35 L 585.21 13.35 L 600.88 13.35 L 614.90 13.35 L 627.13 13.35 L 637.44 13.35 L 645.70 13.35 L 651.76 13.35 L 655.51 13.35 L 656.81 13.35 L 656.81 32 Z" style="transform: translateX(7px); fill: black;"></path><circle class="animation-endpoint" cx="7.00" cy="32" r="3.5" style="stroke: black; fill: black;"></circle><circle class="animation-endpoint" cx="663.81" cy="32" r="3.5" style="stroke: black; fill: black;"></circle></g><g class="animation-tail-iterations"></g></g><line class="animation-delay-line" x1="7" y1="32" y2="32" x2="10.28" style="stroke: black;"></line><line class="animation-delay-line" x1="7" y1="32" y2="32" x2="13.57" style="stroke: black; transform: translateX(660.1px);"></line></svg>
>>>> Animation canceled
WebAnimation
<div class="animation-name" style="transform: translateX(10.28px); width: 600px;"></div>
<svg class="animation-ui animation-ui-canceled" height="80" width="680.67" style="margin-left: -7px; transform: translateX(0px);"><g style="transform: translateX(3.28px);"><g style="transform: translateX(0px);"><line class="animation-line" x1="7" y1="32" y2="32" x2="663.81" style="stroke: black;"></line><path class="animation-keyframe" d="M 0 32 L 0.03 13.35 L 1.39 13.35 L 5.19 13.35 L 11.32 13.35 L 19.62 13.35 L 29.97 13.35 L 42.25 13.35 L 56.31 13.35 L 72.02 13.35 L 89.25 13.35 L 107.87 13.35 L 127.75 13.35 L 148.75 13.35 L 170.74 13.35 L 193.59 13.35 L 217.17 13.35 L 241.34 13.35 L 265.98 13.35 L 290.94 13.35 L 316.10 13.35 L 341.33 13.35 L 366.49 13.35 L 391.44 13.35 L 416.07 13.35 L 440.23 13.35 L 463.79 13.35 L 486.62 13.35 L 508.59 13.35 L 529.57 13.35 L 549.42 13.35 L 568.01 13.35 L 585.21 13.35 L 600.88 13.35 L 614.90 13.35 L 627.13 13.35 L 637.44 13.35 L 645.70 13.35 L 651.76 13.35 L 655.51 13.35 L 656.81 13.35 L 656.81 32 Z" style="transform: translateX(7px); fill: black;"></path><circle class="animation-endpoint" cx="7.00" cy="32" r="3.5" style="stroke: black; fill: black;"></circle><circle class="animation-endpoint" cx="663.81" cy="32" r="3.5" style="stroke: black; fill: black;"></circle></g><g class="animation-tail-iterations"></g></g><line class="animation-delay-line" x1="7" y1="32" y2="32" x2="10.28" style="stroke: black;"></line><line class="animation-delay-line" x1="7" y1="32" y2="32" x2="13.57" style="stroke: black; transform: translateX(660.1px);"></line></svg>
>>>> Animation with step timing function
WebAnimation
<div class="animation-name" style="transform: translateX(7px); width: 666px;"></div>
<svg class="animation-ui" height="80" width="680.67" style="margin-left: -7px; transform: translateX(0px);"><g style="transform: translateX(0px);"><g style="transform: translateX(0px);"><line class="animation-line" x1="7" y1="32" y2="32" x2="673.67" style="stroke: black;"></line><path class="animation-keyframe" d="M 0 32 L 0.03 13.35 L 1.41 13.35 L 5.27 13.35 L 11.49 13.35 L 19.91 13.35 L 30.42 13.35 L 42.88 13.35 L 57.15 13.35 L 73.10 13.35 L 90.59 13.35 L 109.49 13.35 L 129.66 13.35 L 150.98 13.35 L 173.30 13.35 L 196.50 13.35 L 220.43 13.35 L 244.96 13.35 L 269.97 13.35 L 295.31 13.35 L 320.84 13.35 L 346.45 13.35 L 371.98 13.35 L 397.31 13.35 L 422.31 13.35 L 446.83 13.35 L 470.75 13.35 L 493.92 13.35 L 516.22 13.35 L 537.51 13.35 L 557.66 13.35 L 576.53 13.35 L 593.99 13.35 L 609.90 13.35 L 624.13 13.35 L 636.54 13.35 L 647.00 13.35 L 655.38 13.35 L 661.54 13.35 L 665.35 13.35 L 666.67 13.35 L 666.67 32 Z" style="transform: translateX(7px); fill: black;"></path><circle class="animation-endpoint" cx="7.00" cy="32" r="3.5" style="stroke: black; fill: black;"></circle><circle class="animation-endpoint" cx="673.67" cy="32" r="3.5" style="stroke: black; fill: black;"></circle></g><g class="animation-tail-iterations"></g></g><line class="animation-delay-line" x1="7" y1="32" y2="32" x2="7.00" style="stroke: black;"></line><line class="animation-delay-line" x1="7" y1="32" y2="32" x2="7.00" style="stroke: black; transform: translateX(666.67px);"></line></svg>
>>>> CSS animation started
CSSAnimation
<div class="animation-name" style="transform: translateX(7px); width: 666px;">anim</div>
<svg class="animation-ui" height="80" width="680.67" style="margin-left: -7px; transform: translateX(0px);"><g style="transform: translateX(0px);"><g style="transform: translateX(0px);"><line class="animation-line" x1="7" y1="32" y2="32" x2="673.67" style="stroke: black;"></line><path class="animation-keyframe" d="M 0 32 L 0.52 30.73 L 21.68 28.19 L 42.20 25.67 L 62.11 23.24 L 81.45 20.91 L 100.24 18.74 L 118.53 16.73 L 136.34 14.91 L 153.72 13.28 L 170.70 11.85 L 187.31 10.61 L 203.59 9.54 L 219.57 8.64 L 235.29 7.88 L 250.79 7.27 L 266.09 6.78 L 281.23 6.40 L 296.26 6.12 L 311.20 5.94 L 326.08 5.85 L 340.95 5.85 L 355.83 5.94 L 370.77 6.12 L 385.80 6.40 L 400.95 6.78 L 416.26 7.27 L 431.76 7.88 L 447.48 8.64 L 463.47 9.54 L 479.76 10.61 L 496.38 11.85 L 513.36 13.28 L 530.75 14.91 L 548.58 16.73 L 566.87 18.74 L 585.68 20.91 L 605.03 23.24 L 624.95 25.67 L 645.48 28.19 L 666.67 30.73 L 666.67 32 Z" style="transform: translateX(7px); fill: black;"></path><circle class="animation-endpoint" cx="7.00" cy="32" r="3.5" style="stroke: black; fill: black;"></circle><circle class="animation-endpoint" cx="673.67" cy="32" r="3.5" style="stroke: black; fill: black;"></circle></g><g class="animation-tail-iterations"></g></g><line class="animation-delay-line" x1="7" y1="32" y2="32" x2="7.00" style="stroke: black;"></line><line class="animation-delay-line" x1="7" y1="32" y2="32" x2="7.00" style="stroke: black; transform: translateX(666.67px);"></line></svg>
>>>> CSS transition started
CSSTransition
<div class="animation-name" style="transform: translateX(7px); width: 666px;">background-color</div>
<svg class="animation-ui" height="80" width="680.67" style="margin-left: -7px; transform: translateX(0px);"><g style="transform: translateX(0px);"><line class="animation-line" x1="7" y1="32" y2="32" x2="673.67" style="stroke: black;"></line><path class="animation-keyframe" d="M 0 32 L 0.02 0.00 L 0.71 0.00 L 2.69 0.00 L 5.90 0.02 L 10.33 0.13 L 15.93 0.38 L 22.68 0.82 L 30.54 1.42 L 39.47 2.17 L 49.44 3.02 L 60.43 3.95 L 72.38 4.93 L 85.28 5.93 L 99.09 6.95 L 113.77 7.96 L 129.29 8.97 L 145.62 9.97 L 162.73 10.96 L 180.57 11.93 L 199.12 12.88 L 218.34 13.82 L 238.20 14.74 L 258.66 15.66 L 279.70 16.56 L 301.28 17.46 L 323.36 18.35 L 345.91 19.24 L 368.90 20.13 L 392.29 21.02 L 416.06 21.91 L 440.16 22.80 L 464.56 23.71 L 489.23 24.62 L 514.14 25.55 L 539.25 26.49 L 564.53 27.44 L 589.95 28.42 L 615.46 29.41 L 641.05 30.43 L 666.67 31.47 L 666.67 32 Z" style="transform: translateX(7px); fill: black;"></path><circle class="animation-endpoint" cx="7.00" cy="32" r="3.5" style="stroke: black; fill: black;"></circle><circle class="animation-endpoint" cx="673.67" cy="32" r="3.5" style="stroke: black; fill: black;"></circle></g><line class="animation-delay-line" x1="7" y1="32" y2="32" x2="7.00" style="stroke: black;"></line><line class="animation-delay-line" x1="7" y1="32" y2="32" x2="7.00" style="stroke: black; transform: translateX(666.67px);"></line></svg>