Bug 1534865 [wpt PR 15743] - Add experimental :picture-in-picture CSS pseudo-class, a=testonly
authorFrançois Beaufort <beaufort.francois@gmail.com>
Thu, 18 Apr 2019 11:57:31 +0000
changeset 529952 c0c0d5bb4689270f405651c439af58e41468ebe6
parent 529951 3522e80df527d2741a07862f219a1e38434a5cca
child 529953 21d19e5cc6ff9bd93147f5902b9421be59aaf178
push id11265
push userffxbld-merge
push dateMon, 13 May 2019 10:53:39 +0000
treeherdermozilla-beta@77e0fe8dbdd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1534865, 15743, 940404, 1511459, 644853
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1534865 [wpt PR 15743] - Add experimental :picture-in-picture CSS pseudo-class, a=testonly Automatic update from web-platform-tests Add experimental :picture-in-picture CSS pseudo-class This CL adds support for an experimental CSS pseudo-class used to detect when an element enters and leave Picture-in-Picture. Spec: https://github.com/WICG/picture-in-picture/pull/120 Intent to Implement & Ship: https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/X-qPSmdSR_g Bug: 940404 Change-Id: Id225eaff841f7338927d5e150ba9ad6b97dcb258 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1511459 Commit-Queue: Fran├žois Beaufort <beaufort.francois@gmail.com> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Reviewed-by: Hayato Ito <hayato@chromium.org> Reviewed-by: Eric Willigers <ericwilligers@chromium.org> Reviewed-by: Mounir Lamouri <mlamouri@chromium.org> Cr-Commit-Position: refs/heads/master@{#644853} -- wpt-commits: d0396cc595c60b71d52092dc640a956b76051a9f wpt-pr: 15743
testing/web-platform/tests/picture-in-picture/css-selector.html
testing/web-platform/tests/picture-in-picture/shadow-dom.html
new file mode 100644
--- /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>
--- a/testing/web-platform/tests/picture-in-picture/shadow-dom.html
+++ b/testing/web-platform/tests/picture-in-picture/shadow-dom.html
@@ -1,26 +1,38 @@
 <!DOCTYPE html>
-<title>Test for pictureInPictureElement adjustment for Shadow DOM</title>
+<title>Test for Picture-In-Picture and Shadow DOM</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>
 <script src="../shadow-dom/resources/shadow-dom.js"></script>
+<style>
+  #host2 { color: rgb(0, 0, 254); }
+  #host2:picture-in-picture { color: rgb(0, 0, 255); }
+</style>
 <body>
 <div id='host'>
   <template data-mode='open' id='root'>
     <slot></slot>
   </template>
   <div id='host2'>
     <template data-mode='open' id='root2'>
+    <style>
+      #host3 { color: rgb(0, 0, 127); }
+      #host3:picture-in-picture { color: rgb(0, 0, 128); }
+    </style>
       <div id='host3'>
         <template data-mode='open' id='root3'>
+          <style>
+            video { color: rgb(0, 254, 0); }
+            video:picture-in-picture { color: rgb(0, 255, 0); }
+          </style>
           <video id='video'></video>
           <div id='host4'>
             <template data-mode='open' id='root4'>
               <div></div>
             </template>
           </div>
         </template>
       </div>
@@ -40,24 +52,37 @@ promise_test(async t => {
 
   assert_equals(document.pictureInPictureElement, null);
   assert_equals(ids.root.pictureInPictureElement, null);
   assert_equals(ids.root2.pictureInPictureElement, null);
   assert_equals(ids.root3.pictureInPictureElement, null);
   assert_equals(ids.root4.pictureInPictureElement, null);
   assert_equals(ids.root5.pictureInPictureElement, null);
 
+  assert_equals(getComputedStyle(ids.video).color, 'rgb(0, 254, 0)');
+  assert_equals(getComputedStyle(ids.host3).color, 'rgb(0, 0, 127)');
+  assert_equals(getComputedStyle(ids.host2).color, 'rgb(0, 0, 254)');
+
   await new Promise(resolve => {
     ids.video.src = getVideoURI('/media/movie_5');
     ids.video.onloadeddata = resolve;
   })
   .then(() => requestPictureInPictureWithTrustedClick(ids.video))
   .then(() => {
     assert_equals(document.pictureInPictureElement, ids.host2);
     assert_equals(ids.root.pictureInPictureElement, null);
     assert_equals(ids.root2.pictureInPictureElement, ids.host3);
     assert_equals(ids.root3.pictureInPictureElement, ids.video);
     assert_equals(ids.root4.pictureInPictureElement, null);
     assert_equals(ids.root5.pictureInPictureElement, null);
+
+    assert_equals(getComputedStyle(ids.video).color, 'rgb(0, 255, 0)');
+    assert_equals(getComputedStyle(ids.host3).color, 'rgb(0, 0, 128)');
+    assert_equals(getComputedStyle(ids.host2).color, 'rgb(0, 0, 255)');
   })
-  .then(() => document.exitPictureInPicture());
+  .then(() => document.exitPictureInPicture())
+  .then(() => {
+    assert_equals(getComputedStyle(ids.video).color, 'rgb(0, 254, 0)');
+    assert_equals(getComputedStyle(ids.host3).color, 'rgb(0, 0, 127)');
+    assert_equals(getComputedStyle(ids.host2).color, 'rgb(0, 0, 254)');
+  });
 });
 </script>