Hide the share pill in visual tests, and re-enable tests that were fl…

…aky because of this (ampproject#20022)
noranazmy · Mar 22, 2019 · 37f8cf2 · 37f8cf2
1 parent 5bf522b
commit 37f8cf2
Show file tree

Hide file tree

Showing 21 changed files with 199 additions and 33 deletions.
diff --git a/examples/visual-tests/amp-story/amp-story-bookend.html b/examples/visual-tests/amp-story/amp-story-bookend.html
@@ -23,6 +23,16 @@
         display: none;
       }
 
+      /*
+       * The share pill text does not show in the same place consistently, and
+       * as such causes the visual tests to be flaky.  This hides the share pill
+       * with visibility: hidden, so as to keep other elements in the same place
+       * that they would otherwise be, while deflaking the tests.  See #19890.
+       */
+      .i-amphtml-story-share-pill {
+        visibility: hidden;
+      }
+
       h1.hello-world {
         color: white;
         text-align: center;

diff --git a/examples/visual-tests/amp-story/amp-story-bookend.rtl.html b/examples/visual-tests/amp-story/amp-story-bookend.rtl.html
@@ -23,6 +23,16 @@
         display: none;
       }
 
+      /*
+       * The share pill text does not show in the same place consistently, and
+       * as such causes the visual tests to be flaky.  This hides the share pill
+       * with visibility: hidden, so as to keep other elements in the same place
+       * that they would otherwise be, while deflaking the tests.  See #19890.
+       */
+       .i-amphtml-story-share-pill {
+        visibility: hidden;
+      }
+
       h1.hello-world {
         color: white;
         text-align: center;

diff --git a/examples/visual-tests/amp-story/amp-story-consent.html b/examples/visual-tests/amp-story/amp-story-consent.html
@@ -25,6 +25,16 @@
         display: none;
       }
 
+      /*
+       * The share pill text does not show in the same place consistently, and
+       * as such causes the visual tests to be flaky.  This hides the share pill
+       * with visibility: hidden, so as to keep other elements in the same place
+       * that they would otherwise be, while deflaking the tests.  See #19890.
+       */
+       .i-amphtml-story-share-pill {
+        visibility: hidden;
+      }
+
       h1#hello-world {
         color: white;
         text-align: center;

diff --git a/examples/visual-tests/amp-story/amp-story-consent.rtl.html b/examples/visual-tests/amp-story/amp-story-consent.rtl.html
@@ -25,6 +25,16 @@
         display: none;
       }
 
+      /*
+       * The share pill text does not show in the same place consistently, and
+       * as such causes the visual tests to be flaky.  This hides the share pill
+       * with visibility: hidden, so as to keep other elements in the same place
+       * that they would otherwise be, while deflaking the tests.  See #19890.
+       */
+       .i-amphtml-story-share-pill {
+        visibility: hidden;
+      }
+
       h1#hello-world {
         color: white;
         text-align: center;

diff --git a/examples/visual-tests/amp-story/amp-story-cta-layer.html b/examples/visual-tests/amp-story/amp-story-cta-layer.html
@@ -24,6 +24,16 @@
         left: 50%;
         transform: translate(-50%, -50%);
       }
+
+      /*
+       * The share pill text does not show in the same place consistently, and
+       * as such causes the visual tests to be flaky.  This hides the share pill
+       * with visibility: hidden, so as to keep other elements in the same place
+       * that they would otherwise be, while deflaking the tests.  See #19890.
+       */
+       .i-amphtml-story-share-pill {
+        visibility: hidden;
+      }
     </style>
     <script>
       // TODO(#17108): Remove this when getMode().test is set.

diff --git a/examples/visual-tests/amp-story/amp-story-grid-layer-template-fill.html b/examples/visual-tests/amp-story/amp-story-grid-layer-template-fill.html
@@ -14,6 +14,16 @@
       amp-story-page {
         background: yellow;
       }
+
+      /*
+       * The share pill text does not show in the same place consistently, and
+       * as such causes the visual tests to be flaky.  This hides the share pill
+       * with visibility: hidden, so as to keep other elements in the same place
+       * that they would otherwise be, while deflaking the tests.  See #19890.
+       */
+       .i-amphtml-story-share-pill {
+        visibility: hidden;
+      }
     </style>
     <script>
       // TODO(#17108): Remove this when getMode().test is set.

diff --git a/examples/visual-tests/amp-story/amp-story-grid-layer-template-horizontal.html b/examples/visual-tests/amp-story/amp-story-grid-layer-template-horizontal.html
@@ -15,6 +15,16 @@
         background: white;
         font-family: sans-serif;
       }
+
+      /*
+       * The share pill text does not show in the same place consistently, and
+       * as such causes the visual tests to be flaky.  This hides the share pill
+       * with visibility: hidden, so as to keep other elements in the same place
+       * that they would otherwise be, while deflaking the tests.  See #19890.
+       */
+       .i-amphtml-story-share-pill {
+        visibility: hidden;
+      }
     </style>
     <script>
       // TODO(#17108): Remove this when getMode().test is set.

diff --git a/examples/visual-tests/amp-story/amp-story-grid-layer-template-thirds.html b/examples/visual-tests/amp-story/amp-story-grid-layer-template-thirds.html
@@ -15,6 +15,16 @@
         background: white;
         font-family: sans-serif;
       }
+
+      /*
+       * The share pill text does not show in the same place consistently, and
+       * as such causes the visual tests to be flaky.  This hides the share pill
+       * with visibility: hidden, so as to keep other elements in the same place
+       * that they would otherwise be, while deflaking the tests.  See #19890.
+       */
+       .i-amphtml-story-share-pill {
+        visibility: hidden;
+      }
     </style>
     <script>
       // TODO(#17108): Remove this when getMode().test is set.

diff --git a/examples/visual-tests/amp-story/amp-story-grid-layer-template-vertical.html b/examples/visual-tests/amp-story/amp-story-grid-layer-template-vertical.html
@@ -15,6 +15,16 @@
         background: white;
         font-family: sans-serif;
       }
+
+      /*
+       * The share pill text does not show in the same place consistently, and
+       * as such causes the visual tests to be flaky.  This hides the share pill
+       * with visibility: hidden, so as to keep other elements in the same place
+       * that they would otherwise be, while deflaking the tests.  See #19890.
+       */
+       .i-amphtml-story-share-pill {
+        visibility: hidden;
+      }
     </style>
     <script>
       // TODO(#17108): Remove this when getMode().test is set.

diff --git a/examples/visual-tests/amp-story/amp-story-pagination-buttons.html b/examples/visual-tests/amp-story/amp-story-pagination-buttons.html
@@ -22,6 +22,15 @@
       amp-story-page {
         background-color: white;
       }
+      /*
+       * The share pill text does not show in the same place consistently, and
+       * as such causes the visual tests to be flaky.  This hides the share pill
+       * with visibility: hidden, so as to keep other elements in the same place
+       * that they would otherwise be, while deflaking the tests.  See #19890.
+       */
+       .i-amphtml-story-share-pill {
+        visibility: hidden;
+      }
     </style>
     <script type="application/ld+json">
       {

diff --git a/examples/visual-tests/amp-story/amp-story-sidebar.html b/examples/visual-tests/amp-story/amp-story-sidebar.html
@@ -21,6 +21,15 @@
         /* Hide the spinner for loading pages, since this causes flakes */
         display: none;
       }
+      /*
+       * The share pill text does not show in the same place consistently, and
+       * as such causes the visual tests to be flaky.  This hides the share pill
+       * with visibility: hidden, so as to keep other elements in the same place
+       * that they would otherwise be, while deflaking the tests.  See #19890.
+       */
+       .i-amphtml-story-share-pill {
+        visibility: hidden;
+      }
       h1.hello-world {
         color: white;
         text-shadow: 3px 3px rgba(0, 0, 0, 0.5);

diff --git a/examples/visual-tests/amp-story/amp-story-tooltip.html b/examples/visual-tests/amp-story/amp-story-tooltip.html
@@ -21,6 +21,16 @@
         display: none;
       }
 
+      /*
+       * The share pill text does not show in the same place consistently, and
+       * as such causes the visual tests to be flaky.  This hides the share pill
+       * with visibility: hidden, so as to keep other elements in the same place
+       * that they would otherwise be, while deflaking the tests.  See #19890.
+       */
+       .i-amphtml-story-share-pill {
+        visibility: hidden;
+      }
+
       h1.hello-world {
         color: white;
         text-shadow: 3px 3px rgba(0, 0, 0, 0.5);

diff --git a/examples/visual-tests/amp-story/basic.html b/examples/visual-tests/amp-story/basic.html
@@ -24,6 +24,16 @@
         display: none;
       }
 
+      /*
+       * The share pill text does not show in the same place consistently, and
+       * as such causes the visual tests to be flaky.  This hides the share pill
+       * with visibility: hidden, so as to keep other elements in the same place
+       * that they would otherwise be, while deflaking the tests.  See #19890.
+       */
+       .i-amphtml-story-share-pill {
+        visibility: hidden;
+      }
+
       h1.hello-world {
         color: white;
         text-shadow: 3px 3px rgba(0, 0, 0, 0.5);

diff --git a/examples/visual-tests/amp-story/basic.rtl.html b/examples/visual-tests/amp-story/basic.rtl.html
@@ -24,6 +24,16 @@
         display: none;
       }
 
+      /*
+       * The share pill text does not show in the same place consistently, and
+       * as such causes the visual tests to be flaky.  This hides the share pill
+       * with visibility: hidden, so as to keep other elements in the same place
+       * that they would otherwise be, while deflaking the tests.  See #19890.
+       */
+       .i-amphtml-story-share-pill {
+        visibility: hidden;
+      }
+
       h1.hello-world {
         color: white;
         text-shadow: 3px 3px rgba(0, 0, 0, 0.5);

diff --git a/examples/visual-tests/amp-story/embed-mode-1.html b/examples/visual-tests/amp-story/embed-mode-1.html
@@ -23,6 +23,16 @@
         display: none;
       }
 
+      /*
+       * The share pill text does not show in the same place consistently, and
+       * as such causes the visual tests to be flaky.  This hides the share pill
+       * with visibility: hidden, so as to keep other elements in the same place
+       * that they would otherwise be, while deflaking the tests.  See #19890.
+       */
+       .i-amphtml-story-share-pill {
+        visibility: hidden;
+      }
+
       h1#hello-world {
         color: white;
         text-align: center;

diff --git a/examples/visual-tests/amp-story/embed-mode-2.html b/examples/visual-tests/amp-story/embed-mode-2.html
@@ -23,6 +23,16 @@
         display: none;
       }
 
+      /*
+       * The share pill text does not show in the same place consistently, and
+       * as such causes the visual tests to be flaky.  This hides the share pill
+       * with visibility: hidden, so as to keep other elements in the same place
+       * that they would otherwise be, while deflaking the tests.  See #19890.
+       */
+       .i-amphtml-story-share-pill {
+        visibility: hidden;
+      }
+
       h1#hello-world {
         color: white;
         text-align: center;

diff --git a/examples/visual-tests/amp-story/info-dialog.html b/examples/visual-tests/amp-story/info-dialog.html
@@ -23,6 +23,16 @@
         display: none;
       }
 
+      /*
+       * The share pill text does not show in the same place consistently, and
+       * as such causes the visual tests to be flaky.  This hides the share pill
+       * with visibility: hidden, so as to keep other elements in the same place
+       * that they would otherwise be, while deflaking the tests.  See #19890.
+       */
+       .i-amphtml-story-share-pill {
+        visibility: hidden;
+      }
+
       h1#hello-world {
         color: white;
         text-align: center;

diff --git a/examples/visual-tests/amp-story/info-dialog.rtl.html b/examples/visual-tests/amp-story/info-dialog.rtl.html
@@ -23,6 +23,16 @@
         display: none;
       }
 
+      /*
+       * The share pill text does not show in the same place consistently, and
+       * as such causes the visual tests to be flaky.  This hides the share pill
+       * with visibility: hidden, so as to keep other elements in the same place
+       * that they would otherwise be, while deflaking the tests.  See #19890.
+       */
+       .i-amphtml-story-share-pill {
+        visibility: hidden;
+      }
+
       h1#hello-world {
         color: white;
         text-align: center;

diff --git a/examples/visual-tests/amp-story/share-menu.html b/examples/visual-tests/amp-story/share-menu.html
@@ -23,6 +23,16 @@
         display: none;
       }
 
+      /*
+       * The share pill text does not show in the same place consistently, and
+       * as such causes the visual tests to be flaky.  This hides the share pill
+       * with visibility: hidden, so as to keep other elements in the same place
+       * that they would otherwise be, while deflaking the tests.  See #19890.
+       */
+       .i-amphtml-story-share-pill {
+        visibility: hidden;
+      }
+
       h1#hello-world {
         color: white;
         text-align: center;

diff --git a/examples/visual-tests/amp-story/share-menu.rtl.html b/examples/visual-tests/amp-story/share-menu.rtl.html
@@ -23,6 +23,16 @@
         display: none;
       }
 
+      /*
+       * The share pill text does not show in the same place consistently, and
+       * as such causes the visual tests to be flaky.  This hides the share pill
+       * with visibility: hidden, so as to keep other elements in the same place
+       * that they would otherwise be, while deflaking the tests.  See #19890.
+       */
+       .i-amphtml-story-share-pill {
+        visibility: hidden;
+      }
+
       h1#hello-world {
         color: white;
         text-align: center;