Include viewport visibility checks for autoplay experiment.

LayoutTests/media/video-autoplay-experiment-modes.html

Index: LayoutTests/media/video-autoplay-experiment-modes.html
diff --git a/LayoutTests/media/video-autoplay-experiment-modes.html b/LayoutTests/media/video-autoplay-experiment-modes.html
index 04c704db8ca303cfb73658ac1f48d573b03baccf..9f2783e31f850c8689104e6e24f13b85a22da870 100644
--- a/LayoutTests/media/video-autoplay-experiment-modes.html
+++ b/LayoutTests/media/video-autoplay-experiment-modes.html
@@ -13,10 +13,11 @@
   Flags  - autoplay experiment setting being tested.
                a      - "foraudio"
                v      - "forvideo"
+               V      - "ifviewport"

[philipj_slow, 2015/09/21 15:02:04]

Also test ifpagevisible

[liberato (no reviews please), 2015/09/23 06:14:56]

done.

                M      - "ifmuted"
                p      - "playmuted"
                m      - "ifmobile"
-               For example, EM means "enabled-ifmuted".
+               For example, vM means '-forvideo-ifmuted".
   Type   - audio or video element?
                audio  - <audio>
                video  - <video>
@@ -30,8 +31,15 @@
   Mobile - is page optimized for mobile?
                no   - page is not optimized for mobile.
                yes  - page is optimized for mobile.
+  View   - is media in viewport?
+               onscreen  - element starts out onscreen.
+               scroll    - element starts offscreen, scrolled into view once
+                           it is ready to play.
+               offscreen - element starts out offscreen and stays offscreen.
 
   == Test Outputs ==
+  Early?  - did playback start before element was scrolled onscreen?  For
+            tests in which View!=scroll, this is reported as "-".
   Played? - did playback start by the conclusion of the test?
   Muted?  - was the media muted?  If the media didn't play, then this is
             reported as "-".
@@ -45,6 +53,8 @@
 <td>Play w/</td>
 <td>Mute</td>
 <td>Mobile</td>
+<td>View</td>
+<td>Early?</td>
 <td>Played?</td>
 <td>Muted?</td>
 </tr>
@@ -58,15 +68,19 @@ var configNumber = 0;
 
 var mediaFile = findMediaFile("video", "content/test");
 var onscreenParent = document.createElement("div");
+// The onscreen parent's height is also used to make sure that the off-screen
+// parent is, in fact, off-screen.
+onscreenParent.style.height = "1000px";
 document.body.insertBefore(onscreenParent, document.body.firstChild);
-// When we remove the meta tag from the document, we put it here.
+// Is the page optimized for mobile?  We can't un-optimize it.
 var isOptimizedForMobile = false;
+// Also create another root that's off the bottom of the window.
+var offscreenParent = document.createElement("div");
+document.body.appendChild(offscreenParent);
 
-function didPlaybackStart(video)
+function didPlaybackStart(element)
 {
-    // We say that the video started if it's not paused or if it played and
-    // already ended.
-    return !video.paused || video.ended;
+    return !element.paused || element.ended;
 }
 
 function becomeOptimizedForMobile(enable)
@@ -103,6 +117,7 @@ function addResultsRow(spec)
     var smallType = "";
     smallType += (type.indexOf("-forvideo")>-1)?"v":"";
     smallType += (type.indexOf("-foraudio")>-1)?"a":"";
+    smallType += (type.indexOf("-ifviewport")>-1)?"V":"";
     smallType += (type.indexOf("-ifmuted")>-1)?"M":"";
     smallType += (type.indexOf("-playmuted")>-1)?"p":"";
     smallType += (type.indexOf("-ifmobile")>-1)?"m":"";
@@ -110,7 +125,7 @@ function addResultsRow(spec)
 
     // Add remaining fields.
     var fields = [ "elementType", "autoplayType", "mutedType", "mobileType",
-        "played", "muted"];
+        "visType", "playedEarly", "played", "muted"];
     for(idx in fields)
         row.insertCell().innerText = spec[fields[idx]].substring(0,7);
 }
@@ -137,6 +152,9 @@ function checkElementStatus(element)
     addResultsRow(element.spec);
     element.remove();
 
+    // Scroll back to the top, in case this was a scrolling test.
+    onscreenParent.scrollIntoView();
+
     queueNextExperiment();
 }
 
@@ -148,15 +166,22 @@ function runOneConfig(spec)
     var element = document.createElement(spec.elementType);
     element.controls = true;
 
-    onscreenParent.appendChild(element);
+    // Pick whether the element will be visible when canPlayThrough.

[philipj_slow, 2015/09/21 15:02:04]

What does the "when canPlayThrough" bit mean? The layout will be done roughly
instantly.

[liberato (no reviews please), 2015/09/23 06:14:56]

At some point, canplaythrough will be generated, and the autoplay experiment
checks will be done.  we are choosing if we want to pass or fail the visibility
checks when that happens.

why does this necessarily happen right away, though?

[philipj_slow, 2015/09/25 15:32:27]

I mean that this code is appending the element either to an onscreen element or
an offscreen element right now, but the comment makes it sound like it has
something to do with the canplaythrough event.

+    if (spec.visType == "onscreen")
+        onscreenParent.appendChild(element);
+    else
+        offscreenParent.appendChild(element);
 
     // Set any attributes before canPlayThrough.
     if (spec.mutedType == "yes")
         element.muted = true;
     if (spec.autoplayType == "attr")
         element.autoplay = true;
+
     becomeOptimizedForMobile(spec.mobileType == "yes");
 
+    spec.playedEarly = "-";
+
     // Record the spec in the element, so that we can display the
     // results later.
     element.spec = spec;
@@ -168,8 +193,21 @@ function runOneConfig(spec)
         // Now that we can play, if we're supposed to play / mute via js do so.
         configureElementViaScript(element, spec);
 
-        // Record the results.
-        checkElementStatus(element);
+        // If we're supposed to scroll the item onscreen after it is ready to
+        // play, then do so now.
+        if(spec.visType == "scroll") {
+            // Record the play state here, too, before we scroll.
+            spec.playedEarly = didPlaybackStart(element) ? "yes" : "no";
+
+            // We are supposed to scroll the player into view.
+            element.scrollIntoView(true);
+            window.internals.triggerAutoplayViewportCheck(element);

[philipj_slow, 2015/09/21 15:02:04]

What's going on here, isn't the scroll itself supposed to trigger the play, or
was that idea abandoned? (I don't think it's a sane behavior, but IIRC it would
still be tested to see how people react.)

[liberato (no reviews please), 2015/09/23 06:14:56]

the trigger happens after scrolling stops, not when it starts.  as in, flinging
the page to the bottom won't automatically start every video on the page.

[philipj_slow, 2015/09/25 15:32:27]

Yes, but shouldn't the call to element.scrollIntoView() eventually trigger the
check again, or why is the manual triggerAutoplayViewportCheck needed here?

+            // Once those are return, the state should be correct.

[philipj_slow, 2015/09/21 15:02:04]

Once the above two methods have returned? Maybe "The new state should be
observable synchronously"?

[liberato (no reviews please), 2015/09/23 06:14:56]

Done.

+            checkElementStatus(element, spec);
+        } else {
+            // Record the results immediately.
+            checkElementStatus(element, spec);
+        }
     });
 
     // Set the source, which will eventually lead to canPlayThrough.
@@ -179,14 +217,17 @@ function runOneConfig(spec)
 var experimentTypes = [
     "none",
     "enabled-forvideo",
-    "enabled-forvideo-ifmuted",
-    "enabled-forvideo-playmuted",
+    "enabled-forvideo-ifviewport-ifpagevisible",
+    "enabled-forvideo-ifviewport-ifpagevisible-ifmuted",
+    "enabled-forvideo-ifviewport-ifpagevisible-playmuted",
     "enabled-foraudio",
     "enabled-forvideo-ifmobile",
+    "enabled-foraudio-ifviewport-ifpagevisible",
 ];
 var elementTypes = ["video", "audio"];
 var autoplayTypes = ["none", "attr", "play()"];
 var mutedTypes = ["no", "yes"];
+var visTypes = ["onscreen", "scroll", "offscreen"];
 // mobileTypes must always start with no, since we cannot un-optimize the page.
 var mobileTypes = ["no", "yes"];
 
@@ -205,6 +246,8 @@ function runNextConfig()
     exp = Math.floor(exp / autoplayTypes.length);
     spec.mutedType = mutedTypes[exp % mutedTypes.length];
     exp = Math.floor(exp / mutedTypes.length);
+    spec.visType = visTypes[exp % visTypes.length];
+    exp = Math.floor(exp / visTypes.length);
     // Mobile must always change last, so that all the "no" cases precede
     // all the "yes" cases, since we can't switch the doc back to "not
     // optimized for mobile".
@@ -230,10 +273,33 @@ function runNextConfig()
     if ((spec.mobileType == "yes" || spec.experimentType.indexOf("-ifmobile")>0)
         && (spec.elementType != "video" || spec.autoplayType != "attr"
             || spec.mutedType != "no"
+            || spec.visType != "onscreen"
             || (spec.experimentType != "enabled-forvideo"
                 && spec.experimentType != "enabled-forvideo-ifmobile")))
         skip = true;
 
+    var mismatched =(spec.elementType == "video"
+        && spec.experimentType.indexOf("-foraudio") > -1)
+        || (spec.elementType == "audio"
+        && spec.experimentType.indexOf("-forvideo") > -1);
+
+    if (spec.autoplayType == "none" && spec.visType != 'onscreen')
+        skip = true;
+    else if (spec.experimentType.indexOf("-ifmuted") > -1 && spec.visType != "onscreen")
+        skip = true;
+    else if (spec.visType == "offscreen" && spec.autoplayType != "attr")
+        skip = true;
+    else if (spec.experimentType.indexOf("-ifmuted") == -1 && spec.mutedType == "yes")
+        skip = true;
+    else if (spec.elementType == "audio" && spec.mutedType == "yes")
+        skip = true;
+    else if (spec.elementType == "audio" && spec.visType != "scroll")
+        skip = true;
+    else if (mismatched && spec.visType !="onscreen")
+        skip = true;
+    else if (mismatched && spec.autoplayType != "attr")
+        skip = true;
+
     if (skip)
         queueNextExperiment();
     else