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