| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Shadow DOM: Link and style elements inside a shadow tree should not affect the preferred stylesheet</title> |
| <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"> |
| <meta name="assert" content="Link and style elements inside a shadow tree should not affect the preferred stylesheet"> |
| <script src='../../resources/testharness.js'></script> |
| <script src='../../resources/testharnessreport.js'></script> |
| </head> |
| <body> |
| <script> |
| |
| function make_iframe(markup, testFunction) { |
| return () => { |
| const iframe = document.createElement('iframe'); |
| return new Promise(function (resolve) { |
| iframe.onload = () => { resolve(iframe.contentDocument); }; |
| document.body.appendChild(iframe); |
| }).then(function (doc) { |
| doc.open(); |
| doc.write(markup); |
| doc.close(); |
| return testFunction(doc, doc.querySelector('div')); |
| }).then(() => iframe.remove(), error => { |
| iframe.remove(); |
| return Promise.reject(error); |
| }); |
| }; |
| } |
| |
| // Some browsers don't synchronously update the selected stylesheet. |
| function wait_for_stylesheet_to_be_selected() { |
| return new Promise(function (resolve) { |
| setTimeout(resolve, 0); |
| }); |
| } |
| |
| promise_test(make_iframe(`<!DOCTYPE html><body>`, (doc) => { |
| doc.body.innerHTML = `<style title="foo">div { color: red; }</style>`; |
| return wait_for_stylesheet_to_be_selected().then(() => { |
| assert_equals(doc.preferredStylesheetSet, 'foo'); |
| assert_equals(doc.selectedStylesheetSet, 'foo'); |
| }); |
| }), 'The title attribute on the style element in a document must set the preferred stylesheet.'); |
| |
| promise_test(make_iframe(`<!DOCTYPE html><body><div>`, (doc) => { |
| doc.querySelector('div').attachShadow({mode: 'closed'}).innerHTML = `<style title="foo"></style>`; |
| return wait_for_stylesheet_to_be_selected().then(() => { |
| assert_equals(doc.preferredStylesheetSet, null); |
| assert_equals(doc.selectedStylesheetSet, null); |
| }); |
| }), 'The title attribute on the style element inside a closed shadow tree must not set the preferred stylesheet.'); |
| |
| promise_test(make_iframe(`<!DOCTYPE html><body><div>`, (doc) => { |
| doc.querySelector('div').attachShadow({mode: 'open'}).innerHTML = `<style title="foo"></style>`; |
| return wait_for_stylesheet_to_be_selected().then(() => { |
| assert_equals(doc.preferredStylesheetSet, null); |
| assert_equals(doc.selectedStylesheetSet, null); |
| }); |
| }), 'The title attribute on the style element inside an open shadow tree must not set the preferred stylesheet.'); |
| |
| function insert_link_and_wait(parent, title) { |
| return new Promise((resolve, reject) => { |
| const link = parent.ownerDocument.createElement('link'); |
| link.rel = 'stylesheet'; |
| link.title = title; |
| link.href = 'resources/green-host.css'; |
| link.onload = resolve; |
| parent.appendChild(link); |
| setTimeout(() => reject('Failed to load the stylesheet'), 1000); |
| }).then(() => wait_for_stylesheet_to_be_selected()); |
| } |
| |
| promise_test(make_iframe(`<!DOCTYPE html><body>`, (doc) => { |
| return insert_link_and_wait(doc.body, 'foo').then(() => { |
| assert_equals(doc.preferredStylesheetSet, 'foo'); |
| assert_equals(doc.selectedStylesheetSet, 'foo'); |
| }); |
| }), 'The title attribute on the link element in a document must set the preferred stylesheet.'); |
| |
| promise_test(make_iframe(`<!DOCTYPE html><body><div>`, (doc) => { |
| const root = doc.querySelector('div').attachShadow({mode: 'closed'}); |
| return insert_link_and_wait(root, 'foo').then(() => { |
| assert_equals(doc.preferredStylesheetSet, null); |
| assert_equals(doc.selectedStylesheetSet, null); |
| }); |
| }), 'The title attribute on the link element inside a closed shadow tree must not set the preferred stylesheet.'); |
| |
| promise_test(make_iframe(`<!DOCTYPE html><body><div>`, (doc) => { |
| const root = doc.querySelector('div').attachShadow({mode: 'open'}); |
| return insert_link_and_wait(root, 'foo').then(() => { |
| assert_equals(doc.preferredStylesheetSet, null); |
| assert_equals(doc.selectedStylesheetSet, null); |
| }); |
| }), 'The title attribute on the link element inside an open shadow tree must not set the preferred stylesheet.'); |
| |
| </script> |
| </html> |
| </body> |
