142 lines
5.4 KiB
HTML
142 lines
5.4 KiB
HTML
<!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;
|
|
let stylesheet_ready = null;
|
|
async function create_iframe() {
|
|
if (!stylesheet_ready) { // Cache the stylesheet first to avoid timeout in the very first test case.
|
|
stylesheet_ready = new Promise((resolve) => {
|
|
const link = document.createElement('link');
|
|
link.rel = 'stylesheet';
|
|
link.href = 'resources/green-host.css';
|
|
link.addEventListener('load', () => {
|
|
link.remove();
|
|
resolve();
|
|
});
|
|
document.body.appendChild(link);
|
|
});
|
|
}
|
|
await create_iframe;
|
|
|
|
if (test_iframe)
|
|
test_iframe.remove();
|
|
|
|
test_iframe = document.createElement('iframe');
|
|
return stylesheet_ready.then(() => {
|
|
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>
|