Devtools: Add editable keyframes to the styles sidebar pane

third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-keyframes-expected.txt

Index: third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-keyframes-expected.txt
diff --git a/third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-keyframes-expected.txt b/third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-keyframes-expected.txt
new file mode 100644
index 0000000000000000000000000000000000000000..b9d47e3068a6e7229949ba625d16700e03544803
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/inspector/elements/styles-4/styles-keyframes-expected.txt
@@ -0,0 +1,211 @@
+Tests that keyframes are shown in styles pane.
+
+=== Before key modification ===
+[expanded] 
+element.style { ()
+
+[expanded] 
+#element { (keyframes.css:1 -> keyframes.css:1:1)
+    animation: animName 1s 2s, mediaAnim 2s, doesNotExist 3s, styleSheetAnim 0s;
+        animation-name: animName, mediaAnim, doesNotExist, styleSheetAnim;
+        animation-duration: 1s, 2s, 3s, 0s;
+        animation-timing-function: initial, initial, initial, initial;
+        animation-delay: 2s, initial, initial, initial;
+        animation-iteration-count: initial, initial, initial, initial;
+        animation-direction: initial, initial, initial, initial;
+        animation-fill-mode: initial, initial, initial, initial;
+        animation-play-state: initial, initial, initial, initial;
+
+[expanded] 
+div { (user agent stylesheet)
+    display: block;
+
+======== @keyframes animName ========
+[expanded] 
+0%, 20% { (styles-keyframes.html:10 -> styles-keyframes.html:10:5)
+    margin-left: 200px;
+    color: red;
+
+[expanded] 
+100% { (styles-keyframes.html:14 -> styles-keyframes.html:14:5)
+    margin-left: 500px;
+
+======== @keyframes mediaAnim ========
+[expanded] 
+0% { (keyframes.css:19 -> keyframes.css:19:9)
+    opacity: 0;
+
+[expanded] 
+100% { (keyframes.css:22 -> keyframes.css:22:9)
+    opacity: 1;
+
+======== @keyframes styleSheetAnim ========
+[expanded] 
+0% { (keyframes.css:6 -> keyframes.css:6:5)
+    padding-left: 100px;
+
+[expanded] 
+10% { (keyframes.css:9 -> keyframes.css:9:5)
+    padding-left: 150px;
+
+[expanded] 
+100% { (keyframes.css:12 -> keyframes.css:12:5)
+    padding-left: 200px;
+
+=== After key modification ===
+[expanded] 
+element.style { ()
+
+[expanded] 
+#element { (keyframes.css:1 -> keyframes.css:1:1)
+    animation: animName 1s 2s, mediaAnim 2s, doesNotExist 3s, styleSheetAnim 0s;
+        animation-name: animName, mediaAnim, doesNotExist, styleSheetAnim;
+        animation-duration: 1s, 2s, 3s, 0s;
+        animation-timing-function: initial, initial, initial, initial;
+        animation-delay: 2s, initial, initial, initial;
+        animation-iteration-count: initial, initial, initial, initial;
+        animation-direction: initial, initial, initial, initial;
+        animation-fill-mode: initial, initial, initial, initial;
+        animation-play-state: initial, initial, initial, initial;
+
+[expanded] 
+div { (user agent stylesheet)
+    display: block;
+
+======== @keyframes animName ========
+[expanded] 
+0%, 20% { (styles-keyframes.html:10 -> styles-keyframes.html:10:5)
+    margin-left: 200px;
+    color: red;
+
+[expanded] 
+1% { (styles-keyframes.html:14 -> styles-keyframes.html:14:5)
+    margin-left: 500px;
+
+======== @keyframes mediaAnim ========
+[expanded] 
+0% { (keyframes.css:19 -> keyframes.css:19:9)
+    opacity: 0;
+
+[expanded] 
+100% { (keyframes.css:22 -> keyframes.css:22:9)
+    opacity: 1;
+
+======== @keyframes styleSheetAnim ========
+[expanded] 
+0% { (keyframes.css:6 -> keyframes.css:6:5)
+    padding-left: 100px;
+
+[expanded] 
+10% { (keyframes.css:9 -> keyframes.css:9:5)
+    padding-left: 150px;
+
+[expanded] 
+100% { (keyframes.css:12 -> keyframes.css:12:5)
+    padding-left: 200px;
+
+=== After undo ===
+[expanded] 
+element.style { ()
+
+[expanded] 
+#element { (keyframes.css:1 -> keyframes.css:1:1)
+    animation: animName 1s 2s, mediaAnim 2s, doesNotExist 3s, styleSheetAnim 0s;
+        animation-name: animName, mediaAnim, doesNotExist, styleSheetAnim;
+        animation-duration: 1s, 2s, 3s, 0s;
+        animation-timing-function: initial, initial, initial, initial;
+        animation-delay: 2s, initial, initial, initial;
+        animation-iteration-count: initial, initial, initial, initial;
+        animation-direction: initial, initial, initial, initial;
+        animation-fill-mode: initial, initial, initial, initial;
+        animation-play-state: initial, initial, initial, initial;
+
+[expanded] 
+div { (user agent stylesheet)
+    display: block;
+
+======== @keyframes animName ========
+[expanded] 
+0%, 20% { (styles-keyframes.html:10 -> styles-keyframes.html:10:5)
+    margin-left: 200px;
+    color: red;
+
+[expanded] 
+100% { (styles-keyframes.html:14 -> styles-keyframes.html:14:5)
+    margin-left: 500px;
+
+======== @keyframes mediaAnim ========
+[expanded] 
+0% { (keyframes.css:19 -> keyframes.css:19:9)
+    opacity: 0;
+
+[expanded] 
+100% { (keyframes.css:22 -> keyframes.css:22:9)
+    opacity: 1;
+
+======== @keyframes styleSheetAnim ========
+[expanded] 
+0% { (keyframes.css:6 -> keyframes.css:6:5)
+    padding-left: 100px;
+
+[expanded] 
+10% { (keyframes.css:9 -> keyframes.css:9:5)
+    padding-left: 150px;
+
+[expanded] 
+100% { (keyframes.css:12 -> keyframes.css:12:5)
+    padding-left: 200px;
+
+=== After redo ===
+[expanded] 
+element.style { ()
+
+[expanded] 
+#element { (keyframes.css:1 -> keyframes.css:1:1)
+    animation: animName 1s 2s, mediaAnim 2s, doesNotExist 3s, styleSheetAnim 0s;
+        animation-name: animName, mediaAnim, doesNotExist, styleSheetAnim;
+        animation-duration: 1s, 2s, 3s, 0s;
+        animation-timing-function: initial, initial, initial, initial;
+        animation-delay: 2s, initial, initial, initial;
+        animation-iteration-count: initial, initial, initial, initial;
+        animation-direction: initial, initial, initial, initial;
+        animation-fill-mode: initial, initial, initial, initial;
+        animation-play-state: initial, initial, initial, initial;
+
+[expanded] 
+div { (user agent stylesheet)
+    display: block;
+
+======== @keyframes animName ========
+[expanded] 
+0%, 20% { (styles-keyframes.html:10 -> styles-keyframes.html:10:5)
+    margin-left: 200px;
+    color: red;
+
+[expanded] 
+1% { (styles-keyframes.html:14 -> styles-keyframes.html:14:5)
+    margin-left: 500px;
+
+======== @keyframes mediaAnim ========
+[expanded] 
+0% { (keyframes.css:19 -> keyframes.css:19:9)
+    opacity: 0;
+
+[expanded] 
+100% { (keyframes.css:22 -> keyframes.css:22:9)
+    opacity: 1;
+
+======== @keyframes styleSheetAnim ========
+[expanded] 
+0% { (keyframes.css:6 -> keyframes.css:6:5)
+    padding-left: 100px;
+
+[expanded] 
+10% { (keyframes.css:9 -> keyframes.css:9:5)
+    padding-left: 150px;
+
+[expanded] 
+100% { (keyframes.css:12 -> keyframes.css:12:5)
+    padding-left: 200px;
+
+