resource-timing/render-blocking-status-script.html - external/w3c/web-platform-tests.git - Git at Google

 <!DOCTYPE html>
 <head>
 <meta charset="utf-8" />
 <title>This test validates the render blocking status of resources.</title>
 <link rel="help" href="https://www.w3.org/TR/resource-timing-2/#sec-performanceresourcetiming"/>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>

 <!-- Start of test cases -->
 <script src="resources/empty_script.js?script-head"></script>
 <script type="module" src="resources/empty_script.js?script-head-module"></script>
 <script async type=module
         src="resources/empty_script.js?script-head-async-module">
 </script>
 <script async src="resources/empty_script.js?script-head-async"></script>
 <script defer src="resources/empty_script.js?script-head-defer"></script>
 <script blocking=render
         src="resources/empty_script.js?script-head-blocking-render">
 </script>
 <script async blocking=render
         src="resources/empty_script.js?script-head-async-blocking-render">
 </script>
 <script type=module blocking=render
         src="resources/empty_script.js?script-head-module-blocking-render">
 </script>
 <script async type=module blocking=render
         src="resources/empty_script.js?script-head-async-module-blocking-render">
 </script>
 <script defer blocking=render
         src="resources/empty_script.js?script-head-defer-blocking-render">
 </script>

 <script id="script-head-remove-attr" blocking=render
         src="resources/empty_script.js?script-head-blocking-render-remove-attr">
 </script>

 <script>
     document.write(`
         <script defer
             src="resources/empty_script.js?script-head-defer-dynamic-docwrite">
         <\/script>`);
 </script>
 </head>

 <body>

 <script src="resources/empty_script.js?script-body"></script>
 <script type="module" src="resources/empty_script.js?script-body-module"></script>
 <script async type=module
         src="resources/empty_script.js?script-body-async-module">
 </script>
 <script async src="resources/empty_script.js?script-body-async"></script>
 <script defer src="resources/empty_script.js?script-body-defer"></script>

 <script>
     const script = document.createElement("script");
     script.src = "resources/empty_script.js?script-head-dynamic-dom";
     document.head.appendChild(script);

     // Dynamic explicitly async script
     const async_script = document.createElement("script");
     async_script.src = "resources/empty_script.js?script-head-async-dynamic-dom";
     async_script.async = true;
     document.head.appendChild(async_script);

     // Dynamic non-async script
     // https://html.spec.whatwg.org/multipage/scripting.html#script-processing-model
     // mentions that a script element has to be parser-inserted to be
     // implicitly potentially render-blocking
     const non_async_script = document.createElement("script");
     non_async_script.src = "resources/empty_script.js?script-head-non-async-dynamic-dom";
     non_async_script.async = false;
     document.head.appendChild(non_async_script);

     // Dynamic defer script
     const defer_script = document.createElement("script");
     defer_script.src = "resources/empty_script.js?script-head-defer-dynamic-dom";
     defer_script.defer = true;
     document.head.appendChild(defer_script);

     // Dynamic explicitly render-blocking script
     const blocking_script = document.createElement("script");
     blocking_script.src = "resources/empty_script.js?script-head-blocking-render-dynamic-dom";
     blocking_script.blocking = "render";
     document.head.appendChild(blocking_script);

     // Dynamic explicitly render-blocking module script
     const blocking_module_script = document.createElement("script");
     blocking_module_script.src = "resources/empty_script.js?script-head-module-blocking-render-dynamic-dom";
     blocking_module_script.type = "module";
     blocking_module_script.blocking = "render";
     document.head.appendChild(blocking_module_script);

     // Dynamic async module script
     const async_module_script = document.createElement("script");
     async_module_script.src = "resources/empty_script.js?script-head-async-module-dynamic-dom";
     async_module_script.type = "module";
     async_module_script.async = true;
     document.head.appendChild(async_module_script);

     // Dynamic async render-blocking module script
     const async_blocking_module_script = document.createElement("script");
     async_blocking_module_script.src = "resources/empty_script.js?script-head-async-module-blocking-render-dynamic-dom";
     async_blocking_module_script.type = "module";
     async_blocking_module_script.async = true;
     async_blocking_module_script.blocking = "render"
     document.head.appendChild(async_blocking_module_script);

     // Add a module that imports more modules
     const importer_script = document.createElement("script");
     importer_script.src = "resources/fake_responses.py?url=importer.js";
     importer_script.type = "module";
     document.head.appendChild(importer_script);

     // Add an async module that imports more modules
     const importer_async_script = document.createElement("script");
     importer_async_script.src = "resources/fake_responses.py?url=importer_async.js";
     importer_async_script.type = "module";
     importer_async_script.async = true;
     document.head.appendChild(importer_async_script);

     // Removing blocking render attribute after request is made
     const script_element = document.getElementById("script-head-remove-attr");
     script_element.blocking = "";
 </script>


 <script>

 const wait_for_onload = () => {
   return new Promise(resolve => {
     window.addEventListener("load", resolve);
 })};

 promise_test(
   async () => {
     const expectedRenderBlockingStatus = {
         'script-head': 'blocking',
         'script-head-module' : 'non-blocking',
         'script-head-async-module' : 'non-blocking',
         'script-head-async' : 'non-blocking',
         'script-head-defer' : 'non-blocking',
         'script-head-blocking-render' : 'blocking',
         'script-head-async-blocking-render' : 'blocking',
         'script-head-module-blocking-render' : 'blocking',
         'script-head-async-module-blocking-render' : 'blocking',
         'script-head-defer-blocking-render' : 'blocking',
         'script-head-blocking-render-remove-attr' : 'blocking',
         'script-head-defer-dynamic-docwrite' : 'non-blocking',
         'script-body' : 'non-blocking',
         'script-body-module' : 'non-blocking',
         'script-body-async-module' : 'non-blocking',
         'script-body-async' : 'non-blocking',
         'script-body-defer' : 'non-blocking',
         'script-head-dynamic-dom': 'non-blocking',
         'script-head-async-dynamic-dom' : 'non-blocking',
         'script-head-non-async-dynamic-dom': 'non-blocking',
         'script-head-defer-dynamic-dom' : 'non-blocking',
         'script-head-blocking-render-dynamic-dom' : 'blocking',
         'script-head-module-blocking-render-dynamic-dom' : 'blocking',
         'script-head-async-module-dynamic-dom' : 'non-blocking',
         'script-head-async-module-blocking-render-dynamic-dom' : 'blocking',
         'script-head-import-defer' : 'non-blocking',
         'script-head-import-defer-dynamic' : 'non-blocking',
         'script-head-import-async' : 'non-blocking',
         'script-head-import-async-dynamic' : 'non-blocking',
         'script-importer' : 'non-blocking',
         'script-importer-async' : 'non-blocking'
     };

     await wait_for_onload();

     const entry_list = performance.getEntriesByType("resource");
     for (entry of entry_list) {
         if (entry.name.includes("empty_script.js")) {
             key = entry.name.split("?").pop();
             expectedStatus = expectedRenderBlockingStatus[key];
             assert_equals(entry.renderBlockingStatus, expectedStatus,
                 `render blocking status for ${entry.name} should be ${expectedStatus}`);
         }
         else if (entry.name.includes("importer.js")){
             key = 'script-importer';
             expectedStatus = expectedRenderBlockingStatus[key];
             assert_equals(entry.renderBlockingStatus, expectedStatus,
                 `render blocking status for ${entry.name} should be ${expectedStatus}`);
         }
         else if (entry.name.includes("importer_async.js")){
             key = 'script-importer-async';
             expectedStatus = expectedRenderBlockingStatus[key];
             assert_equals(entry.renderBlockingStatus, expectedStatus,
                 `render blocking status for ${entry.name} should be ${expectedStatus}`);
         }
     }
 }, "Validate render blocking status of script resources in PerformanceResourceTiming");

 </script>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8" />
	<title>This test validates the render blocking status of resources.</title>
	<link rel="help" href="https://www.w3.org/TR/resource-timing-2/#sec-performanceresourcetiming"/>
	<script src="/resources/testharness.js"></script>
	<script src="/resources/testharnessreport.js"></script>

	<!-- Start of test cases -->
	<script src="resources/empty_script.js?script-head"></script>
	<script type="module" src="resources/empty_script.js?script-head-module"></script>
	<script async type=module
	src="resources/empty_script.js?script-head-async-module">
	</script>
	<script async src="resources/empty_script.js?script-head-async"></script>
	<script defer src="resources/empty_script.js?script-head-defer"></script>
	<script blocking=render
	src="resources/empty_script.js?script-head-blocking-render">
	</script>
	<script async blocking=render
	src="resources/empty_script.js?script-head-async-blocking-render">
	</script>
	<script type=module blocking=render
	src="resources/empty_script.js?script-head-module-blocking-render">
	</script>
	<script async type=module blocking=render
	src="resources/empty_script.js?script-head-async-module-blocking-render">
	</script>
	<script defer blocking=render
	src="resources/empty_script.js?script-head-defer-blocking-render">
	</script>

	<script id="script-head-remove-attr" blocking=render
	src="resources/empty_script.js?script-head-blocking-render-remove-attr">
	</script>

	<script>
	document.write(`
	<script defer
	src="resources/empty_script.js?script-head-defer-dynamic-docwrite">
	<\/script>`);
	</script>
	</head>

	<body>

	<script src="resources/empty_script.js?script-body"></script>
	<script type="module" src="resources/empty_script.js?script-body-module"></script>
	<script async type=module
	src="resources/empty_script.js?script-body-async-module">
	</script>
	<script async src="resources/empty_script.js?script-body-async"></script>
	<script defer src="resources/empty_script.js?script-body-defer"></script>

	<script>
	const script = document.createElement("script");
	script.src = "resources/empty_script.js?script-head-dynamic-dom";
	document.head.appendChild(script);

	// Dynamic explicitly async script
	const async_script = document.createElement("script");
	async_script.src = "resources/empty_script.js?script-head-async-dynamic-dom";
	async_script.async = true;
	document.head.appendChild(async_script);

	// Dynamic non-async script
	// https://html.spec.whatwg.org/multipage/scripting.html#script-processing-model
	// mentions that a script element has to be parser-inserted to be
	// implicitly potentially render-blocking
	const non_async_script = document.createElement("script");
	non_async_script.src = "resources/empty_script.js?script-head-non-async-dynamic-dom";
	non_async_script.async = false;
	document.head.appendChild(non_async_script);

	// Dynamic defer script
	const defer_script = document.createElement("script");
	defer_script.src = "resources/empty_script.js?script-head-defer-dynamic-dom";
	defer_script.defer = true;
	document.head.appendChild(defer_script);

	// Dynamic explicitly render-blocking script
	const blocking_script = document.createElement("script");
	blocking_script.src = "resources/empty_script.js?script-head-blocking-render-dynamic-dom";
	blocking_script.blocking = "render";
	document.head.appendChild(blocking_script);

	// Dynamic explicitly render-blocking module script
	const blocking_module_script = document.createElement("script");
	blocking_module_script.src = "resources/empty_script.js?script-head-module-blocking-render-dynamic-dom";
	blocking_module_script.type = "module";
	blocking_module_script.blocking = "render";
	document.head.appendChild(blocking_module_script);

	// Dynamic async module script
	const async_module_script = document.createElement("script");
	async_module_script.src = "resources/empty_script.js?script-head-async-module-dynamic-dom";
	async_module_script.type = "module";
	async_module_script.async = true;
	document.head.appendChild(async_module_script);

	// Dynamic async render-blocking module script
	const async_blocking_module_script = document.createElement("script");
	async_blocking_module_script.src = "resources/empty_script.js?script-head-async-module-blocking-render-dynamic-dom";
	async_blocking_module_script.type = "module";
	async_blocking_module_script.async = true;
	async_blocking_module_script.blocking = "render"
	document.head.appendChild(async_blocking_module_script);

	// Add a module that imports more modules
	const importer_script = document.createElement("script");
	importer_script.src = "resources/fake_responses.py?url=importer.js";
	importer_script.type = "module";
	document.head.appendChild(importer_script);

	// Add an async module that imports more modules
	const importer_async_script = document.createElement("script");
	importer_async_script.src = "resources/fake_responses.py?url=importer_async.js";
	importer_async_script.type = "module";
	importer_async_script.async = true;
	document.head.appendChild(importer_async_script);

	// Removing blocking render attribute after request is made
	const script_element = document.getElementById("script-head-remove-attr");
	script_element.blocking = "";
	</script>


	<script>

	const wait_for_onload = () => {
	return new Promise(resolve => {
	window.addEventListener("load", resolve);
	})};

	promise_test(
	async () => {
	const expectedRenderBlockingStatus = {
	'script-head': 'blocking',
	'script-head-module' : 'non-blocking',
	'script-head-async-module' : 'non-blocking',
	'script-head-async' : 'non-blocking',
	'script-head-defer' : 'non-blocking',
	'script-head-blocking-render' : 'blocking',
	'script-head-async-blocking-render' : 'blocking',
	'script-head-module-blocking-render' : 'blocking',
	'script-head-async-module-blocking-render' : 'blocking',
	'script-head-defer-blocking-render' : 'blocking',
	'script-head-blocking-render-remove-attr' : 'blocking',
	'script-head-defer-dynamic-docwrite' : 'non-blocking',
	'script-body' : 'non-blocking',
	'script-body-module' : 'non-blocking',
	'script-body-async-module' : 'non-blocking',
	'script-body-async' : 'non-blocking',
	'script-body-defer' : 'non-blocking',
	'script-head-dynamic-dom': 'non-blocking',
	'script-head-async-dynamic-dom' : 'non-blocking',
	'script-head-non-async-dynamic-dom': 'non-blocking',
	'script-head-defer-dynamic-dom' : 'non-blocking',
	'script-head-blocking-render-dynamic-dom' : 'blocking',
	'script-head-module-blocking-render-dynamic-dom' : 'blocking',
	'script-head-async-module-dynamic-dom' : 'non-blocking',
	'script-head-async-module-blocking-render-dynamic-dom' : 'blocking',
	'script-head-import-defer' : 'non-blocking',
	'script-head-import-defer-dynamic' : 'non-blocking',
	'script-head-import-async' : 'non-blocking',
	'script-head-import-async-dynamic' : 'non-blocking',
	'script-importer' : 'non-blocking',
	'script-importer-async' : 'non-blocking'
	};

	await wait_for_onload();

	const entry_list = performance.getEntriesByType("resource");
	for (entry of entry_list) {
	if (entry.name.includes("empty_script.js")) {
	key = entry.name.split("?").pop();
	expectedStatus = expectedRenderBlockingStatus[key];
	assert_equals(entry.renderBlockingStatus, expectedStatus,
	`render blocking status for ${entry.name} should be ${expectedStatus}`);
	}
	else if (entry.name.includes("importer.js")){
	key = 'script-importer';
	expectedStatus = expectedRenderBlockingStatus[key];
	assert_equals(entry.renderBlockingStatus, expectedStatus,
	`render blocking status for ${entry.name} should be ${expectedStatus}`);
	}
	else if (entry.name.includes("importer_async.js")){
	key = 'script-importer-async';
	expectedStatus = expectedRenderBlockingStatus[key];
	assert_equals(entry.renderBlockingStatus, expectedStatus,
	`render blocking status for ${entry.name} should be ${expectedStatus}`);
	}
	}
	}, "Validate render blocking status of script resources in PerformanceResourceTiming");

	</script>