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)'

@charset "utf-8";
#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)'

@charset "utf-8";
#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)'

@charset "utf-8";
#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)'

@charset "utf-8";
#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)'

@charset "utf-8";
#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)'

@charset "utf-8";
#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)'

@charset "utf-8";
#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)'

@charset "utf-8";
#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)'

@charset "utf-8";
#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)'

@charset "utf-8";
#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)'

@charset "utf-8";
#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)'

@charset "utf-8";
@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)'

@charset "utf-8";
#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)'

@charset "utf-8";
#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)'

@charset "utf-8";
#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)'

@charset "utf-8";
#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