Tests that keyframes are shown in styles pane.

=== Before key modification ===
[expanded] 
element.style { ()

[expanded] 
#element { (keyframes.css:1 -> keyframes.css:1:11)
    animation: animName 1s 2s, mediaAnim 2s, doesNotExist 3s, styleSheetAnim 0s;
        animation-duration: 1s, 2s, 3s, 0s;
        animation-timing-function: ease, ease, ease, ease;
        animation-delay: 2s, 0s, 0s, 0s;
        animation-iteration-count: 1, 1, 1, 1;
        animation-direction: normal, normal, normal, normal;
        animation-fill-mode: none, none, none, none;
        animation-play-state: running, running, running, running;
        animation-name: animName, mediaAnim, doesNotExist, styleSheetAnim;
        animation-timeline: auto;
        animation-range-start: normal;
        animation-range-end: normal;

[expanded] 
div { (user agent stylesheet)
    display: block;
    unicode-bidi: isolate;

======== @keyframes animName ========
[expanded] 
0%, 20% { (<style>)
    margin-left: 200px;
    color: red;

[expanded] 
100% { (<style>)
    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:11)
    animation: animName 1s 2s, mediaAnim 2s, doesNotExist 3s, styleSheetAnim 0s;
        animation-duration: 1s, 2s, 3s, 0s;
        animation-timing-function: ease, ease, ease, ease;
        animation-delay: 2s, 0s, 0s, 0s;
        animation-iteration-count: 1, 1, 1, 1;
        animation-direction: normal, normal, normal, normal;
        animation-fill-mode: none, none, none, none;
        animation-play-state: running, running, running, running;
        animation-name: animName, mediaAnim, doesNotExist, styleSheetAnim;
        animation-timeline: auto;
        animation-range-start: normal;
        animation-range-end: normal;

[expanded] 
div { (user agent stylesheet)
    display: block;
    unicode-bidi: isolate;

======== @keyframes animName ========
[expanded] 
0%, 20% { (<style>)
    margin-left: 200px;
    color: red;

[expanded] 
1% { (<style>)
    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:11)
    animation: animName 1s 2s, mediaAnim 2s, doesNotExist 3s, styleSheetAnim 0s;
        animation-duration: 1s, 2s, 3s, 0s;
        animation-timing-function: ease, ease, ease, ease;
        animation-delay: 2s, 0s, 0s, 0s;
        animation-iteration-count: 1, 1, 1, 1;
        animation-direction: normal, normal, normal, normal;
        animation-fill-mode: none, none, none, none;
        animation-play-state: running, running, running, running;
        animation-name: animName, mediaAnim, doesNotExist, styleSheetAnim;
        animation-timeline: auto;
        animation-range-start: normal;
        animation-range-end: normal;

[expanded] 
div { (user agent stylesheet)
    display: block;
    unicode-bidi: isolate;

======== @keyframes animName ========
[expanded] 
0%, 20% { (<style>)
    margin-left: 200px;
    color: red;

[expanded] 
100% { (<style>)
    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:11)
    animation: animName 1s 2s, mediaAnim 2s, doesNotExist 3s, styleSheetAnim 0s;
        animation-duration: 1s, 2s, 3s, 0s;
        animation-timing-function: ease, ease, ease, ease;
        animation-delay: 2s, 0s, 0s, 0s;
        animation-iteration-count: 1, 1, 1, 1;
        animation-direction: normal, normal, normal, normal;
        animation-fill-mode: none, none, none, none;
        animation-play-state: running, running, running, running;
        animation-name: animName, mediaAnim, doesNotExist, styleSheetAnim;
        animation-timeline: auto;
        animation-range-start: normal;
        animation-range-end: normal;

[expanded] 
div { (user agent stylesheet)
    display: block;
    unicode-bidi: isolate;

======== @keyframes animName ========
[expanded] 
0%, 20% { (<style>)
    margin-left: 200px;
    color: red;

[expanded] 
1% { (<style>)
    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 invalid key modification ===
[expanded] 
element.style { ()

[expanded] 
#element { (keyframes.css:1 -> keyframes.css:1:11)
    animation: animName 1s 2s, mediaAnim 2s, doesNotExist 3s, styleSheetAnim 0s;
        animation-duration: 1s, 2s, 3s, 0s;
        animation-timing-function: ease, ease, ease, ease;
        animation-delay: 2s, 0s, 0s, 0s;
        animation-iteration-count: 1, 1, 1, 1;
        animation-direction: normal, normal, normal, normal;
        animation-fill-mode: none, none, none, none;
        animation-play-state: running, running, running, running;
        animation-name: animName, mediaAnim, doesNotExist, styleSheetAnim;
        animation-timeline: auto;
        animation-range-start: normal;
        animation-range-end: normal;

[expanded] 
div { (user agent stylesheet)
    display: block;
    unicode-bidi: isolate;

======== @keyframes animName ========
[expanded] 
0%, 20% { (<style>)
    margin-left: 200px;
    color: red;

[expanded] 
1% { (<style>)
    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;