blob: eaa4a98fa44a7aaa8ea0b23e62174ab43b7da051 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<title>Shadow DOM: Link elements should load stylesheets inside shadow trees</title>
<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
<meta name="assert" content="Link elements should load inside shadow trees">
<script src='../../resources/testharness.js'></script>
<script src='../../resources/testharnessreport.js'></script>
</head>
<body>
<script>
function wait_for_onload(element, callback = null) {
return new Promise(function (resolve, reject) {
element.onload = resolve;
element.onerror = reject;
setTimeout(() => reject('timeout'), 100);
if (callback)
return callback();
});
}
let test_iframe;
function create_iframe() {
if (test_iframe)
test_iframe.remove();
test_iframe = document.createElement('iframe');
return wait_for_onload().then(() => test_iframe.contentWindow, () => {
document.body.appendChild(test_iframe);
}).then(function () {
const doc = test_iframe.contentWindow.document;
doc.open();
doc.write('<!DOCTYPE html><html><head><body>');
doc.close();
return test_iframe.contentWindow;
});
}
add_result_callback(() => {
if (test_iframe)
test_iframe.remove();
});
function test_stylesheet_load_in_connected_shadow_tree(mode) {
promise_test(() => {
return create_iframe().then(contentWindow => {
const doc = contentWindow.document;
const host = doc.createElement('div');
const link = doc.createElement('link');
return wait_for_onload(link, () => {
link.rel = 'stylesheet';
link.href = 'resources/green-host.css';
host.attachShadow({mode: mode}).appendChild(link);
contentWindow.document.body.appendChild(host);
});
});
}, `Link elements should load stylesheets inside a connected shadow tree with ${mode} mode`);
}
test_stylesheet_load_in_connected_shadow_tree('closed');
test_stylesheet_load_in_connected_shadow_tree('open');
function test_stylesheet_do_not_load_in_disconnected_shadow_tree(mode) {
promise_test(() => {
return create_iframe().then((contentWindow) => {
const doc = contentWindow.document;
const host = doc.createElement('div');
const link = doc.createElement('link');
return wait_for_onload(link, () => {
link.rel = 'stylesheet';
link.href = 'resources/green-host.css';
host.attachShadow({mode: mode}).appendChild(link);
});
}).then(() => {
assert_true(false, 'stylesheet must not load inside a disconnected shadow tree');
}, (error) => {
assert_equals(error, 'timeout');
});
}, `Link elements must not load stylesheets inside a disconnceted shadow tree with ${mode} mode`);
}
test_stylesheet_do_not_load_in_disconnected_shadow_tree('closed');
test_stylesheet_do_not_load_in_disconnected_shadow_tree('open');
function test_loaded_stylesheet_rule_in_shadow_tree_applies_to_div(mode) {
promise_test(() => {
let div;
return create_iframe().then(function (contentWindow) {
const doc = contentWindow.document;
const host = doc.createElement('div');
const shadowRoot = host.attachShadow({mode: mode});
shadowRoot.innerHTML = '<link rel="stylesheet" href="resources/green-host.css"><div>';
div = shadowRoot.querySelector('div');
return wait_for_onload(shadowRoot.querySelector('link'), () => { doc.body.appendChild(host) });
}).then(() => {
assert_equals(getComputedStyle(div).color, 'rgb(0, 128, 0)');
});
}, `Style rules loaded inside a shadow tree with ${mode} mode must apply to a div in the shadow tree`);
}
test_loaded_stylesheet_rule_in_shadow_tree_applies_to_div('closed');
test_loaded_stylesheet_rule_in_shadow_tree_applies_to_div('open');
function test_loaded_stylesheet_rule_in_shadow_tree_applies_to_host(mode) {
promise_test(() => {
let host;
return create_iframe().then(function (contentWindow) {
const doc = contentWindow.document;
host = doc.createElement('div');
const shadowRoot = host.attachShadow({mode: mode});
shadowRoot.innerHTML = '<link rel="stylesheet" href="resources/green-host.css"><div>';
return wait_for_onload(shadowRoot.querySelector('link'), () => { doc.body.appendChild(host) });
}).then(() => {
assert_equals(getComputedStyle(host).color, 'rgb(0, 128, 0)');
});
}, `:host style rules loaded inside a shadow tree with ${mode} mode must apply to the host element`);
}
test_loaded_stylesheet_rule_in_shadow_tree_applies_to_host('closed');
test_loaded_stylesheet_rule_in_shadow_tree_applies_to_host('open');
</script>
</html>
</body>