Devtools Animations: Represent delay and end-delay on the animation timeline

LayoutTests/inspector/elements/animation-timeline-expected.txt

Index: LayoutTests/inspector/elements/animation-timeline-expected.txt
diff --git a/LayoutTests/inspector/elements/animation-timeline-expected.txt b/LayoutTests/inspector/elements/animation-timeline-expected.txt
new file mode 100644
index 0000000000000000000000000000000000000000..85dd5562ddeff12098eb9413ab051b4e9566f8bb
--- /dev/null
+++ b/LayoutTests/inspector/elements/animation-timeline-expected.txt
@@ -0,0 +1,7 @@
+Tests the display of animations on the animation timeline.
+
+Node: div#node
+<g style="transform: translateX(66.6666666666667px);"><g style="transform: translateX(0px);"><line class="animation-line" x1="8" y1="32" y2="32" x2="274.6666666666667" style="stroke: rgb(15, 157, 88);"></line><path class="animation-keyframe" d="M 0 32 L 0.012291666666666668 13.350945748866874 L 0.56375 13.350945748866874 L 2.1089583333333333 13.350945748866874 L 4.594166666666669 13.350945748866874 L 7.965625000000002 13.350945748866874 L 12.169583333333334 13.350945748866874 L 17.152291666666663 13.350945748866874 L 22.86 13.350945748866874 L 29.238958333333333 13.350945748866874 L 36.23541666666666 13.350945748866874 L 43.795624999999994 13.350945748866874 L 51.86583333333333 13.350945748866874 L 60.39229166666668 13.350945748866874 L 69.32125000000002 13.350945748866874 L 78.59895833333337 13.350945748866874 L 88.17166666666671 13.350945748866874 L 97.98562500000004 13.350945748866874 L 107.98708333333337 13.350945748866874 L 118.12229166666674 13.350945748866874 L 128.33750000000006 13.350945748866874 L 138.5789583333334 13.350945748866874 L 148.79291666666674 13.350945748866874 L 158.92562500000008 13.350945748866874 L 168.9233333333334 13.350945748866874 L 178.73229166666673 13.350945748866874 L 188.2987500000001 13.350945748866874 L 197.5689583333334 13.350945748866874 L 206.48916666666676 13.350945748866874 L 215.00562500000012 13.350945748866874 L 223.06458333333347 13.350945748866874 L 230.61229166666678 13.350945748866874 L 237.5950000000001 13.350945748866874 L 243.95895833333344 13.350945748866874 L 249.6504166666668 13.350945748866874 L 254.61562500000008 13.350945748866874 L 258.8008333333334 13.350945748866874 L 262.1522916666667 13.350945748866874 L 264.6162500000001 13.350945748866874 L 266.13895833333333 13.350945748866874 L 266.6666666666667 13.350945748866874 L 266.6666666666667 32 Z" style="transform: translateX(8px); fill: rgb(15, 157, 88);"></path><circle class="animation-endpoint" cx="8" cy="32" r="4" style="stroke: rgb(15, 157, 88); fill: rgb(15, 157, 88);"></circle><circle class="animation-endpoint" cx="274.6666666666667" cy="32" r="4" style="stroke: rgb(15, 157, 88); fill: rgb(15, 157, 88);"></circle></g><g class="animation-tail-iterations"></g></g><line class="animation-delay-line" x1="8" y1="32" y2="32" x2="74.66666666666667" style="stroke: rgb(15, 157, 88);"></line><line class="animation-delay-line" x1="8" y1="32" y2="32" x2="8" style="stroke: rgb(15, 157, 88); transform: translateX(333.333333333333px);"></line>
+Node: div#node
+<g style="transform: translateX(153.846153846154px);"><g style="transform: translateX(0px);"><line class="animation-line" x1="8" y1="32" y2="32" x2="136.2051282051282" style="stroke: rgb(156, 39, 176);"></line><path class="animation-keyframe" d="M 0 32 L 0.005909455128205128 13.350945748866874 L 0.2710336538461538 13.350945748866874 L 1.0139222756410255 13.350945748866874 L 2.2087339743589753 13.350945748866874 L 3.829627403846154 13.350945748866874 L 5.850761217948718 13.350945748866874 L 8.24629407051282 13.350945748866874 L 10.990384615384615 13.350945748866874 L 14.057191506410255 13.350945748866874 L 17.42087339743589 13.350945748866874 L 21.055588942307686 13.350945748866874 L 24.93549679487179 13.350945748866874 L 29.03475560897436 13.350945748866874 L 33.32752403846155 13.350945748866874 L 37.7879607371795 13.350945748866874 L 42.39022435897437 13.350945748866874 L 47.10847355769233 13.350945748866874 L 51.9168669871795 13.350945748866874 L 56.78956330128208 13.350945748866874 L 61.70072115384618 13.350945748866874 L 66.62449919871797 13.350945748866874 L 71.53505608974362 13.350945748866874 L 76.40655048076925 13.350945748866874 L 81.21314102564106 13.350945748866874 L 85.92898637820515 13.350945748866874 L 90.52824519230774 13.350945748866874 L 94.9850761217949 13.350945748866874 L 99.27363782051286 13.350945748866874 L 103.36808894230774 13.350945748866874 L 107.24258814102569 13.350945748866874 L 110.87129407051286 13.350945748866874 L 114.22836538461543 13.350945748866874 L 117.28796073717953 13.350945748866874 L 120.02423878205134 13.350945748866874 L 122.41135817307696 13.350945748866874 L 124.42347756410258 13.350945748866874 L 126.03475560897438 13.350945748866874 L 127.21935096153848 13.350945748866874 L 127.95142227564102 13.350945748866874 L 128.2051282051282 13.350945748866874 L 128.2051282051282 32 Z" style="transform: translateX(8px); fill: rgb(156, 39, 176);"></path><circle class="animation-endpoint" cx="8" cy="32" r="4" style="stroke: rgb(156, 39, 176); fill: rgb(156, 39, 176);"></circle><circle class="animation-endpoint" cx="136.2051282051282" cy="32" r="4" style="stroke: rgb(156, 39, 176); fill: rgb(156, 39, 176);"></circle></g><g class="animation-tail-iterations"></g></g><line class="animation-delay-line" x1="8" y1="32" y2="32" x2="161.84615384615384" style="stroke: rgb(156, 39, 176);"></line><line class="animation-delay-line" x1="8" y1="32" y2="32" x2="59.28205128205128" style="stroke: rgb(156, 39, 176); transform: translateX(282.051282051282px);"></line>
+