web-bundle/subresource-loading/subresource-load.https.tentative.sub.html - external/w3c/web-platform-tests.git - Git at Google

 <!DOCTYPE html>
 <title>Subresource loading with script type="webbundle"</title>
 <link
   rel="help"
   href="https://github.com/WICG/webpackage/blob/main/explainers/subresource-loading.md"
 />
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="../resources/test-helpers.js"></script>
 <body>
   <script type="webbundle">
     {
       "source": "../resources/wbn/subresource.wbn",
       "resources": [
         "https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/root.js",
         "https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/submodule.js"
       ]
     }
   </script>
   <script>
     setup(() => {
       assert_true(HTMLScriptElement.supports("webbundle"));
     });

     promise_test(async () => {
       const module = await import(
         "https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/root.js"
       );
       assert_equals(module.result, "OK");
     }, "Subresource loading with WebBundle");

     promise_test(async () => {
       const response = await fetch(
         "https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/root.js"
       );
       const text = await response.text();
       assert_equals(text, "export * from './submodule.js';\n");
     }, "Subresource loading with WebBundle (Fetch API)");

     promise_test((t) => {
       const url =
         "/common/redirect.py?location=https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/root.js";
       return promise_rejects_js(t, TypeError, import(url));
     }, "Subresource loading with WebBundle shouldn't affect redirect");

     promise_test(async () => {
       const element = createWebBundleElement("../resources/wbn/dynamic1.wbn", [
         "https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/dynamic/resource1.js",
         "https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/dynamic/resource2.js",
         "https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/dynamic/resource4.js",
       ]);
       document.body.appendChild(element);

       const module = await import(
         "https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/dynamic/resource1.js"
       );
       assert_equals(module.result, "resource1 from dynamic1.wbn");

       const new_element = removeAndAppendNewElementWithUpdatedRule(element, {
         url: "../resources/wbn/dynamic2.wbn",
       });
       const module2 = await import(
         "https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/dynamic/resource2.js"
       );
       assert_equals(module2.result, "resource2 from dynamic2.wbn");

       // A resource not specified in the resources attribute, but in the bundle.
       const module3 = await import(
         "https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/dynamic/resource3.js"
       );
       assert_equals(module3.result, "resource3 from network");

       document.body.removeChild(new_element);
       const module4 = await import(
         "https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/dynamic/resource4.js"
       );
       assert_equals(module4.result, "resource4 from network");

       // Module scripts are stored to the Document's module map once loaded.
       // So import()ing the same module script will reuse the previously loaded
       // script.
       const module_second = await import(
         "https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/dynamic/resource1.js"
       );
       assert_equals(module_second.result, "resource1 from dynamic1.wbn");
     }, "Dynamically adding / updating / removing the webbundle element.");

     promise_test(async () => {
       const classic_script_url =
         "https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/dynamic/classic_script.js";
       const element = createWebBundleElement("../resources/wbn/dynamic1.wbn", [
         classic_script_url,
       ]);
       document.body.appendChild(element);
       assert_equals(
         await loadScriptAndWaitReport(classic_script_url),
         "classic script from dynamic1.wbn"
       );
       const new_element = removeAndAppendNewElementWithUpdatedRule(element, {
         url: "../resources/wbn/dynamic2.wbn",
       });
       // Loading the classic script should not reuse the previously loaded
       // script. So in this case, the script must be loaded from dynamic2.wbn.
       assert_equals(
         await loadScriptAndWaitReport(classic_script_url),
         "classic script from dynamic2.wbn"
       );
       document.body.removeChild(new_element);
       // And in this case, the script must be loaded from network.
       assert_equals(
         await loadScriptAndWaitReport(classic_script_url),
         "classic script from network"
       );
     }, "Dynamically loading classic script from web bundle");

     promise_test(async (t) => {
       // To avoid caching mechanism, this test is using fetch() API with
       // { cache: 'no-store' } to load the resource.
       const classic_script_url =
         "https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/dynamic/classic_script.js";

       assert_equals(
         await (await fetch(classic_script_url)).text(),
         "window.report_result('classic script from network');\n"
       );

       const element1 = createWebBundleElement("../resources/wbn/dynamic1.wbn", [
         classic_script_url,
       ]);
       document.body.appendChild(element1);
       t.add_cleanup(() => {
         if (element1.parentElement)
           element1.parentElement.removeChild(element1);
       });

       assert_equals(
         await (await fetch(classic_script_url, { cache: "no-store" })).text(),
         "window.report_result('classic script from dynamic1.wbn');\n"
       );

       const element2 = createWebBundleElement("../resources/wbn/dynamic2.wbn", [
         classic_script_url,
       ]);
       document.body.appendChild(element2);
       t.add_cleanup(() => {
         if (element2.parentElement)
           element2.parentElement.removeChild(element2);
       });

       assert_equals(
         await (await fetch(classic_script_url, { cache: "no-store" })).text(),
         "window.report_result('classic script from dynamic2.wbn');\n"
       );

       document.body.removeChild(element2);

       assert_equals(
         await (await fetch(classic_script_url, { cache: "no-store" })).text(),
         "window.report_result('classic script from dynamic1.wbn');\n"
       );

       document.body.removeChild(element1);

       assert_equals(
         await (await fetch(classic_script_url, { cache: "no-store" })).text(),
         "window.report_result('classic script from network');\n"
       );
     }, "Multiple web bundle elements. The last added element must be refered.");

     promise_test(async () => {
       const classic_script_url =
         "https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/dynamic/classic_script.js";
       const scope =
         "https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/dynamic/";
       const element = createWebBundleElement(
         "../resources/wbn/dynamic1.wbn",
         [],
         { scopes: [scope] }
       );
       document.body.appendChild(element);
       assert_equals(
         await loadScriptAndWaitReport(classic_script_url),
         "classic script from dynamic1.wbn"
       );
       const new_element = removeAndAppendNewElementWithUpdatedRule(element, {
         url: "../resources/wbn/dynamic2.wbn",
       });
       // Loading the classic script should not reuse the previously loaded
       // script. So in this case, the script must be loaded from dynamic2.wbn.
       assert_equals(
         await loadScriptAndWaitReport(classic_script_url),
         "classic script from dynamic2.wbn"
       );
       // Changes the scope not to hit the classic_script.js.
       const new_element2 = removeAndAppendNewElementWithUpdatedRule(
         new_element,
         { scopes: [scope + "dummy"] }
       );
       // And in this case, the script must be loaded from network.
       assert_equals(
         await loadScriptAndWaitReport(classic_script_url),
         "classic script from network"
       );
       // Adds the scope to hit the classic_script.js.
       const new_element3 = removeAndAppendNewElementWithUpdatedRule(
         new_element2,
         { scopes: [scope + "dummy", scope + "classic_"] }
       );
       assert_equals(
         await loadScriptAndWaitReport(classic_script_url),
         "classic script from dynamic2.wbn"
       );
       document.body.removeChild(new_element3);
       // And in this case, the script must be loaded from network.
       assert_equals(
         await loadScriptAndWaitReport(classic_script_url),
         "classic script from network"
       );
     }, "Dynamically loading classic script from web bundle with scopes");

     promise_test(() => {
       return addWebBundleElementAndWaitForLoad(
         "../resources/wbn/dynamic1.wbn?test-event",
         /*resources=*/ [],
         { crossOrigin: undefined }
       );
     }, "The webbundle element fires a load event on load success");

     promise_test((t) => {
       return addWebBundleElementAndWaitForError(
         "../resources/wbn/nonexistent.wbn",
         /*resources=*/ [],
         { crossOrigin: undefined }
       );
     }, "The webbundle element fires an error event on load failure");

     promise_test(async () => {
       const module_script_url =
         "https://www1.{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/dynamic/resource1.js";
       const element = createWebBundleElement(
         "../resources/wbn/dynamic1-crossorigin.wbn",
         [module_script_url]
       );
       document.body.appendChild(element);
       const module = await import(module_script_url);
       assert_equals(module.result, "resource1 from network");
     }, "Subresource URL must be same-origin with bundle URL");

     promise_test(async () => {
       const url = "uuid-in-package:020111b3-437a-4c5c-ae07-adb6bbffb720";
       const element = createWebBundleElement(
         "../resources/wbn/uuid-in-package.wbn",
         [url]
       );
       document.body.appendChild(element);
       assert_equals(await loadScriptAndWaitReport(url), "OK");
       document.body.removeChild(element);
     }, "Subresource loading with uuid-in-package: URL with resources attribute");

     promise_test(async () => {
       const url = "uuid-in-package:020111b3-437a-4c5c-ae07-adb6bbffb720";
       const element = createWebBundleElement(
         "../resources/wbn/uuid-in-package.wbn",
         [],
         { scopes: ["uuid-in-package:"] }
       );
       document.body.appendChild(element);
       assert_equals(await loadScriptAndWaitReport(url), "OK");
       document.body.removeChild(element);
     }, "Subresource loading with uuid-in-package: URL with scopes attribute");

     async function loadScriptAndWaitReport(script_url) {
       const result_promise = new Promise((resolve) => {
         // This function will be called from script.js
         window.report_result = resolve;
       });

       const script = document.createElement("script");
       script.src = script_url;
       document.body.appendChild(script);
       return result_promise;
     }

     function removeAndAppendNewElementWithUpdatedRule(element, new_rule) {
       const new_element = createNewWebBundleElementWithUpdatedRule(
         element,
         new_rule
       );
       element.remove();
       document.body.appendChild(new_element);
       return new_element;
     }
   </script>
 </body>
	<!DOCTYPE html>
	<title>Subresource loading with script type="webbundle"</title>
	<link
	rel="help"
	href="https://github.com/WICG/webpackage/blob/main/explainers/subresource-loading.md"
	/>
	<script src="/resources/testharness.js"></script>
	<script src="/resources/testharnessreport.js"></script>
	<script src="../resources/test-helpers.js"></script>
	<body>
	<script type="webbundle">
	{
	"source": "../resources/wbn/subresource.wbn",
	"resources": [
	"https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/root.js",
	"https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/submodule.js"
	]
	}
	</script>
	<script>
	setup(() => {
	assert_true(HTMLScriptElement.supports("webbundle"));
	});

	promise_test(async () => {
	const module = await import(
	"https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/root.js"
	);
	assert_equals(module.result, "OK");
	}, "Subresource loading with WebBundle");

	promise_test(async () => {
	const response = await fetch(
	"https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/root.js"
	);
	const text = await response.text();
	assert_equals(text, "export * from './submodule.js';\n");
	}, "Subresource loading with WebBundle (Fetch API)");

	promise_test((t) => {
	const url =
	"/common/redirect.py?location=https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/root.js";
	return promise_rejects_js(t, TypeError, import(url));
	}, "Subresource loading with WebBundle shouldn't affect redirect");

	promise_test(async () => {
	const element = createWebBundleElement("../resources/wbn/dynamic1.wbn", [
	"https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/dynamic/resource1.js",
	"https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/dynamic/resource2.js",
	"https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/dynamic/resource4.js",
	]);
	document.body.appendChild(element);

	const module = await import(
	"https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/dynamic/resource1.js"
	);
	assert_equals(module.result, "resource1 from dynamic1.wbn");

	const new_element = removeAndAppendNewElementWithUpdatedRule(element, {
	url: "../resources/wbn/dynamic2.wbn",
	});
	const module2 = await import(
	"https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/dynamic/resource2.js"
	);
	assert_equals(module2.result, "resource2 from dynamic2.wbn");

	// A resource not specified in the resources attribute, but in the bundle.
	const module3 = await import(
	"https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/dynamic/resource3.js"
	);
	assert_equals(module3.result, "resource3 from network");

	document.body.removeChild(new_element);
	const module4 = await import(
	"https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/dynamic/resource4.js"
	);
	assert_equals(module4.result, "resource4 from network");

	// Module scripts are stored to the Document's module map once loaded.
	// So import()ing the same module script will reuse the previously loaded
	// script.
	const module_second = await import(
	"https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/dynamic/resource1.js"
	);
	assert_equals(module_second.result, "resource1 from dynamic1.wbn");
	}, "Dynamically adding / updating / removing the webbundle element.");

	promise_test(async () => {
	const classic_script_url =
	"https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/dynamic/classic_script.js";
	const element = createWebBundleElement("../resources/wbn/dynamic1.wbn", [
	classic_script_url,
	]);
	document.body.appendChild(element);
	assert_equals(
	await loadScriptAndWaitReport(classic_script_url),
	"classic script from dynamic1.wbn"
	);
	const new_element = removeAndAppendNewElementWithUpdatedRule(element, {
	url: "../resources/wbn/dynamic2.wbn",
	});
	// Loading the classic script should not reuse the previously loaded
	// script. So in this case, the script must be loaded from dynamic2.wbn.
	assert_equals(
	await loadScriptAndWaitReport(classic_script_url),
	"classic script from dynamic2.wbn"
	);
	document.body.removeChild(new_element);
	// And in this case, the script must be loaded from network.
	assert_equals(
	await loadScriptAndWaitReport(classic_script_url),
	"classic script from network"
	);
	}, "Dynamically loading classic script from web bundle");

	promise_test(async (t) => {
	// To avoid caching mechanism, this test is using fetch() API with
	// { cache: 'no-store' } to load the resource.
	const classic_script_url =
	"https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/dynamic/classic_script.js";

	assert_equals(
	await (await fetch(classic_script_url)).text(),
	"window.report_result('classic script from network');\n"
	);

	const element1 = createWebBundleElement("../resources/wbn/dynamic1.wbn", [
	classic_script_url,
	]);
	document.body.appendChild(element1);
	t.add_cleanup(() => {
	if (element1.parentElement)
	element1.parentElement.removeChild(element1);
	});

	assert_equals(
	await (await fetch(classic_script_url, { cache: "no-store" })).text(),
	"window.report_result('classic script from dynamic1.wbn');\n"
	);

	const element2 = createWebBundleElement("../resources/wbn/dynamic2.wbn", [
	classic_script_url,
	]);
	document.body.appendChild(element2);
	t.add_cleanup(() => {
	if (element2.parentElement)
	element2.parentElement.removeChild(element2);
	});

	assert_equals(
	await (await fetch(classic_script_url, { cache: "no-store" })).text(),
	"window.report_result('classic script from dynamic2.wbn');\n"
	);

	document.body.removeChild(element2);

	assert_equals(
	await (await fetch(classic_script_url, { cache: "no-store" })).text(),
	"window.report_result('classic script from dynamic1.wbn');\n"
	);

	document.body.removeChild(element1);

	assert_equals(
	await (await fetch(classic_script_url, { cache: "no-store" })).text(),
	"window.report_result('classic script from network');\n"
	);
	}, "Multiple web bundle elements. The last added element must be refered.");

	promise_test(async () => {
	const classic_script_url =
	"https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/dynamic/classic_script.js";
	const scope =
	"https://{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/dynamic/";
	const element = createWebBundleElement(
	"../resources/wbn/dynamic1.wbn",
	[],
	{ scopes: [scope] }
	);
	document.body.appendChild(element);
	assert_equals(
	await loadScriptAndWaitReport(classic_script_url),
	"classic script from dynamic1.wbn"
	);
	const new_element = removeAndAppendNewElementWithUpdatedRule(element, {
	url: "../resources/wbn/dynamic2.wbn",
	});
	// Loading the classic script should not reuse the previously loaded
	// script. So in this case, the script must be loaded from dynamic2.wbn.
	assert_equals(
	await loadScriptAndWaitReport(classic_script_url),
	"classic script from dynamic2.wbn"
	);
	// Changes the scope not to hit the classic_script.js.
	const new_element2 = removeAndAppendNewElementWithUpdatedRule(
	new_element,
	{ scopes: [scope + "dummy"] }
	);
	// And in this case, the script must be loaded from network.
	assert_equals(
	await loadScriptAndWaitReport(classic_script_url),
	"classic script from network"
	);
	// Adds the scope to hit the classic_script.js.
	const new_element3 = removeAndAppendNewElementWithUpdatedRule(
	new_element2,
	{ scopes: [scope + "dummy", scope + "classic_"] }
	);
	assert_equals(
	await loadScriptAndWaitReport(classic_script_url),
	"classic script from dynamic2.wbn"
	);
	document.body.removeChild(new_element3);
	// And in this case, the script must be loaded from network.
	assert_equals(
	await loadScriptAndWaitReport(classic_script_url),
	"classic script from network"
	);
	}, "Dynamically loading classic script from web bundle with scopes");

	promise_test(() => {
	return addWebBundleElementAndWaitForLoad(
	"../resources/wbn/dynamic1.wbn?test-event",
	/resources=/ [],
	{ crossOrigin: undefined }
	);
	}, "The webbundle element fires a load event on load success");

	promise_test((t) => {
	return addWebBundleElementAndWaitForError(
	"../resources/wbn/nonexistent.wbn",
	/resources=/ [],
	{ crossOrigin: undefined }
	);
	}, "The webbundle element fires an error event on load failure");

	promise_test(async () => {
	const module_script_url =
	"https://www1.{{domains[]}}:{{ports[https][0]}}/web-bundle/resources/wbn/dynamic/resource1.js";
	const element = createWebBundleElement(
	"../resources/wbn/dynamic1-crossorigin.wbn",
	[module_script_url]
	);
	document.body.appendChild(element);
	const module = await import(module_script_url);
	assert_equals(module.result, "resource1 from network");
	}, "Subresource URL must be same-origin with bundle URL");

	promise_test(async () => {
	const url = "uuid-in-package:020111b3-437a-4c5c-ae07-adb6bbffb720";
	const element = createWebBundleElement(
	"../resources/wbn/uuid-in-package.wbn",
	[url]
	);
	document.body.appendChild(element);
	assert_equals(await loadScriptAndWaitReport(url), "OK");
	document.body.removeChild(element);
	}, "Subresource loading with uuid-in-package: URL with resources attribute");

	promise_test(async () => {
	const url = "uuid-in-package:020111b3-437a-4c5c-ae07-adb6bbffb720";
	const element = createWebBundleElement(
	"../resources/wbn/uuid-in-package.wbn",
	[],
	{ scopes: ["uuid-in-package:"] }
	);
	document.body.appendChild(element);
	assert_equals(await loadScriptAndWaitReport(url), "OK");
	document.body.removeChild(element);
	}, "Subresource loading with uuid-in-package: URL with scopes attribute");

	async function loadScriptAndWaitReport(script_url) {
	const result_promise = new Promise((resolve) => {
	// This function will be called from script.js
	window.report_result = resolve;
	});

	const script = document.createElement("script");
	script.src = script_url;
	document.body.appendChild(script);
	return result_promise;
	}

	function removeAndAppendNewElementWithUpdatedRule(element, new_rule) {
	const new_element = createNewWebBundleElementWithUpdatedRule(
	element,
	new_rule
	);
	element.remove();
	document.body.appendChild(new_element);
	return new_element;
	}
	</script>
	</body>