<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="expires" content="0"/>
<script src="resources/print.js"></script>
<script>
function test()
{
    if (window.testRunner) {
        testRunner.dumpAsText();
        testRunner.waitUntilDone();
    }

	frame = document.createElement("iframe");
	frame.setAttribute("src", "resources/content.xhtml");
	frame.addEventListener("load", function(){
		setTimeout(step2, 0);
	}, { once: true });
	
	document.body.appendChild(frame);

    var link;
    var head;

	function step2() {
        head = frame.contentDocument.getElementsByTagName('head')[0];

		link = frame.contentDocument.createElement('link');
        link.type = 'text/css';
        link.rel = 'stylesheet';
    
		link.addEventListener("beforeload", function() {
            print("PASS: Beforeload handled.", "green");
            link.href = 'fail.css';
            setTimeout(step3, 0);
        }, { once: true });

        link.href = 'pass.css';

        head.appendChild(link);
	}

    function step3() {		
		head.removeChild(link);
		link = null;

        print("PASS: No assertions hit.", "green");

        if (window.testRunner)
            testRunner.notifyDone();
    }
}
</script>
</head>
<body onload="test()">
<p>This test confirms that link elements properly handled changes during 'beforeload' events. It passes if no debug assertions are fired.</p>
<div id="console"></div>
</body>
</html>