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..39be686a767539bde51e469b0d5010dc0ee31854
--- /dev/null
+++ b/LayoutTests/inspector/elements/animation-timeline-expected.txt
@@ -0,0 +1,7 @@
+Tests the display of animations on the animation timeline.
+
+>>>> Animation with start delay only
+<g style="transform: translateX(111.11px);"><g style="transform: translateX(0px);"><line class="animation-line" x1="8" y1="32" y2="32" x2="230.22" style="stroke: rgb(0, 188, 212);"></line><path class="animation-keyframe" d="M 0 32 L 0.01 13.35 L 0.47 13.35 L 1.76 13.35 L 3.83 13.35 L 6.64 13.35 L 10.14 13.35 L 14.29 13.35 L 19.05 13.35 L 24.37 13.35 L 30.20 13.35 L 36.50 13.35 L 43.22 13.35 L 50.33 13.35 L 57.77 13.35 L 65.50 13.35 L 73.48 13.35 L 81.65 13.35 L 89.99 13.35 L 98.44 13.35 L 106.95 13.35 L 115.48 13.35 L 123.99 13.35 L 132.44 13.35 L 140.77 13.35 L 148.94 13.35 L 156.92 13.35 L 164.64 13.35 L 172.07 13.35 L 179.17 13.35 L 185.89 13.35 L 192.18 13.35 L 198.00 13.35 L 203.30 13.35 L 208.04 13.35 L 212.18 13.35 L 215.67 13.35 L 218.46 13.35 L 220.51 13.35 L 221.78 13.35 L 222.22 13.35 L 222.22 32 Z" style="transform: translateX(8px); fill: rgb(0, 188, 212);"></path><circle class="animation-endpoint" cx="8.00" cy="32" r="4" style="stroke: rgb(0, 188, 212); fill: rgb(0, 188, 212);"></circle><circle class="animation-endpoint" cx="230.22" cy="32" r="4" style="stroke: rgb(0, 188, 212); fill: rgb(0, 188, 212);"></circle></g><g class="animation-tail-iterations"></g></g><line class="animation-delay-line" x1="8" y1="32" y2="32" x2="119.11" style="stroke: rgb(0, 188, 212);"></line><line class="animation-delay-line" x1="8" y1="32" y2="32" x2="8.00" style="stroke: rgb(0, 188, 212); transform: translateX(333.33px);"></line>
+>>>> Animation with start and end delay
+<g style="transform: translateX(66.67px);"><g style="transform: translateX(0px);"><line class="animation-line" x1="8" y1="32" y2="32" x2="141.33" style="stroke: rgb(156, 39, 176);"></line><path class="animation-keyframe" d="M 0 32 L 0.01 13.35 L 0.28 13.35 L 1.05 13.35 L 2.30 13.35 L 3.98 13.35 L 6.08 13.35 L 8.58 13.35 L 11.43 13.35 L 14.62 13.35 L 18.12 13.35 L 21.90 13.35 L 25.93 13.35 L 30.20 13.35 L 34.66 13.35 L 39.30 13.35 L 44.09 13.35 L 48.99 13.35 L 53.99 13.35 L 59.06 13.35 L 64.17 13.35 L 69.29 13.35 L 74.40 13.35 L 79.46 13.35 L 84.46 13.35 L 89.37 13.35 L 94.15 13.35 L 98.78 13.35 L 103.24 13.35 L 107.50 13.35 L 111.53 13.35 L 115.31 13.35 L 118.80 13.35 L 121.98 13.35 L 124.83 13.35 L 127.31 13.35 L 129.40 13.35 L 131.08 13.35 L 132.31 13.35 L 133.07 13.35 L 133.33 13.35 L 133.33 32 Z" style="transform: translateX(8px); fill: rgb(156, 39, 176);"></path><circle class="animation-endpoint" cx="8.00" cy="32" r="4" style="stroke: rgb(156, 39, 176); fill: rgb(156, 39, 176);"></circle><circle class="animation-endpoint" cx="141.33" 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="74.67" style="stroke: rgb(156, 39, 176);"></line><line class="animation-delay-line" x1="8" y1="32" y2="32" x2="141.33" style="stroke: rgb(156, 39, 176); transform: translateX(200px);"></line>
+