From ce36ba5285d47401c4954265c80a1f43141b6625 Mon Sep 17 00:00:00 2001
From: Daniel Rozenberg <rodaniel@amp.dev>
Date: Fri, 3 Sep 2021 15:52:46 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=97=20Visual=20diff=20updates=20and=20?=
 =?UTF-8?q?fixes=20(#35942)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Update visual diff's Chrome version to 91.0.4472.0

* Remove page-preparation snippets that are now included in Percy's serializer library

* :%s/.percyCss/.percyCSS/

* Remove <noscript> elements from doc/iframes

* Restore <canvas> → <img> freezer
---
 build-system/tasks/visual-diff/index.js       | 17 +++---
 .../snippets/freeze-form-values.js            | 52 -------------------
 .../visual-diff/snippets/remove-no-script.js  | 22 ++++++++
 3 files changed, 30 insertions(+), 61 deletions(-)
 delete mode 100644 build-system/tasks/visual-diff/snippets/freeze-form-values.js
 create mode 100644 build-system/tasks/visual-diff/snippets/remove-no-script.js

diff --git a/build-system/tasks/visual-diff/index.js b/build-system/tasks/visual-diff/index.js
index baa2101fe977..7dca3c6e95df 100644
--- a/build-system/tasks/visual-diff/index.js
+++ b/build-system/tasks/visual-diff/index.js
@@ -49,9 +49,9 @@ const percyCss = [
 // 3. Look up the full version at https://en.wikipedia.org/wiki/Google_Chrome_version_history
 // 4. Open https://omahaproxy.appspot.com in a browser
 // 5. Go to "Tools" -> "Version information"
-// 6. Paste the full version in the "Version" field and click "Lookup"
+// 6. Paste the full version (add ".0" at the end) in the "Version" field and click "Lookup"
 // 7. Copy the value next to "Branch Base Position" and update the line below
-const PUPPETEER_CHROMIUM_REVISION = '827102'; // 88.0.4324.0
+const PUPPETEER_CHROMIUM_REVISION = '870763'; // 91.0.4472.0
 
 const SNAPSHOT_SINGLE_BUILD_OPTIONS = {
   widths: [375],
@@ -76,15 +76,14 @@ const REMOVE_AMP_SCRIPTS_SNIPPET = fs.readFileSync(
   path.resolve(__dirname, 'snippets/remove-amp-scripts.js'),
   'utf8'
 );
-const FREEZE_FORM_VALUE_SNIPPET = fs.readFileSync(
-  path.resolve(__dirname, 'snippets/freeze-form-values.js'),
-  'utf8'
-);
 const FREEZE_CANVAS_IMAGE_SNIPPET = fs.readFileSync(
   path.resolve(__dirname, 'snippets/freeze-canvas-image.js'),
   'utf8'
 );
-
+const REMOVE_NO_SCRIPT_ELEMENT_SNIPPET = fs.readFileSync(
+  path.resolve(__dirname, 'snippets/remove-no-script.js'),
+  'utf8'
+);
 // HTML snippet to create an error page snapshot.
 const SNAPSHOT_ERROR_SNIPPET = fs.readFileSync(
   path.resolve(__dirname, 'snippets/snapshot-error.html'),
@@ -641,8 +640,8 @@ async function snapshotWebpages(browser, webpages) {
             // prepare it for snapshotting on Percy. See comments inside the
             // snippet files for description of each.
             await page.evaluate(REMOVE_AMP_SCRIPTS_SNIPPET);
-            await page.evaluate(FREEZE_FORM_VALUE_SNIPPET);
             await page.evaluate(FREEZE_CANVAS_IMAGE_SNIPPET);
+            await page.evaluate(REMOVE_NO_SCRIPT_ELEMENT_SNIPPET);
 
             // Create a default set of snapshot options for Percy and modify
             // them based on the test's configuration.
@@ -661,7 +660,7 @@ async function snapshotWebpages(browser, webpages) {
                   .replace(/__PERCY_CSS__/g, percyCss)
               );
             } else {
-              snapshotOptions.percyCss = percyCss;
+              snapshotOptions.percyCSS = percyCss;
             }
 
             // Finally, send the snapshot to percy.
diff --git a/build-system/tasks/visual-diff/snippets/freeze-form-values.js b/build-system/tasks/visual-diff/snippets/freeze-form-values.js
deleted file mode 100644
index 18a9155538c0..000000000000
--- a/build-system/tasks/visual-diff/snippets/freeze-form-values.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * @fileoverview This file is executed via Puppeteer's page.evaluate on a
- * document to copy the values of forms into their attributes, so that they will
- * be passed in the snapshots to Percy.
- */
-
-for (const form of Array.from(document.forms)) {
-  for (const element of Array.from(form.elements)) {
-    switch (element.tagName) {
-      case 'INPUT':
-        // Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
-        const formElement = /** @type {!HTMLInputElement} */ (element);
-        switch (formElement.type) {
-          case 'file':
-          case 'hidden':
-          case 'image':
-            break;
-
-          case 'checkbox':
-          case 'radio':
-            if (formElement.checked) {
-              formElement.setAttribute('checked', '');
-            } else {
-              formElement.removeAttribute('checked');
-            }
-            break;
-
-          default:
-            formElement.setAttribute('value', formElement.value);
-        }
-        break;
-
-      case 'SELECT':
-        // Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement
-        const selectElement = /** @type {!HTMLSelectElement} */ (element);
-        for (const optionElement of Array.from(selectElement.options)) {
-          if (optionElement.selected) {
-            optionElement.setAttribute('selected', '');
-          } else {
-            optionElement.removeAttribute('selected');
-          }
-        }
-        break;
-
-      case 'TEXTAREA':
-        // Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement
-        const textElement = /** @type {!HTMLTextAreaElement} */ (element);
-        textElement.textContent = textElement.value;
-        break;
-    }
-  }
-}
diff --git a/build-system/tasks/visual-diff/snippets/remove-no-script.js b/build-system/tasks/visual-diff/snippets/remove-no-script.js
new file mode 100644
index 000000000000..2245fcfb4751
--- /dev/null
+++ b/build-system/tasks/visual-diff/snippets/remove-no-script.js
@@ -0,0 +1,22 @@
+/**
+ * @fileoverview This file is executed via Puppeteer's page.evaluate on a
+ * document to remove all <noscript> tags, from the main document and iframes.
+ * This makes for cleaner diffs and prevents "double-execution" of AMP scripts
+ * when enableJavaScript=false.
+ */
+
+/**
+ * Removes <noscript> elements from doc and its iframes.
+ * @param {Document} doc document to operate on recursively.
+ */
+function removeNoscript(doc) {
+  doc.querySelectorAll('noscript').forEach((node) => node./*OK*/ remove());
+
+  doc.body.querySelectorAll('iframe').forEach((iframe) => {
+    if (iframe.contentDocument) {
+      removeNoscript(iframe.contentDocument);
+    }
+  });
+}
+
+removeNoscript(document);