| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>SVG 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 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 svg style."); |
| } |
| |
| function setupStep2() { |
| var e = document.getElementById("svgelement"); |
| var sty = document.createElementNS("http://www.w3.org/2000/svg", "style"); |
| sty.innerHTML = "p { color: red; }"; |
| sty.onerror = styleError; |
| e.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 svg 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 svg 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> |
| <svg id="svgelement" xmlns="http://www.w3.org/2000/svg" width="800" height="100"> |
| <style>p { color: green; }</style> |
| <style id="style1" onerror="styleError();">p { color: red; }</style> |
| <p>A test paragraph</p> |
| </svg> |
| </body> |
| </html> |