summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/picture-in-picture/css-selector.html
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/picture-in-picture/css-selector.html')
-rw-r--r--testing/web-platform/tests/picture-in-picture/css-selector.html34
1 files changed, 34 insertions, 0 deletions
diff --git a/testing/web-platform/tests/picture-in-picture/css-selector.html b/testing/web-platform/tests/picture-in-picture/css-selector.html
new file mode 100644
index 0000000000..bf64a1421f
--- /dev/null
+++ b/testing/web-platform/tests/picture-in-picture/css-selector.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>Test CSS selector :picture-in-picture</title>
+<script src="/common/media.js"></script>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/picture-in-picture-helpers.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>
+<body></body>
+<script>
+promise_test(async t => {
+ const video = await loadVideo();
+ document.body.appendChild(video);
+ assert_equals(getComputedStyle(video).color, 'rgb(0, 0, 255)');
+
+ await requestPictureInPictureWithTrustedClick(video);
+ assert_equals(getComputedStyle(video).color, 'rgb(0, 255, 0)');
+
+ await document.exitPictureInPicture();
+ assert_equals(getComputedStyle(video).color, 'rgb(0, 0, 255)');
+}, 'Entering and leaving Picture-in-Picture toggles CSS selector');
+</script>