Merge pull request #980 from ampproject/linter-viewport

Add check for disabled tap delay
ampproject · Dec 12, 2020 · f7b7021 · f7b7021
2 parents a0a3383 + f09df03
commit f7b7021
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 1 deletion.
diff --git a/packages/linter/src/rules/ViewportDisablesTapDelay.ts b/packages/linter/src/rules/ViewportDisablesTapDelay.ts
@@ -0,0 +1,23 @@
+import { Context } from "../index";
+import { Rule } from "../rule";
+
+export class ViewportDisablesTapDelay extends Rule {
+  run({ $ }: Context) {
+    const viewport = $("meta[name=viewport]")[0];
+    if (!viewport) {
+      return this.pass();
+    }
+    return viewport.attribs.content !== "width=device-width"
+      ? this.fail(`Viewport width not set to device width`)
+      : this.pass();
+  }
+  meta() {
+    return {
+      url:
+        "https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away",
+      title:
+        "Set viewport width to the same as the device to disable touch delay causing FID.",
+      info: "",
+    };
+  }
+}
diff --git a/packages/linter/tests/local.test.ts b/packages/linter/tests/local.test.ts
@@ -25,7 +25,8 @@ import { HeroImageIsDefined } from "../src/rules/HeroImageIsDefined";
 import { FastGoogleFontsDisplay } from "../src/rules/FastGoogleFontsDisplay";
 import { GoogleFontPreconnect } from "../src/rules/GoogleFontPreconnect";
 import { BoilerplateIsRemoved } from "../src/rules/BoilerplateIsRemoved";
-import { AmpImgUsesSrcSet } from '../src/rules/AmpImgUsesSrcSet';
+import { AmpImgUsesSrcSet } from "../src/rules/AmpImgUsesSrcSet";
+import { ViewportDisablesTapDelay } from "../src/rules/ViewportDisablesTapDelay";
 
 describe(AmpImgAmpPixelPreferred.name, () => {
   it(`${AmpImgAmpPixelPreferred.name} - <amp-img height="1" width="1">`, async () => {
@@ -597,3 +598,32 @@ describe(TitleMeetsLengthCriteria.name, () => {
     );
   });
 });
+
+describe(ViewportDisablesTapDelay.name, () => {
+  it(`${ViewportDisablesTapDelay.name} - Viewport Disables Tap Delay`, async () => {
+    return assertPass(
+      runLocalTest(
+        ViewportDisablesTapDelay,
+        `${__dirname}/local/ViewportDisablesTapDelay-1/source.html`
+      )
+    );
+  });
+
+  it(`${ViewportDisablesTapDelay.name} - Viewport causes Tap Delay`, async () => {
+    return assertFail(
+      runLocalTest(
+        ViewportDisablesTapDelay,
+        `${__dirname}/local/ViewportDisablesTapDelay-2/source.html`
+      )
+    );
+  });
+
+  it(`${ViewportDisablesTapDelay.name} - no viewport`, async () => {
+    return assertPass(
+      runLocalTest(
+        ViewportDisablesTapDelay,
+        `${__dirname}/local/ViewportDisablesTapDelay-3/source.html`
+      )
+    );
+  });
+});
diff --git a/packages/linter/tests/local/ViewportDisablesTapDelay-1/source.html b/packages/linter/tests/local/ViewportDisablesTapDelay-1/source.html
@@ -0,0 +1,13 @@
+<!doctype html> 
+<html amp lang="en">
+   <head>
+      <meta charset="utf-8">
+      <script async src="https://cdn.ampproject.org/v0.js"></script> 
+      <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
+      <noscript>
+         <style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style>
+      </noscript>
+   </head>
+   <body>
+   </body>
+</html>
diff --git a/packages/linter/tests/local/ViewportDisablesTapDelay-2/source.html b/packages/linter/tests/local/ViewportDisablesTapDelay-2/source.html
@@ -0,0 +1,14 @@
+<!doctype html> 
+<html amp lang="en">
+   <head>
+      <meta charset="utf-8">
+      <script async src="https://cdn.ampproject.org/v0.js"></script> 
+      <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
+      <noscript>
+         <style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style>
+      </noscript>
+      <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+   </head>
+   <body>
+   </body>
+</html>
diff --git a/packages/linter/tests/local/ViewportDisablesTapDelay-3/source.html b/packages/linter/tests/local/ViewportDisablesTapDelay-3/source.html
@@ -0,0 +1,13 @@
+<!doctype html> 
+<html amp lang="en">
+   <head>
+      <meta charset="utf-8">
+      <script async src="https://cdn.ampproject.org/v0.js"></script> 
+      <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
+      <noscript>
+         <style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style>
+      </noscript>
+   </head>
+   <body>
+   </body>
+</html>