test: add munual cases for crossOriginLoading option

Author: chikara-chan

test/manual/index.html

@@ -42,6 +42,10 @@
     <p>Preloaded inlined CSS: Must be green.</p>
     <p><button class="preloaded-button2">Pressing this button</button> displays an alert and should turn red.</p>
   </div>
+  <div class="test crossorigin">
+    <p>CrossOriginLoading Option: Must be red.</p>
+    <p><button>Pressing this button</button> loads chunks with crossorigin attribute and should turn green.</p>
+  </div>
   <div class="errors"></div>
   <script async defer src="/dist/main.js"></script>
 </body>

test/manual/src/crossorigin.css

@@ -0,0 +1,3 @@
+.crossorigin {
+  background: lightgreen;
+}

test/manual/src/crossorigin.js

@@ -0,0 +1 @@
+import './crossorigin.css';

test/manual/src/index.js

@@ -20,3 +20,17 @@ makeButton(".lazy-button2", () => import('./lazy2.css'));
 
 makeButton(".preloaded-button1", () => import(/* webpackChunkName: "preloaded1" */ './preloaded1'));
 makeButton(".preloaded-button2", () => import(/* webpackChunkName: "preloaded2" */ './preloaded2'));
+
+makeButton(".crossorigin", () => {
+  const originalPublicPath = __webpack_public_path__;
+  __webpack_public_path__ = "http://0.0.0.0:8080/dist/";
+  const promise = import("./crossorigin").then(() => {
+    const lastTwoElements = Array.from(document.head.children).slice(-2);
+    const hasCrossorigin = lastTwoElements.every(element => element.crossOrigin === "anonymous");
+    if (!hasCrossorigin) {
+      throw new Error('Chunks miss crossorigin="anonymous" attribute.')
+    }
+  });
+  __webpack_public_path__ = originalPublicPath;
+  return promise;
+});

test/manual/webpack.config.js

@@ -5,6 +5,7 @@ module.exports = {
   output: {
     chunkFilename: "[contenthash].js",
     publicPath: '/dist/',
+    crossOriginLoading: 'anonymous',
   },
   module: {
     rules: [
@@ -25,5 +26,8 @@ module.exports = {
   ],
   devServer: {
     contentBase: __dirname,
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+    }
   },
 };