web-platform-tests · ntrrgc · Oct 6, 2019
diff --git a/lint.whitelist b/lint.whitelist
@@ -814,6 +814,7 @@ LAYOUTTESTS APIS: import-maps/resources/jest-test-helper.js
 LAYOUTTESTS APIS: permissions/test-background-fetch-permission.html
 LAYOUTTESTS APIS: resources/chromium/generic_sensor_mocks.js
 LAYOUTTESTS APIS: resources/chromium/webxr-test.js
+LAYOUTTESTS APIS: media-source/mediasource-video-is-visible.html
 
 # Signed Exchange files have hard-coded URLs in the certUrl field
 WEB-PLATFORM.TEST:signed-exchange/resources/*.sxg

diff --git a/media-source/mediasource-video-is-visible-expected.html b/media-source/mediasource-video-is-visible-expected.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>HTML MSE test: video is shown</title>
+    <link rel="author" title="Alicia Boya García" href="mailto:aboya@igalia.com">
+    <style>
+        html, body {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            background: white;
+        }
+        body {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+        }
+        #video {
+            width: 320px;
+            height: 240px;
+            background: blue;
+        }
+        #explanation {
+            position: absolute;
+            top: 260px;
+        }
+    </style>
+</head>
+<body>
+<div id="video"></div>
+<div id="explanation">A video containing a blue static image should be visible above.</div>
+</body>
+</html>
diff --git a/media-source/mediasource-video-is-visible.html b/media-source/mediasource-video-is-visible.html
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="en" class="reftest-wait">
+<head>
+    <meta charset="UTF-8">
+    <title>HTML MSE test: video is shown</title>
+    <link rel="author" title="Alicia Boya García" href="mailto:aboya@igalia.com">
+    <link rel="match" href="mediasource-video-is-visible-expected.html">
+    <meta name="fuzzy" content="maxDifference=30;totalPixels=76800">
+    <meta name="assert" content="Video is rendered in the MSE player.">
+    <style>
+        html, body {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            background: white;
+        }
+        body {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+        }
+        #video {
+            width: 320px;
+            height: 240px;
+        }
+        #explanation {
+            position: absolute;
+            top: 260px;
+        }
+    </style>
+</head>
+<body>
+<video id="video"></video>
+<div id="explanation">A video containing a blue static image should be visible above.</div>
+<script>
+    if ("testRunner" in window)
+        // WebKit reftests use a different mechanism for delaying the test finish.
+        testRunner.waitUntilDone();
+
+    const mediaElement = document.getElementById("video");
+
+    class NetworkError extends Error {
+        constructor(message) {
+            super(message);
+        }
+    }
+
+    function requestJSON(url) {
+        return new Promise((resolve, reject) => {
+            const xhr = new XMLHttpRequest();
+            xhr.open("GET", url, true);
+            xhr.responseType = "text";
+            xhr.onreadystatechange = () => {
+                if (xhr.readyState === 4) {
+                    if (xhr.status >= 200 && xhr.status < 300) {
+                        resolve(JSON.parse(xhr.responseText));
+                    } else {
+                        reject(new NetworkError(`Error ${xhr.status}`));
+                    }
+                }
+            };
+            xhr.send(null);
+        });
+    }
+
+    function requestBinaryMedia(url) {
+        return new Promise((resolve, reject) => {
+            const xhr = new XMLHttpRequest();
+            xhr.open("GET", url, true);
+            xhr.responseType = "arraybuffer";
+            xhr.onreadystatechange = () => {
+                if (xhr.readyState === 4) {
+                    if (xhr.status >= 200 && xhr.status < 300) {
+                        resolve(xhr.response);
+                    } else {
+                        reject(new NetworkError(`Error ${xhr.status}`));
+                    }
+                }
+            };
+            xhr.send(null);
+        })
+    }
+
+    function waitForEvent(element, eventName) {
+        return new Promise(resolve => {
+            element.addEventListener(eventName, function handler() {
+                element.removeEventListener(eventName, handler);
+                resolve();
+            })
+        });
+    }
+
+    function waitForAppend(sourceBuffer, data) {
+        return new Promise(resolve => {
+            const listener = () => {
+                sourceBuffer.removeEventListener("update", listener);
+                resolve();
+            };
+            sourceBuffer.addEventListener("update", listener);
+            sourceBuffer.appendBuffer(data);
+        });
+    }
+
+    let mediaSource;
+    let audioSB;
+    let videoSB;
+
+    async function main(audioType, audioUrl, videoType, videoUrl) {
+        const audioManifest = await requestJSON(audioUrl);
+        const videoManifest = await requestJSON(videoUrl);
+        const audioData = await requestBinaryMedia(audioManifest.url);
+        const videoData = await requestBinaryMedia(videoManifest.url);
+
+        mediaSource = new MediaSource();
+        mediaElement.src = window.URL.createObjectURL(mediaSource);
+        mediaElement.volume = 0.1;
+        await waitForEvent(mediaSource, "sourceopen");
+
+        audioSB = mediaSource.addSourceBuffer(audioType);
+        videoSB = mediaSource.addSourceBuffer(videoType);
+
+        await waitForAppend(audioSB, audioData.slice(0, audioManifest.init.size));
+        await waitForAppend(videoSB, videoData.slice(0, videoManifest.init.size));
+
+        await waitForAppend(audioSB, audioData.slice(audioManifest.init.size));
+        await waitForAppend(videoSB, videoData.slice(videoManifest.init.size));
+
+        mediaSource.endOfStream();
+        mediaElement.play();
+        await waitForEvent(mediaElement, "ended");
+
+        if ("testRunner" in window)
+            testRunner.notifyDone();
+        document.documentElement.classList.remove("reftest-wait");
+    }
+
+    function selectAlternative(alternatives) {
+        for (let alternative of alternatives) {
+            if (MediaSource.isTypeSupported(alternative.mimeType))
+                return [alternative.mimeType, alternative.url];
+        }
+        throw new Error("Could not find suitable alternative");
+    }
+
+    const [audioType, audioUrl] = selectAlternative([
+        {mimeType: 'audio/mp4; codecs="mp4a.40.2"', url: "mp4/test-a-1s.mp4-manifest.json"},
+        {mimeType: 'audio/webm; codecs="opus"', url: "webm/test-a-1s.webm-manifest.json"},
+    ]);
+    const [videoType, videoUrl] = selectAlternative([
+        {mimeType: 'video/mp4; codecs="avc1.42C015"', url: "mp4/test-v-1s-blue.mp4-manifest.json"},
+        {mimeType: 'video/webm; codecs="vp9"', url: "webm/test-v-1s-blue.webm-manifest.json"},
+    ]);
+
+    main(audioType, audioUrl, videoType, videoUrl);
+</script>
+</body>
+</html>
diff --git a/media-source/mp4/test-a-1s.mp4 b/media-source/mp4/test-a-1s.mp4
diff --git a/media-source/mp4/test-a-1s.mp4-manifest.json b/media-source/mp4/test-a-1s.mp4-manifest.json
@@ -0,0 +1,24 @@
+{
+    "url": "mp4/test-a-1s.mp4",
+    "init": {
+        "offset": 0,
+        "size": 942
+    },
+    "media": [
+        {
+            "offset": 942,
+            "size": 4067,
+            "timestamp": 0.0
+        },
+        {
+            "offset": 5009,
+            "size": 3624,
+            "timestamp": 0.5108390022675737
+        },
+        {
+            "offset": 8633,
+            "size": 570,
+            "timestamp": 0.9984580498866213
+        }
+    ]
+}
diff --git a/media-source/mp4/test-v-1s-blue.mp4 b/media-source/mp4/test-v-1s-blue.mp4
diff --git a/media-source/mp4/test-v-1s-blue.mp4-manifest.json b/media-source/mp4/test-v-1s-blue.mp4-manifest.json
@@ -0,0 +1,19 @@
+{
+    "url": "mp4/test-v-1s-blue.mp4",
+    "init": {
+        "offset": 0,
+        "size": 1053
+    },
+    "media": [
+        {
+            "offset": 1053,
+            "size": 1392,
+            "timestamp": 0.0
+        },
+        {
+            "offset": 2445,
+            "size": 351,
+            "timestamp": 0.5
+        }
+    ]
+}
diff --git a/media-source/webm/test-a-1s.webm b/media-source/webm/test-a-1s.webm
diff --git a/media-source/webm/test-a-1s.webm-manifest.json b/media-source/webm/test-a-1s.webm-manifest.json
@@ -0,0 +1,14 @@
+{
+    "url": "webm/test-a-1s.webm",
+    "init": {
+        "offset": 0,
+        "size": 600
+    },
+    "media": [
+        {
+            "offset": 600,
+            "size": 7880,
+            "timestamp": 0.0
+        }
+    ]
+}
diff --git a/media-source/webm/test-v-1s-blue.webm b/media-source/webm/test-v-1s-blue.webm
diff --git a/media-source/webm/test-v-1s-blue.webm-manifest.json b/media-source/webm/test-v-1s-blue.webm-manifest.json
@@ -0,0 +1,14 @@
+{
+    "url": "webm/test-v-1s-blue.webm",
+    "init": {
+        "offset": 0,
+        "size": 580
+    },
+    "media": [
+        {
+            "offset": 580,
+            "size": 766,
+            "timestamp": 0.0
+        }
+    ]
+}