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; }
}
#testdiv { background-color: green; }
@page :right { margin-left: 3cm; }
@-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