✅ Visual test video docking: RTL and dock into slot element (ampproje…

…ct#25947) Different HTML harnesses with different visual results but same interactive tests. Controls on RTL are incorrectly positioned, this is a legitimate bug. Will fix in follow up PR.
samouri · Dec 9, 2019 · b475271 · b475271
1 parent d408949
commit b475271
Show file tree

Hide file tree

Showing 4 changed files with 142 additions and 2 deletions.
diff --git a/.../amp-video-docking/amp-video-docking.html → ...s/visual-tests/amp-video-docking/ltr.html b/.../amp-video-docking/amp-video-docking.html → ...s/visual-tests/amp-video-docking/ltr.html
@@ -17,6 +17,10 @@
     }
   </style>
 </head>
+<!--
+  This is the same as rtl.html, but WITHOUT body[dir=rtl] so the video will dock
+  from left-to-right.
+-->
 <body>
   <amp-video-iframe
     id="video"

diff --git a/examples/visual-tests/amp-video-docking/rtl.html b/examples/visual-tests/amp-video-docking/rtl.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>amp-video-docking visual test</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-video-iframe" src="https://cdn.ampproject.org/v0/amp-video-iframe-0.1.js"></script>
+  <script async custom-element="amp-video-docking" src="https://cdn.ampproject.org/v0/amp-video-docking-0.1.js"></script>
+  <style amp-custom>
+    [placeholder],
+    [fallback] {
+      font-size: 4em;
+      padding: 1em;
+    }
+  </style>
+</head>
+<!--
+  This is the same as ltr.html, but with body[dir=rtl] so the video will dock
+  from right-to-left.
+-->
+<body dir="rtl">
+  <amp-video-iframe
+    id="video"
+    src="./video-iframe-inner.html"
+    width="400"
+    height="300"
+    layout="responsive"
+    dock
+  >
+    <div placeholder>🖼</div>
+    <div fallback>😵</div>
+  </amp-video-iframe>
+  <button on="tap: video.play" id="play-button">play</button>
+  <button
+    on="tap: bottom.scrollTo(pos='bottom')"
+    id="scroll-bottom-button"
+  >
+    scroll to bottom
+  </button>
+  <button
+    on="tap: video.scrollTo(pos='top')"
+    id="scroll-video-button"
+  >
+    scroll to video
+  </button>
+  <div id="bottom" style="height: 200vh"></div>
+</body>
+</html>
diff --git a/examples/visual-tests/amp-video-docking/slot.html b/examples/visual-tests/amp-video-docking/slot.html
@@ -0,0 +1,71 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>amp-video-docking visual test</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <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>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-video-iframe" src="https://cdn.ampproject.org/v0/amp-video-iframe-0.1.js"></script>
+  <script async custom-element="amp-video-docking" src="https://cdn.ampproject.org/v0/amp-video-docking-0.1.js"></script>
+  <style amp-custom>
+    body {
+      padding-top: 40px;
+    }
+    [placeholder],
+    [fallback] {
+      font-size: 4em;
+      padding: 1em;
+    }
+    .fixed {
+      position: fixed;
+      width: 200px;
+      height: 150px;
+      right: 22px;
+      top: 22px;
+      border: 4px dotted tomato;
+      padding: 4px;
+    }
+  </style>
+</head>
+<!--
+  This contains an amp-layout#slot element that the video docks into (see at end
+  of document.)
+-->
+<body>
+  <amp-video-iframe
+    id="video"
+    src="./video-iframe-inner.html"
+    width="400"
+    height="300"
+    layout="responsive"
+    dock="#slot"
+  >
+    <div placeholder>🖼</div>
+    <div fallback>😵</div>
+  </amp-video-iframe>
+  <button on="tap: video.play" id="play-button">play</button>
+  <button
+    on="tap: bottom.scrollTo(pos='bottom')"
+    id="scroll-bottom-button"
+  >
+    scroll to bottom
+  </button>
+  <button
+    on="tap: video.scrollTo(pos='top')"
+    id="scroll-video-button"
+  >
+    scroll to video
+  </button>
+  <div id="bottom" style="height: 200vh"></div>
+  <div class="fixed">
+    <amp-layout
+      layout="responsive"
+      width="400"
+      height="300"
+      id="slot"
+    ></amp-layout>
+  </div>
+</body>
+</html>
diff --git a/test/visual-diff/visual-tests b/test/visual-diff/visual-tests
@@ -761,8 +761,22 @@
       "interactive_tests": "examples/visual-tests/amp-mega-menu/amp-mega-menu.js"
     },
     {
-      "url": "examples/visual-tests/amp-video-docking/amp-video-docking.html",
-      "name": "amp-video-docking",
+      "url": "examples/visual-tests/amp-video-docking/ltr.html",
+      "name": "amp-video-docking (left-to-right)",
+      "viewport": {"width": 800, "height": 600},
+      "interactive_tests": "examples/visual-tests/amp-video-docking/amp-video-docking.js",
+      "loading_complete_selectors": [".i-amphtml-video-component"],
+    },
+    {
+      "url": "examples/visual-tests/amp-video-docking/rtl.html",
+      "name": "amp-video-docking (right-to-left)",
+      "viewport": {"width": 800, "height": 600},
+      "interactive_tests": "examples/visual-tests/amp-video-docking/amp-video-docking.js",
+      "loading_complete_selectors": [".i-amphtml-video-component"],
+    },
+    {
+      "url": "examples/visual-tests/amp-video-docking/slot.html",
+      "name": "amp-video-docking (slot)",
       "viewport": {"width": 800, "height": 600},
       "interactive_tests": "examples/visual-tests/amp-video-docking/amp-video-docking.js",
       "loading_complete_selectors": [".i-amphtml-video-component"],