Fixes #335: Prevent complex DOM workloads from hitting a specific WebKit pathology (#338)

* Utility function to create css variants for big-dom.css
* update build scripts
* update dists

Author: issackjohn

resources/todomvc/architecture-examples/react-complex/dist/big-dom-generator.css renamed to resources/todomvc/architecture-examples/angular-complex/dist/big-dom-with-stacking-context-scrollable.css

@@ -8,11 +8,12 @@ const options = {
     callerDirectory: path.resolve(__dirname),
     sourceDirectory: path.join("..", "node_modules", "todomvc-angular", "dist"),
     title: "TodoMVC: Angular Complex DOM",
-    filesToMove: ["node_modules/big-dom-generator/dist/big-dom-generator.css", "node_modules/big-dom-generator/dist/logo.png"],
+    filesToMove: ["node_modules/big-dom-generator/dist/big-dom-with-stacking-context-scrollable.css", "node_modules/big-dom-generator/dist/logo.png"],
     cssFilePath: path.resolve(__dirname, "..", "node_modules", "big-dom-generator", "utils", "app.css"),
     cssFileNamePattern: /^styles.*\.css$/,
     standaloneDirectory: path.resolve(__dirname, "..", "..", "angular"),
     complexDirectory: path.resolve(__dirname, ".."),
+    cssFilesToAddLinksFor: ["big-dom-with-stacking-context-scrollable.css"],
 };
 
 buildComplex(options);

resources/todomvc/architecture-examples/angular-complex/dist/index.html

@@ -8,11 +8,12 @@ const options = {
     callerDirectory: path.resolve(__dirname),
     sourceDirectory: path.join("..", "node_modules", "todomvc-backbone", "dist"),
     title: "TodoMVC: Backbone Complex DOM",
-    filesToMove: ["node_modules/big-dom-generator/dist/big-dom-generator.css", "node_modules/big-dom-generator/dist/logo.png"],
+    filesToMove: ["node_modules/big-dom-generator/dist/big-dom-with-stacking-context-scrollable.css", "node_modules/big-dom-generator/dist/logo.png"],
     cssFilePath: path.resolve(__dirname, "..", "node_modules", "big-dom-generator", "utils", "app.css"),
     cssFileNamePattern: /^index.*\.css$/,
     standaloneDirectory: path.resolve(__dirname, "..", "..", "backbone"),
     complexDirectory: path.resolve(__dirname, ".."),
+    cssFilesToAddLinksFor: ["big-dom-with-stacking-context-scrollable.css"],
 };
 
 buildComplex(options);

resources/todomvc/architecture-examples/angular-complex/scripts/build.js

@@ -9,13 +9,14 @@ const options = {
     sourceDirectory: path.join("..", "node_modules", "todomvc-jquery", "dist"),
     title: "jQuery • TodoMVC Complex DOM",
     filesToMove: [
-        "node_modules/big-dom-generator/dist/big-dom-generator.css",
+        "node_modules/big-dom-generator/dist/big-dom-with-stacking-context-scrollable.css",
         "node_modules/big-dom-generator/dist/logo.png"
     ],
     cssFilePath: path.resolve(__dirname, "..", "node_modules", "big-dom-generator", "utils", "app.css"),
     cssFileNamePattern: /^index.*\.css$/,
     standaloneDirectory: path.resolve(__dirname, "..", "..", "jquery"),
     complexDirectory: path.resolve(__dirname, ".."),
+    cssFilesToAddLinksFor: ["big-dom-with-stacking-context-scrollable.css"],
 };
 
 buildComplex(options);