| CONSOLE MESSAGE: CSSKeyframesRule 'insertRule' function is deprecated. Use 'appendRule' instead. |
| The test loads the same stylesheet to different frames and then mutates them. The mutations should not affect other frames. |
| |
| On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE". |
| |
| |
| Test 0 |
| -------------------------------------- |
| PASS getComputedStyle(testElement, null).getPropertyValue('background-color') is 'rgb(255, 0, 0)' |
| |
| #testdiv { background-color: green; } |
| @media all { |
| #testdiv { background-color: red; } |
| } |
| @page :right { margin-left: 3cm; } |
| @-webkit-keyframes bounce { |
| 0% { left: 0px; } |
| 100% { left: 200px; } |
| } |
| @font-face { font-family: Foo; } |
| |
| Test 1 |
| -------------------------------------- |
| PASS getComputedStyle(testElement, null).getPropertyValue('background-color') is 'rgb(0, 128, 0)' |
| |
| #testdiv { background-color: green; } |
| @media all { |
| #testdiv { background-color: red; } |
| } |
| @page :right { margin-left: 3cm; } |
| #testdiv { background-color: green; } |
| @-webkit-keyframes bounce { |
| 0% { left: 0px; } |
| 100% { left: 200px; } |
| } |
| @font-face { font-family: Foo; } |
| |
| Test 2 |
| -------------------------------------- |
| PASS getComputedStyle(testElement, null).getPropertyValue('background-color') is 'rgb(0, 128, 0)' |
| |
| #testdiv { background-color: green; } |
| @page :right { margin-left: 3cm; } |
| @-webkit-keyframes bounce { |
| 0% { left: 0px; } |
| 100% { left: 200px; } |
| } |
| @font-face { font-family: Foo; } |
| |
| Test 3 |
| -------------------------------------- |
| PASS getComputedStyle(testElement, null).getPropertyValue('background-color') is 'rgb(0, 128, 0)' |
| |
| #testdiv { background-color: green; } |
| @media all { |
| #testdiv { background-color: red; } |
| #testdiv { background-color: green; } |
| } |
| @page :right { margin-left: 3cm; } |
| @-webkit-keyframes bounce { |
| 0% { left: 0px; } |
| 100% { left: 200px; } |
| } |
| @font-face { font-family: Foo; } |
| |
| Test 4 |
| -------------------------------------- |
| PASS getComputedStyle(testElement, null).getPropertyValue('background-color') is 'rgb(0, 128, 0)' |
| |
| #testdiv { background-color: green; } |
| @media all { |
| } |
| @page :right { margin-left: 3cm; } |
| @-webkit-keyframes bounce { |
| 0% { left: 0px; } |
| 100% { left: 200px; } |
| } |
| @font-face { font-family: Foo; } |
| |
| Test 5 |
| -------------------------------------- |
| PASS getComputedStyle(testElement, null).getPropertyValue('background-color') is 'rgb(0, 128, 0)' |
| |
| #testdiv { background-color: green; } |
| @media all { |
| #testdiv { background-color: green; } |
| } |
| @page :right { margin-left: 3cm; } |
| @-webkit-keyframes bounce { |
| 0% { left: 0px; } |
| 100% { left: 200px; } |
| } |
| @font-face { font-family: Foo; } |
| |
| Test 6 |
| -------------------------------------- |
| PASS getComputedStyle(testElement, null).getPropertyValue('background-color') is 'rgb(0, 128, 0)' |
| |
| #testdiv { background-color: green; } |
| @media all { |
| #testdiv { } |
| } |
| @page :right { margin-left: 3cm; } |
| @-webkit-keyframes bounce { |
| 0% { left: 0px; } |
| 100% { left: 200px; } |
| } |
| @font-face { font-family: Foo; } |
| |
| Test 7 |
| -------------------------------------- |
| PASS getComputedStyle(testElement, null).getPropertyValue('background-color') is 'rgb(0, 128, 0)' |
| |
| #testdiv { background-color: green; } |
| @media all { |
| #testdiv { background-color: green; } |
| } |
| @page :right { margin-left: 3cm; } |
| @-webkit-keyframes bounce { |
| 0% { left: 0px; } |
| 100% { left: 200px; } |
| } |
| @font-face { font-family: Foo; } |
| |
| Test 8 |
| -------------------------------------- |
| PASS getComputedStyle(testElement, null).getPropertyValue('background-color') is 'rgb(0, 128, 0)' |
| |
| #testdiv { background-color: green; } |
| @media all { |
| #dontmatch { background-color: red; } |
| } |
| @page :right { margin-left: 3cm; } |
| @-webkit-keyframes bounce { |
| 0% { left: 0px; } |
| 100% { left: 200px; } |
| } |
| @font-face { font-family: Foo; } |
| |
| Test 9 |
| -------------------------------------- |
| PASS getComputedStyle(testElement, null).getPropertyValue('background-color') is 'rgb(0, 128, 0)' |
| |
| #testdiv { background-color: green; } |
| @media print { |
| #testdiv { background-color: red; } |
| } |
| @page :right { margin-left: 3cm; } |
| @-webkit-keyframes bounce { |
| 0% { left: 0px; } |
| 100% { left: 200px; } |
| } |
| @font-face { font-family: Foo; } |
| |
| Test 10 |
| -------------------------------------- |
| PASS getComputedStyle(testElement, null).getPropertyValue('background-color') is 'rgb(0, 128, 0)' |
| |
| #testdiv { background-color: green; } |
| @media print { |
| #testdiv { background-color: red; } |
| } |
| @page :right { margin-left: 3cm; } |
| @-webkit-keyframes bounce { |
| 0% { left: 0px; } |
| 100% { left: 200px; } |
| } |
| @font-face { font-family: Foo; } |
| |
| Test 11 |
| -------------------------------------- |
| PASS getComputedStyle(testElement, null).getPropertyValue('background-color') is 'rgb(0, 128, 0)' |
| |
| #testdiv { background-color: green; } |
| |
| Test 12 |
| -------------------------------------- |
| PASS getComputedStyle(testElement, null).getPropertyValue('background-color') is 'rgb(0, 128, 0)' |
| |
| @import url("data:text/css;charset=utf-8,%23testdiv%7Bbackground-color%3Agreen%20!important%7D"); |
| #testdiv { background-color: green; } |
| @media all { |
| #testdiv { background-color: red; } |
| } |
| @page :right { margin-left: 3cm; } |
| @-webkit-keyframes bounce { |
| 0% { left: 0px; } |
| 100% { left: 200px; } |
| } |
| @font-face { font-family: Foo; } |
| |
| Test 13 |
| -------------------------------------- |
| PASS getComputedStyle(testElement, null).getPropertyValue('background-color') is 'rgb(255, 0, 0)' |
| |
| #testdiv { background-color: green; } |
| @media all { |
| #testdiv { background-color: red; } |
| } |
| @page foo { margin-left: 3cm; } |
| @-webkit-keyframes bounce { |
| 0% { left: 0px; } |
| 100% { left: 200px; } |
| } |
| @font-face { font-family: Foo; } |
| |
| Test 14 |
| -------------------------------------- |
| PASS getComputedStyle(testElement, null).getPropertyValue('background-color') is 'rgb(255, 0, 0)' |
| |
| #testdiv { background-color: green; } |
| @media all { |
| #testdiv { background-color: red; } |
| } |
| @page :right { margin-left: 3cm; } |
| @-webkit-keyframes bounce { |
| 0% { left: 0px; } |
| 100% { left: 200px; } |
| 40% { left: 40px; } |
| } |
| @font-face { font-family: Foo; } |
| |
| Test 15 |
| -------------------------------------- |
| PASS getComputedStyle(testElement, null).getPropertyValue('background-color') is 'rgb(255, 0, 0)' |
| |
| #testdiv { background-color: green; } |
| @media all { |
| #testdiv { background-color: red; } |
| } |
| @page :right { margin-left: 3cm; } |
| @-webkit-keyframes bounce { |
| 0% { left: 0px; } |
| } |
| @font-face { font-family: Foo; } |
| |
| Test 16 |
| -------------------------------------- |
| PASS getComputedStyle(testElement, null).getPropertyValue('background-color') is 'rgb(255, 0, 0)' |
| |
| #testdiv { background-color: green; } |
| @media all { |
| #testdiv { background-color: red; } |
| } |
| @page :right { margin-left: 3cm; } |
| @-webkit-keyframes bounce { |
| 0% { left: 0px; } |
| 100% { left: 200px; } |
| } |
| @font-face { font-family: Bar; } |
| |
| PASS successfullyParsed is true |
| |
| TEST COMPLETE |
| |