mihaisucan/test.css

## test.css

@import "test2.css";

.foobar { color: blue }

@media screen {
  .foobar {
    border: 1px solid green;
    text-align: error;
    -whatever: test;
    -webkit-omg: lolz;
  }
}


## test.html
<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      @import "test.css";

      .foobar { color: pink; }

      .test, #test { color: green }
      #test {
        border: 20px solid blue;
      }
      #foobar {
        background: gray;
        color: gray;
        -webkit-bad-property: value;
        -o-bad-property: value;
        -ms-bad-property: value;
        -unknown-property: value;
        woahaha-property: value;
        broken: value;
        background: error;
      }
    </style>
  </head>
  <body>
    <div class="test">hello world!</div>
    <div id="test">hello world!</div>
    <div id="foobar" style="font-weight:bold;color:white">
      <p>hello world!</p>
      <div class="test" style="color:blue;padding:5px;">hello world!</div>
    </div>
    <div class="foobar">foobar</div>

    <button>generate error!</button>

    <script type="text/javascript"><!--
      //window.console = {};
      //window.console.error = function() { alert("lol") };

      (function () {
        var btn = document.getElementsByTagName('button')[0];
        btn.addEventListener('click', function(ev) {
          document.body.childNodes[1000];
          ev.preventBubble();
          foo.bar.intern();
        }, false);

        var myEventHandler = function (ev) {
          console.log(ev.type, ev);
          console.info("info " + ev.type);
          console.error("error " + ev.type);
          console.warn("warn " + ev.type);
        };

        document.body.addEventListener('mousedown', myEventHandler, false);
        document.body.addEventListener('mouseup', myEventHandler, false);
        document.body.addEventListener('click', myEventHandler, false);
        document.body.addEventListener('dragstart', myEventHandler, false);
        document.body.addEventListener('dragend', myEventHandler, false);
      })();

      function createIframeDocument()
      {
        var iframe = document.createElement('iframe');

        iframe.addEventListener("load", function () {
          iframe.removeEventListener("load", arguments.callee, false);

          var div = iframe.contentDocument.createElement('div');
          div.textContent = 'little div';
          iframe.contentDocument.body.appendChild(div);

          var iframe2 = iframe.contentDocument.createElement('iframe');

          iframe2.addEventListener('load', function () {
            iframe2.removeEventListener('load', arguments.callee, false);

            var div2 = iframe2.contentDocument.createElement('div');
            div2.textContent = 'nested div';
            iframe2.contentDocument.body.appendChild(div2);

            var div3 = iframe2.contentDocument.createElement('div');
            div3.textContent = 'big div';
            div3.setAttribute('style', 'height:500px; width:500px; border:1px solid gray;');

            iframe2.contentDocument.body.appendChild(div3);
          }, false);

          iframe2.src = 'data:text/html,nested iframe';
          iframe.contentDocument.body.appendChild(iframe2);
        }, false);

        iframe.src = 'data:text/html,little iframe';
        document.body.appendChild(iframe);
      }

      window.addEventListener('load', createIframeDocument, false);
    // --></script>
    <script type="application/javascript;version=1.7" src="test.js"></script>
    <img src="lolz.png">
  </body>
</html>

## test.js

(function () {
  var btn = document.getElementsByTagName('button')[0];
  btn.addEventListener('click', function (ev) {
    ev.preventBubble();
    foo.bar.extern();
  }, false);
})();


## test2.css

@import "test.css";

.foobar { color: green }

	@import "test2.css";

	.foobar { color: blue }

	@media screen {
	.foobar {
	border: 1px solid green;
	text-align: error;
	-whatever: test;
	-webkit-omg: lolz;
	}
	}
	<!DOCTYPE html>
	<html>
	<head>
	<style type="text/css">
	@import "test.css";

	.foobar { color: pink; }

	.test, #test { color: green }
	#test {
	border: 20px solid blue;
	}
	#foobar {
	background: gray;
	color: gray;
	-webkit-bad-property: value;
	-o-bad-property: value;
	-ms-bad-property: value;
	-unknown-property: value;
	woahaha-property: value;
	broken: value;
	background: error;
	}
	</style>
	</head>
	<body>
	<div class="test">hello world!</div>
	<div id="test">hello world!</div>
	<div id="foobar" style="font-weight:bold;color:white">
	<p>hello world!</p>
	<div class="test" style="color:blue;padding:5px;">hello world!</div>
	</div>
	<div class="foobar">foobar</div>

	<button>generate error!</button>

	<script type="text/javascript"><!--
	//window.console = {};
	//window.console.error = function() { alert("lol") };

	(function () {
	var btn = document.getElementsByTagName('button')[0];
	btn.addEventListener('click', function(ev) {
	document.body.childNodes[1000];
	ev.preventBubble();
	foo.bar.intern();
	}, false);

	var myEventHandler = function (ev) {
	console.log(ev.type, ev);
	console.info("info " + ev.type);
	console.error("error " + ev.type);
	console.warn("warn " + ev.type);
	};

	document.body.addEventListener('mousedown', myEventHandler, false);
	document.body.addEventListener('mouseup', myEventHandler, false);
	document.body.addEventListener('click', myEventHandler, false);
	document.body.addEventListener('dragstart', myEventHandler, false);
	document.body.addEventListener('dragend', myEventHandler, false);
	})();

	function createIframeDocument()
	{
	var iframe = document.createElement('iframe');

	iframe.addEventListener("load", function () {
	iframe.removeEventListener("load", arguments.callee, false);

	var div = iframe.contentDocument.createElement('div');
	div.textContent = 'little div';
	iframe.contentDocument.body.appendChild(div);

	var iframe2 = iframe.contentDocument.createElement('iframe');

	iframe2.addEventListener('load', function () {
	iframe2.removeEventListener('load', arguments.callee, false);

	var div2 = iframe2.contentDocument.createElement('div');
	div2.textContent = 'nested div';
	iframe2.contentDocument.body.appendChild(div2);

	var div3 = iframe2.contentDocument.createElement('div');
	div3.textContent = 'big div';
	div3.setAttribute('style', 'height:500px; width:500px; border:1px solid gray;');

	iframe2.contentDocument.body.appendChild(div3);
	}, false);

	iframe2.src = 'data:text/html,nested iframe';
	iframe.contentDocument.body.appendChild(iframe2);
	}, false);

	iframe.src = 'data:text/html,little iframe';
	document.body.appendChild(iframe);
	}

	window.addEventListener('load', createIframeDocument, false);
	// --></script>
	<script type="application/javascript;version=1.7" src="test.js"></script>
	<img src="lolz.png">
	</body>
	</html>

	(function () {
	var btn = document.getElementsByTagName('button')[0];
	btn.addEventListener('click', function (ev) {
	ev.preventBubble();
	foo.bar.extern();
	}, false);
	})();