amp-list[diffable]: Make initial content visible pre-build (#27920)

* Move to ampdoc.css. * Update visual tests. * Update visual test completion selectors. * Add @fileoverview to CSS files.
ampproject · Apr 25, 2020 · a9d71b7 · a9d71b7
1 parent dd0fe4c
commit a9d71b7
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 47 deletions.
diff --git a/css/ampdoc.css b/css/ampdoc.css
@@ -14,6 +14,10 @@
  * limitations under the License.
  */
 
+/**
+ * @fileoverview CSS specifically for non-AMP4ADS formats.
+ */
+
 /**
  * Horizontal scrolling interferes with embedded scenarios and predominantly
  * the result of the non-responsive design.
@@ -276,6 +280,20 @@ amp-list[load-more] [load-more-end]
   display: none;
 }
 
+/**
+ * amp-list error messaging container should be hidden at first.
+ */
+ amp-list [fetch-error] {
+  display: none;
+}
+
+/**
+ * amp-list initial content should be displayed (similar to placeholder).
+ */
+amp-list[diffable] div[role="list"] {
+  display: block;
+}
+
 /**
  * amp-story
  */

diff --git a/css/ampshared.css b/css/ampshared.css
@@ -14,6 +14,10 @@
  * limitations under the License.
  */
 
+/**
+ * @fileoverview CSS shared across AMP4ADS and other formats.
+ */
+
 /**
  * We intentionally break with HTML5's default [hidden] styling to apply
  * !important.
@@ -402,7 +406,6 @@ html.i-amphtml-fie > amp-analytics {
   position: initial !important;
 }
 
-
 /**
  * Forms error/success messaging containers should be hidden at first.
  */
@@ -412,13 +415,6 @@ form [submit-error] {
   display: none;
 }
 
-/**
- * amp-list error messaging container should be hidden at first.
- */
-amp-list [fetch-error] {
-  display: none;
-}
-
 /**
  * Form validation error messages should be hidden at first.
  */

diff --git a/examples/visual-tests/amp-list/amp-list.amp.html b/examples/visual-tests/amp-list/amp-list.amp.html
@@ -10,65 +10,51 @@
       body {
         padding: 15px;
       }
-
       amp-list {
         border: 1px solid lightgray;
       }
-
-      amp-list#list1 > div[overflow] {
+      div[overflow] {
         background: gray;
         color: #fff;
-        cursor: pointer;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        z-index: 2;
         padding: 16px;
-        opacity: 0.5;
       }
   </style>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
   <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-latest.js"></script>
 </head>
 <body>
-
-  <h2>Overflowing</h2>
-  <amp-list class="list1" width="300" height="100" src="./amp-list-data.json?RANDOM">
-    <template type="amp-mustache">
+  <h3>Doesn't overflow</h3>
+  <amp-list id="list1" width="300" height="130" src="./amp-list-data.json">
+    <template type="amp-mustache" id="template1">
       <div>
         <amp-img src="{{imageUrl}}" width=80 height=60></amp-img>
         {{title}}
       </div>
     </template>
-    <div overflow>
-      SEE MORE
-    </div>
+    <div overflow>div[overflow]</div>
   </amp-list>
 
-  <h2>Complete</h2>
-  <amp-list class="list2" width="300" height="130" src="./amp-list-data.json?RANDOM">
-    <template type="amp-mustache">
-      <div>
-        <amp-img src="{{imageUrl}}" width=80 height=60></amp-img>
-        {{title}}
-      </div>
-    </template>
-    <div overflow>
-      SEE MORE
-    </div>
+  <h3>Overflows (layout=fixed)</h3>
+  <amp-list id="list2" width="300" height="100" src="./amp-list-data.json" template="template1">
+    <div overflow>div[overflow]</div>
   </amp-list>
 
-  <h3>Sanitizer should preserve custom AMP attributes e.g. "layout"</h3>
-  <p>Expected: The images should fill the width of the its parent amp-list.</p>
-  <amp-list class="list2" width="300" height="130" src="./amp-list-data.json?RANDOM">
-    <template type="amp-mustache">
-      <div>
-        <amp-img src="{{imageUrl}}" width=80 height=60 layout=responsive></amp-img>
-        {{title}}
-      </div>
-    </template>
+  <h3>Overflows (layout=responsive)</h3>
+  <amp-list id="list3" width="300" height="50" layout="responsive" src="./amp-list-data.json" template="template1">
+    <div overflow>div[overflow]</div>
+  </amp-list>
+
+  <h3>Diffable</h3>
+  <amp-list id="list4" diffable width="auto" height="130" layout="fixed-height" src="./amp-list-data.json" template="template1">
+    <div fetch-error>div[fetch-error]</div>
+    <div role="list" class="i-amphtml-fill-content i-amphtml-replaced-content"><div role="listitem" tabindex="0">
+      <amp-img height="60" width="80" src="http://localhost:8000/examples/visual-tests/amp-list/img1.jpg" i-amphtml-ignore="" class="i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-layout" i-amphtml-layout="fixed" style="width: 80px; height: 60px;"><img decoding="async" src="http://localhost:8000/examples/visual-tests/amp-list/img1.jpg" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img>
+      Video games
+    </div><div role="listitem" tabindex="0">
+      <amp-img height="60" width="80" src="http://localhost:8000/examples/visual-tests/amp-list/img1.jpg" i-amphtml-ignore="" class="i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-layout" i-amphtml-layout="fixed" style="width: 80px; height: 60px;"><img decoding="async" src="http://localhost:8000/examples/visual-tests/amp-list/img2.jpg" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img>
+      Video games
+    </div></div>
   </amp-list>
 </body>
 </html>
diff --git a/test/visual-diff/visual-tests b/test/visual-diff/visual-tests
@@ -195,8 +195,9 @@
       "url": "examples/visual-tests/amp-list/amp-list.amp.html",
       "name": "AMP List and Mustache",
       "loading_complete_selectors": [
-        ".list1",
-        ".list2"
+        "#list1 > div[role='list']",
+        "#list2 > div[role='list']",
+        "#list3 > div[role='list']",
       ],
       "interactive_tests": "examples/visual-tests/amp-list/amp-list.amp.js"
     },