blob: 1a9bdaf18073866838995d14903da2f8617d33b6 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<title>Style element has error on bad style hash</title>
<meta http-equiv="Content-Security-Policy" content="style-src 'sha256-FSRZotz4y83Ib8ZaoVj9eXKaeWXVUawM8zAPfYeYySs='">
<script src="/js-test-resources/testharness.js"></script>
<script src="/js-test-resources/testharnessreport.js"></script>
<script>
function styleError() {
var color = window.getComputedStyle(document.querySelector('p')).color;
assert_equals(color, "rgb(0, 128, 0)", "The color of the paragraph is still green.");
done();
}
</script>
<style>p { color: green; }</style>
<style onerror="styleError();">p { color: red; }</style>
</head>
<script>
function verifyStep1() {
var color = window.getComputedStyle(document.querySelector('p')).color;
assert_equals(color, "rgb(0, 128, 0)", "The color of the paragraph is still green after initial style.");
}
function setupStep2() {
var sty = document.createElement("style");
sty.innerHTML = "p { color: red; }";
sty.onerror = styleError;
document.body.appendChild(sty);
}
function verifyStep2() {
var color = window.getComputedStyle(document.querySelector('p')).color;
assert_equals(color, "rgb(0, 128, 0)", "The color of the paragraph is still green after inserted style.");
}
function setupStep3() {
var e = document.getElementById('style1');
e.innerHTML = "p { color: blue; }";
}
function verifyStep3() {
var color = window.getComputedStyle(document.querySelector('p')).color;
assert_equals(color, "rgb(0, 128, 0)", "The color of the paragraph is still green after changing style.");
test.done();
}
var verifySteps = [ verifyStep1, verifyStep2, verifyStep3 ];
var setupSteps = [ setupStep2, setupStep3 ];
var test = async_test("Test that paragraph remains green and error events received.");
function styleError() {
test.step(function() {
verifySteps.shift()();
var nextSetup = setupSteps.shift();
if (nextSetup)
nextSetup();
});
}
</script>
</head>
<body>
<style>p { color: green; }</style>
<style id="style1" onerror="styleError();">p { color: red; }</style>
<p>A test paragraph</p>
</body>
</html>