<!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>