| 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; |
| |
| |