haikuwebkit/LayoutTests/fullscreen/video-inside-flex-item.html

48 lines
1.5 KiB
HTML
Raw Permalink Normal View History

REGRESSION (r262124): Twitter videos go blank after exiting fullscreen https://bugs.webkit.org/show_bug.cgi?id=213110 Reviewed by Darin Adler. Source/WebCore: Test: fullscreen/video-inside-flex-item.html Setting/unsetting position:absolute on a flex/grid item can potentially create/remove flex/grid items because absolutely positioned children of those containers are out-of-flow and thus, do not generate flex/grid items. Flex/grid items are potentially stretched by their containers so the style recalculation is not enough to get a correct layout because the override size set by flex/grid containers is not reset. In the particular case of this bug we had this hierarchy (highly simplified from twitter page): Flexbox container |___DIV (absolutelly positioned) |___<video> (height: 100% width: 100%) When the <video> goes fullscreen the FullscreenManager replaces the style of the DIV because it inserts a RenderFullScreen object in between the DIV and the <video> (along with some anonymous blocks). This means that the DIV which was not a flex item (as it was absolutely positioned) became a flex item and thus its size is stretched as the flexbox container mandates. When exiting fullscreen, the original style is restored (and thus the position absolute). The DIV is then no longer a flex item but the stretched size (overrideContentSize) is still set, causing issues with the sizes of the <video>. Note that it isn't possible to reproduce this bug with the current trunk because there is a bug in the flexbox implementation (see bug 212264) preventing this to happen. However it becomes 100% reproducible with the patch for bug 212264 which is correct and fixes several tests related to wrapping in flexbox. It's also reproducible when the FULLSCREEN_API is enabled, otherwise the codepath for full screen is totally different (there are no placeholders). * rendering/RenderBox.cpp: (WebCore::RenderBox::styleDidChange): clear the override sizes for grid/flex when flex/grid items become out-of-flow, for example by changing position to absolute. LayoutTests: * fullscreen/video-inside-flex-item-expected.txt: Added. * fullscreen/video-inside-flex-item.html: Added. Canonical link: https://commits.webkit.org/226295@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@263389 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2020-06-23 07:27:29 +00:00
<!DOCTYPE html>
<style>
body {
margin: 0px;
}
.percent100 {
width: 100%;
height: 100%;
}
</style>
<script src="full-screen-test.js"></script>
<script src=../media/media-file.js></script>
<div style="display: flex; flex-direction: column;">
<div style="position: absolute; background: green;">
<video id="video" class="percent100" controls></video>
</div>
</div>
<script>
// Bail out early if the full screen API is not enabled or is missing:
if (Element.prototype.webkitRequestFullScreen == undefined) {
logResult(false, "Element.prototype.webkitRequestFullScreen == undefined");
endTest();
} else {
var video = document.getElementById('video');
video.addEventListener("loadeddata", function(ev) {
REGRESSION (r262124): Twitter videos go blank after exiting fullscreen https://bugs.webkit.org/show_bug.cgi?id=213110 Reviewed by Darin Adler. Source/WebCore: Test: fullscreen/video-inside-flex-item.html Setting/unsetting position:absolute on a flex/grid item can potentially create/remove flex/grid items because absolutely positioned children of those containers are out-of-flow and thus, do not generate flex/grid items. Flex/grid items are potentially stretched by their containers so the style recalculation is not enough to get a correct layout because the override size set by flex/grid containers is not reset. In the particular case of this bug we had this hierarchy (highly simplified from twitter page): Flexbox container |___DIV (absolutelly positioned) |___<video> (height: 100% width: 100%) When the <video> goes fullscreen the FullscreenManager replaces the style of the DIV because it inserts a RenderFullScreen object in between the DIV and the <video> (along with some anonymous blocks). This means that the DIV which was not a flex item (as it was absolutely positioned) became a flex item and thus its size is stretched as the flexbox container mandates. When exiting fullscreen, the original style is restored (and thus the position absolute). The DIV is then no longer a flex item but the stretched size (overrideContentSize) is still set, causing issues with the sizes of the <video>. Note that it isn't possible to reproduce this bug with the current trunk because there is a bug in the flexbox implementation (see bug 212264) preventing this to happen. However it becomes 100% reproducible with the patch for bug 212264 which is correct and fixes several tests related to wrapping in flexbox. It's also reproducible when the FULLSCREEN_API is enabled, otherwise the codepath for full screen is totally different (there are no placeholders). * rendering/RenderBox.cpp: (WebCore::RenderBox::styleDidChange): clear the override sizes for grid/flex when flex/grid items become out-of-flow, for example by changing position to absolute. LayoutTests: * fullscreen/video-inside-flex-item-expected.txt: Added. * fullscreen/video-inside-flex-item.html: Added. Canonical link: https://commits.webkit.org/226295@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@263389 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2020-06-23 07:27:29 +00:00
waitForEventOnce(document, 'webkitfullscreenchange', function() {
// First check that the video went fullscreen.
test("video.clientWidth == document.body.clientWidth");
waitForEventOnce(document, 'webkitfullscreenchange', function() {
// Then check that the original video size is properly restored.
testExpected(video.clientWidth, 320);
testExpected(video.clientHeight, 240);
endTest();
});
document.webkitCancelFullScreen();
REGRESSION (r262124): Twitter videos go blank after exiting fullscreen https://bugs.webkit.org/show_bug.cgi?id=213110 Reviewed by Darin Adler. Source/WebCore: Test: fullscreen/video-inside-flex-item.html Setting/unsetting position:absolute on a flex/grid item can potentially create/remove flex/grid items because absolutely positioned children of those containers are out-of-flow and thus, do not generate flex/grid items. Flex/grid items are potentially stretched by their containers so the style recalculation is not enough to get a correct layout because the override size set by flex/grid containers is not reset. In the particular case of this bug we had this hierarchy (highly simplified from twitter page): Flexbox container |___DIV (absolutelly positioned) |___<video> (height: 100% width: 100%) When the <video> goes fullscreen the FullscreenManager replaces the style of the DIV because it inserts a RenderFullScreen object in between the DIV and the <video> (along with some anonymous blocks). This means that the DIV which was not a flex item (as it was absolutely positioned) became a flex item and thus its size is stretched as the flexbox container mandates. When exiting fullscreen, the original style is restored (and thus the position absolute). The DIV is then no longer a flex item but the stretched size (overrideContentSize) is still set, causing issues with the sizes of the <video>. Note that it isn't possible to reproduce this bug with the current trunk because there is a bug in the flexbox implementation (see bug 212264) preventing this to happen. However it becomes 100% reproducible with the patch for bug 212264 which is correct and fixes several tests related to wrapping in flexbox. It's also reproducible when the FULLSCREEN_API is enabled, otherwise the codepath for full screen is totally different (there are no placeholders). * rendering/RenderBox.cpp: (WebCore::RenderBox::styleDidChange): clear the override sizes for grid/flex when flex/grid items become out-of-flow, for example by changing position to absolute. LayoutTests: * fullscreen/video-inside-flex-item-expected.txt: Added. * fullscreen/video-inside-flex-item.html: Added. Canonical link: https://commits.webkit.org/226295@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@263389 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2020-06-23 07:27:29 +00:00
});
runWithKeyDown(function() {
video.webkitRequestFullScreen();
});
REGRESSION (r262124): Twitter videos go blank after exiting fullscreen https://bugs.webkit.org/show_bug.cgi?id=213110 Reviewed by Darin Adler. Source/WebCore: Test: fullscreen/video-inside-flex-item.html Setting/unsetting position:absolute on a flex/grid item can potentially create/remove flex/grid items because absolutely positioned children of those containers are out-of-flow and thus, do not generate flex/grid items. Flex/grid items are potentially stretched by their containers so the style recalculation is not enough to get a correct layout because the override size set by flex/grid containers is not reset. In the particular case of this bug we had this hierarchy (highly simplified from twitter page): Flexbox container |___DIV (absolutelly positioned) |___<video> (height: 100% width: 100%) When the <video> goes fullscreen the FullscreenManager replaces the style of the DIV because it inserts a RenderFullScreen object in between the DIV and the <video> (along with some anonymous blocks). This means that the DIV which was not a flex item (as it was absolutely positioned) became a flex item and thus its size is stretched as the flexbox container mandates. When exiting fullscreen, the original style is restored (and thus the position absolute). The DIV is then no longer a flex item but the stretched size (overrideContentSize) is still set, causing issues with the sizes of the <video>. Note that it isn't possible to reproduce this bug with the current trunk because there is a bug in the flexbox implementation (see bug 212264) preventing this to happen. However it becomes 100% reproducible with the patch for bug 212264 which is correct and fixes several tests related to wrapping in flexbox. It's also reproducible when the FULLSCREEN_API is enabled, otherwise the codepath for full screen is totally different (there are no placeholders). * rendering/RenderBox.cpp: (WebCore::RenderBox::styleDidChange): clear the override sizes for grid/flex when flex/grid items become out-of-flow, for example by changing position to absolute. LayoutTests: * fullscreen/video-inside-flex-item-expected.txt: Added. * fullscreen/video-inside-flex-item.html: Added. Canonical link: https://commits.webkit.org/226295@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@263389 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2020-06-23 07:27:29 +00:00
});
setSrcById("video", findMediaFile("video", "../media/content/test"));
REGRESSION (r262124): Twitter videos go blank after exiting fullscreen https://bugs.webkit.org/show_bug.cgi?id=213110 Reviewed by Darin Adler. Source/WebCore: Test: fullscreen/video-inside-flex-item.html Setting/unsetting position:absolute on a flex/grid item can potentially create/remove flex/grid items because absolutely positioned children of those containers are out-of-flow and thus, do not generate flex/grid items. Flex/grid items are potentially stretched by their containers so the style recalculation is not enough to get a correct layout because the override size set by flex/grid containers is not reset. In the particular case of this bug we had this hierarchy (highly simplified from twitter page): Flexbox container |___DIV (absolutelly positioned) |___<video> (height: 100% width: 100%) When the <video> goes fullscreen the FullscreenManager replaces the style of the DIV because it inserts a RenderFullScreen object in between the DIV and the <video> (along with some anonymous blocks). This means that the DIV which was not a flex item (as it was absolutely positioned) became a flex item and thus its size is stretched as the flexbox container mandates. When exiting fullscreen, the original style is restored (and thus the position absolute). The DIV is then no longer a flex item but the stretched size (overrideContentSize) is still set, causing issues with the sizes of the <video>. Note that it isn't possible to reproduce this bug with the current trunk because there is a bug in the flexbox implementation (see bug 212264) preventing this to happen. However it becomes 100% reproducible with the patch for bug 212264 which is correct and fixes several tests related to wrapping in flexbox. It's also reproducible when the FULLSCREEN_API is enabled, otherwise the codepath for full screen is totally different (there are no placeholders). * rendering/RenderBox.cpp: (WebCore::RenderBox::styleDidChange): clear the override sizes for grid/flex when flex/grid items become out-of-flow, for example by changing position to absolute. LayoutTests: * fullscreen/video-inside-flex-item-expected.txt: Added. * fullscreen/video-inside-flex-item.html: Added. Canonical link: https://commits.webkit.org/226295@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@263389 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2020-06-23 07:27:29 +00:00
}
</script>