test: add test to verify picture in picture support

electron · Apr 3, 2019 · d5f5160 · d5f5160
1 parent c643f1a
commit d5f5160
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 0 deletions.
diff --git a/atom/common/api/features.cc b/atom/common/api/features.cc
@@ -41,6 +41,10 @@ bool IsPrintingEnabled() {
   return BUILDFLAG(ENABLE_PRINTING);
 }
 
+bool IsPictureInPictureEnabled() {
+  return BUILDFLAG(ENABLE_PICTURE_IN_PICTURE);
+}
+
 bool IsComponentBuild() {
 #if defined(COMPONENT_BUILD)
   return true;
@@ -63,6 +67,7 @@ void Initialize(v8::Local<v8::Object> exports,
   dict.SetMethod("isViewApiEnabled", &IsViewApiEnabled);
   dict.SetMethod("isTtsEnabled", &IsTtsEnabled);
   dict.SetMethod("isPrintingEnabled", &IsPrintingEnabled);
+  dict.SetMethod("isPictureInPictureEnabled", &IsPictureInPictureEnabled);
   dict.SetMethod("isComponentBuild", &IsComponentBuild);
 }
 

diff --git a/spec/api-web-contents-spec.js b/spec/api-web-contents-spec.js
@@ -1327,4 +1327,23 @@ describe('webContents module', () => {
       w.loadURL('data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E')
     })
   })
+
+  describe('PictureInPicture video', () => {
+    it('works as expected', (done) => {
+      w.destroy()
+      w = new BrowserWindow({
+        show: false,
+        webPreferences: {
+          sandbox: true
+        }
+      })
+      w.webContents.once('did-finish-load', async () => {
+        const result = await w.webContents.executeJavaScript(
+            `runTest(${features.isPictureInPictureEnabled()})`, true)
+        assert.strictEqual(result, true)
+        done()
+      })
+      w.loadFile(path.join(fixtures, 'api', 'picture-in-picture.html'))
+    })
+  })
 })
diff --git a/spec/fixtures/api/picture-in-picture.html b/spec/fixtures/api/picture-in-picture.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+  <head>
+  </head>
+  <body>
+    <video id="video" controls playsinline
+      src="data:video/webm;base64,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">
+    </video>
+
+    <script>
+      const togglePIP = async () => {
+        if (video !== document.pictureInPictureElement)
+          await video.requestPictureInPicture()
+        else
+          await document.exitPictureInPicture()
+      }
+
+      window.runTest = (shouldBeEnabled) => new Promise(async (resolve, reject) => {
+        try {
+          if (document.pictureInPictureEnabled) {
+            if (!shouldBeEnabled) {
+              resolve(false)
+              return
+            }
+
+            let windowSizeOk = false
+            video.addEventListener('enterpictureinpicture', (event) => {
+              const pipWindow = event.pictureInPictureWindow
+              if (pipWindow.width > 0 && pipWindow.height > 0) {
+                windowSizeOk = true
+              }
+            })
+
+            video.addEventListener('leavepictureinpicture', (event) => {
+              resolve(windowSizeOk)
+            })
+
+            await togglePIP()
+            setTimeout(async () => {
+              await togglePIP()
+            }, 500)
+          } else {
+            resolve(!shouldBeEnabled)
+          }
+        } catch (e) {
+          resolve(false)
+        }
+      })
+    </script>
+  </body>
+</html>