fetch-resources.sub.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 2 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/fetching/fetch-resources.sub.html - WPT Dashboard Interop Dashboard

<!DOCTYPE HTML>

<html>

<head>

<title>Test various interactions between fetch, service-workers and resource timing</title>

<meta charset="utf-8" />

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="support/echo-helper.js"></script>

<link rel=help href="https://github.com/w3c/csswg-drafts/pull/6715">

</head>

<body>

<script>

    const image_url = '/css/support/1x1-green.png'

    const font_url = '/fonts/pass.woff'

    const stylesheet_url = '/css/support/a-green.css'

    async function load_image({url, prop, uid}, t) {

        const element = document.createElement('div');

        const echo = get_resource_echo_url(uid, url)

        element.style[prop] = `url(${echo})`

        document.body.appendChild(element);

        t.add_cleanup(() => element.remove());

        await wait_for_resource(echo);

        const headers = await get_headers(uid);

        return headers[url]

    async function load_font({url, uid}, t) {

        const echo = get_resource_echo_url(uid, url)

        const style = `

          @font-face { font-family: "SomeFont"; src: url(${echo}); }

        const styleElement =  document.createElement('style')

        styleElement.innerHTML = style

        document.head.appendChild(styleElement)

        const element = document.createElement('p')

        element.innerText = "SomeFont"

        element.style.fontFamily = 'SomeFont'

        document.body.appendChild(element)

        t.add_cleanup(() => element.remove())

        t.add_cleanup(() => styleElement.remove())

        await wait_for_resource(echo);

        const headers = await get_headers(uid);

        return headers[url]

    async function load_stylesheet({url, uid}, t) {

        const echo = get_resource_echo_url(uid, url)

        const styleElement =  document.createElement('style')

        styleElement.innerHTML = `@import "${echo}"`

        document.head.appendChild(styleElement)

        t.add_cleanup(() => styleElement.remove())

        await wait_for_resource(echo);

        const headers = await get_headers(uid);

        return headers[url]

    function load_style(text, host, t) {

        const styleElement =  document.createElement('style');

        const styleURL = `${host || window.origin}/css/fetching/support/echo-css.py?content=${encodeURIComponent(text)}`;

        styleElement.innerHTML = `@import "${styleURL}"`;

        document.head.appendChild(styleElement);

        t.add_cleanup(() => styleElement.remove());

        return styleURL

    function extract_cors_mode(result) {

        const fetchMode = result['sec-fetch-mode'];

        if (fetchMode)

            return fetchMode;

        return Reflect.has(result, 'origin') ? 'cors' : 'no-cors';

    promise_test(async t => {

        const uid = "{{uuid()}}";

        const result = await load_image({uid, url: image_url, prop: 'background'}, t)

        assert_equals(extract_cors_mode(result), 'no-cors');

    }, 'Background images should fetch with no-cors');

    promise_test(async t => {

        const uid = "{{uuid()}}";

        const result = await load_image({uid, url: image_url, prop: 'shape-outside'}, t)

        assert_equals(extract_cors_mode(result), 'cors');

    }, 'Shape images should fetched with cors');

    promise_test(async t => {

        const uid = "{{uuid()}}";

        const result = await load_font({uid, url: font_url}, t)

        assert_equals(extract_cors_mode(result), 'cors');

    }, "WebFonts should be fetched with cors")

    promise_test(async t => {

        const uid = "{{uuid()}}";

        const result = await load_stylesheet({uid, url: stylesheet_url}, t)

        assert_equals(extract_cors_mode(result), 'no-cors');

    }, "CSS imports should be fetched without cors")

</script>

</body>

</html>