Skip to content
Permalink
Browse files
[:has() pseudo-class] Support invalidation for :picture-in-picture ps…
…eudo-class

https://bugs.webkit.org/show_bug.cgi?id=249456
rdar://103438114

Reviewed by Antti Koivisto.

* LayoutTests/media/picture-in-picture/picture-in-picture-api-css-selector-expected.txt:
* LayoutTests/media/picture-in-picture/picture-in-picture-api-css-selector.html:
* Source/WebCore/Modules/pictureinpicture/HTMLVideoElementPictureInPicture.cpp:
(WebCore::HTMLVideoElementPictureInPicture::didEnterPictureInPicture):
(WebCore::HTMLVideoElementPictureInPicture::didExitPictureInPicture):
* Source/WebCore/dom/Document.cpp:
(WebCore::Document::setPictureInPictureElement):

Canonical link: https://commits.webkit.org/257995@main
  • Loading branch information
nt1m committed Dec 16, 2022
1 parent 7c9d435 commit b0e1661e0d64d9656ead17b7c9cb6ff8472fa94f
Show file tree
Hide file tree
Showing 4 changed files with 28 additions and 4 deletions.
@@ -5,9 +5,12 @@ RUN(internals.setMockVideoPresentationModeEnabled(true))
RUN(video.src = findMediaFile("video", "../content/test"))
EVENT(canplaythrough)
EXPECTED (getComputedStyle(video).color == 'rgb(0, 0, 255)') OK
EXPECTED (getComputedStyle(subject).backgroundColor == 'rgb(255, 0, 0)') OK
EVENT(enterpictureinpicture)
EXPECTED (getComputedStyle(video).color == 'rgb(0, 255, 0)') OK
EXPECTED (getComputedStyle(subject).backgroundColor == 'rgb(0, 128, 0)') OK
EVENT(leavepictureinpicture)
EXPECTED (getComputedStyle(video).color == 'rgb(0, 0, 255)') OK
EXPECTED (getComputedStyle(subject).backgroundColor == 'rgb(255, 0, 0)') OK
END OF TEST

@@ -4,6 +4,13 @@
<script src="../video-test.js"></script>
<script src="../media-file.js"></script>
<style>
#subject {
background-color: red;
}
#subject:has(:picture-in-picture) {
background-color: green;
}

video {
color: rgb(0, 0, 255);
}
@@ -30,24 +37,28 @@
run('video.src = findMediaFile("video", "../content/test")');
await waitFor(video, 'canplaythrough');
testExpected('getComputedStyle(video).color', 'rgb(0, 0, 255)');

testExpected('getComputedStyle(subject).backgroundColor', 'rgb(255, 0, 0)');
runWithKeyDown(() => {
video.requestPictureInPicture();
});

await waitFor(video, 'enterpictureinpicture');
testExpected('getComputedStyle(video).color', 'rgb(0, 255, 0)');
testExpected('getComputedStyle(subject).backgroundColor', 'rgb(0, 128, 0)');

document.exitPictureInPicture();
await waitFor(video, 'leavepictureinpicture');
testExpected('getComputedStyle(video).color', 'rgb(0, 0, 255)');
testExpected('getComputedStyle(subject).backgroundColor', 'rgb(255, 0, 0)');

endTest();
});
</script>
</head>
<body>
<div>This tests that entering and leaving Picture-in-Picture toggles CSS selector.</div>
<video controls></video>
<div id="subject">
<video controls></video>
</div>
</body>
</html>
@@ -154,7 +154,6 @@ void HTMLVideoElementPictureInPicture::exitPictureInPicture(Ref<DeferredPromise>
void HTMLVideoElementPictureInPicture::didEnterPictureInPicture(const IntSize& windowSize)
{
INFO_LOG(LOGIDENTIFIER);
m_videoElement.invalidateStyle();
m_videoElement.document().setPictureInPictureElement(&m_videoElement);
m_pictureInPictureWindow->setSize(windowSize);

@@ -172,7 +171,6 @@ void HTMLVideoElementPictureInPicture::didEnterPictureInPicture(const IntSize& w
void HTMLVideoElementPictureInPicture::didExitPictureInPicture()
{
INFO_LOG(LOGIDENTIFIER);
m_videoElement.invalidateStyle();
m_pictureInPictureWindow->close();
m_videoElement.document().setPictureInPictureElement(nullptr);

@@ -9192,6 +9192,18 @@ HTMLVideoElement* Document::pictureInPictureElement() const

void Document::setPictureInPictureElement(HTMLVideoElement* element)
{
auto* oldElement = m_pictureInPictureElement.get();
if (oldElement == element)
return;

std::optional<Style::PseudoClassChangeInvalidation> oldInvalidation;
if (oldElement)
emplace(oldInvalidation, *oldElement, { { CSSSelector::PseudoClassPictureInPicture, false } });

std::optional<Style::PseudoClassChangeInvalidation> newInvalidation;
if (element)
emplace(newInvalidation, *element, { { CSSSelector::PseudoClassPictureInPicture, true } });

m_pictureInPictureElement = element;
}
#endif

0 comments on commit b0e1661

Please sign in to comment.