blob: 0fc252c8d3f979d949e3aff9796faef2b77c1cad [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<script src="../video-test.js"></script>
<script src="../media-file.js"></script>
<style>
video {
color: rgb(0, 0, 255);
}
:picture-in-picture {
color: rgb(0, 255, 0);
}
/* illegal selector list */
video, :picture-in-picture(*) {
color: rgb(255, 0, 0);
}
</style>
<script>
window.addEventListener('load', async event => {
findMediaElement();
run('internals.settings.setAllowsPictureInPictureMediaPlayback(true)');
run('internals.setPictureInPictureAPITestEnabled(video, true)');
run('video.src = findMediaFile("video", "../content/test")');
await waitFor(video, 'canplaythrough');
testExpected('getComputedStyle(video).color', 'rgb(0, 0, 255)');
runWithKeyDown(function() { video.requestPictureInPicture() });
await waitFor(video, 'enterpictureinpicture');
testExpected('getComputedStyle(video).color', 'rgb(0, 255, 0)');
document.exitPictureInPicture();
await waitFor(video, 'leavepictureinpicture');
testExpected('getComputedStyle(video).color', 'rgb(0, 0, 255)');
endTest();
});
</script>
</head>
<body>
<div>This tests that entering and leaving Picture-in-Picture toggles CSS selector.</div>
<video controls></video>
</body>
</html>