blob: 67d8f338a027c1b528c82dad1a4e4a89ae1b1d06 [file] [log] [blame]
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;
[expanded]
div { (user agent stylesheet)
display: block;
======== @keyframes animName ========
[expanded]
0%, 20% { (<style>…</style>)
margin-left: 200px;
color: red;
[expanded]
100% { (<style>…</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;
[expanded]
div { (user agent stylesheet)
display: block;
======== @keyframes animName ========
[expanded]
0%, 20% { (<style>…</style>)
margin-left: 200px;
color: red;
[expanded]
1% { (<style>…</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;
[expanded]
div { (user agent stylesheet)
display: block;
======== @keyframes animName ========
[expanded]
0%, 20% { (<style>…</style>)
margin-left: 200px;
color: red;
[expanded]
100% { (<style>…</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;
[expanded]
div { (user agent stylesheet)
display: block;
======== @keyframes animName ========
[expanded]
0%, 20% { (<style>…</style>)
margin-left: 200px;
color: red;
[expanded]
1% { (<style>…</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;
[expanded]
div { (user agent stylesheet)
display: block;
======== @keyframes animName ========
[expanded]
0%, 20% { (<style>…</style>)
margin-left: 200px;
color: red;
[expanded]
1% { (<style>…</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;