Commit 346efa24 authored by Chris Harrelson's avatar Chris Harrelson Committed by Commit Bot

[Regression] Don't squash into content underneath a video tag.

This works around a hard to fix bug in pre-BGPT Blink compositing
code that involves mismatches between clips in the property trees
and clips in the graphics layers.

After BGPT launches, this patch can be reverted, and videos
changed to report ShouldClipOverflow() as true on their LayoutBox.

Bug: 900602

Change-Id: I76f5d18f2ecd9a10120d96c4a7898b641b5f557a
Reviewed-on: https://chromium-review.googlesource.com/c/1337289
Commit-Queue: Chris Harrelson <chrishtr@chromium.org>
Reviewed-by: default avatarPhilip Rogers <pdr@chromium.org>
Cr-Commit-Position: refs/heads/master@{#608505}
parent 4b743a69
......@@ -840,3 +840,4 @@ Bug(none) compositing/overflow/grandchild-with-border-radius-ancestor.html [ Fai
Bug(none) compositing/overflow/siblings-with-border-radius-ancestor.html [ Failure ]
Bug(none) compositing/overflow/grandchild-composited-with-border-radius-ancestor.html [ Failure ]
Bug(none) paint/invalidation/float-offscreen.html [ Failure ]
Bug(none) compositing/video/video-controls-squashing.html [ Failure ]
<!doctype HTML>
<style>
.container {
border-radius: 8px;
overflow: hidden;
}
video {
display: block;
width: 200px;
height: 200px;
background: lightblue;
}
.bluebutton {
position: relative;
top: -20px;
height: 100px;
width: 100px;
background: blue;
}
</style>
Should show a video with a blue square on it that is not clipped to the video.
<div class="container">
<video src="../../media/content/test.webm"></video>
<div class="bluebutton"></div>
</div>
......@@ -23,17 +23,19 @@
"bounds": [320, 240],
"drawsContent": false
},
{
"name": "Squashing Containment Layer",
"drawsContent": false
},
{
"name": "LayoutFlexibleBox (relative positioned) DIV class='sizing-small test-mode phase-ready state-stopped'",
"position": [8, 8],
"bounds": [320, 240]
},
{
"name": "Squashing Layer (first squashed layer: LayoutBlockFlow (positioned) DIV)",
"name": "LayoutBlockFlow (positioned) DIV",
"position": [8, 8],
"bounds": [320, 240],
"drawsContent": false
},
{
"name": "LayoutFlexibleBox DIV",
"position": [8, 8],
"bounds": [320, 240]
}
......
......@@ -465,19 +465,16 @@
"bounds": [150, 60],
"drawsContent": false
},
{
"name": "Squashing Containment Layer",
"drawsContent": false
},
{
"name": "LayoutFlexibleBox (relative positioned) DIV class='sizing-small phase-ready state-stopped'",
"position": [15, 859],
"bounds": [150, 60]
},
{
"name": "Squashing Layer (first squashed layer: LayoutBlockFlow (positioned) DIV)",
"name": "LayoutBlockFlow (positioned) DIV",
"position": [15, 859],
"bounds": [150, 60]
"bounds": [150, 60],
"drawsContent": false
}
]
}
......
A <video> should not have a layer until playback begins.
This test can not be run manually, it requires testRunner.layerTreeAsText.
Case: No src, no poster
{
"layers": [
{
"name": "LayoutView #document",
"bounds": [800, 600],
"drawsContent": false,
"backgroundColor": "#FFFFFF"
},
{
"name": "Scrolling Layer",
"bounds": [800, 600],
"drawsContent": false
},
{
"name": "Scrolling Contents Layer",
"bounds": [800, 600],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
}
]
}
Case: Displaying poster
{
"layers": [
{
"name": "LayoutView #document",
"bounds": [800, 600],
"drawsContent": false,
"backgroundColor": "#FFFFFF"
},
{
"name": "Scrolling Layer",
"bounds": [785, 600],
"drawsContent": false
},
{
"name": "Scrolling Contents Layer",
"bounds": [785, 752],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
}
]
}
Case: Displaying movie
{
"layers": [
{
"name": "LayoutView #document",
"bounds": [800, 600],
"drawsContent": false,
"backgroundColor": "#FFFFFF"
},
{
"name": "Scrolling Layer",
"bounds": [785, 600],
"drawsContent": false
},
{
"name": "Scrolling Contents Layer",
"bounds": [785, 1112],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
},
{
"name": "LayoutVideo VIDEO",
"position": [8, 8],
"bounds": [352, 288],
"drawsContent": false
},
{
"name": "LayoutFlexibleBox (relative positioned) DIV class='sizing-small phase-ready state-stopped'",
"position": [8, 8],
"bounds": [352, 288]
},
{
"name": "LayoutBlockFlow (positioned) DIV",
"position": [8, 8],
"bounds": [352, 288],
"drawsContent": false
}
]
}
A <video> should not have a layer until playback begins.
This test can not be run manually, it requires testRunner.layerTreeAsText.
Case: No src, no poster
{
"layers": [
{
"name": "LayoutView #document",
"bounds": [200, 150],
"drawsContent": false,
"backgroundColor": "#FFFFFF"
},
{
"name": "Scrolling Layer",
"bounds": [185, 135],
"drawsContent": false
},
{
"name": "Scrolling Contents Layer",
"bounds": [308, 326],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
}
]
}
Case: Displaying poster
{
"layers": [
{
"name": "LayoutView #document",
"bounds": [200, 150],
"drawsContent": false,
"backgroundColor": "#FFFFFF"
},
{
"name": "Scrolling Layer",
"bounds": [185, 135],
"drawsContent": false
},
{
"name": "Scrolling Contents Layer",
"bounds": [360, 824],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
}
]
}
Case: Displaying movie
{
"layers": [
{
"name": "LayoutView #document",
"bounds": [200, 150],
"drawsContent": false,
"backgroundColor": "#FFFFFF"
},
{
"name": "Scrolling Layer",
"bounds": [185, 135],
"drawsContent": false
},
{
"name": "Scrolling Contents Layer",
"bounds": [360, 1184],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
},
{
"name": "LayoutVideo VIDEO",
"position": [8, 8],
"bounds": [352, 288],
"drawsContent": false
},
{
"name": "LayoutFlexibleBox (relative positioned) DIV class='sizing-small phase-ready state-stopped'",
"position": [8, 8],
"bounds": [352, 288]
},
{
"name": "LayoutBlockFlow (positioned) DIV",
"position": [8, 8],
"bounds": [352, 288],
"drawsContent": false
}
]
}
A <video> should not have a layer until playback begins.
This test can not be run manually, it requires testRunner.layerTreeAsText.
Case: No src, no poster
{
"layers": [
{
"name": "LayoutView #document",
"bounds": [200, 150],
"drawsContent": false,
"backgroundColor": "#FFFFFF"
},
{
"name": "Scrolling Layer",
"bounds": [185, 135],
"drawsContent": false
},
{
"name": "Scrolling Contents Layer",
"bounds": [308, 326],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
}
]
}
Case: Displaying poster
{
"layers": [
{
"name": "LayoutView #document",
"bounds": [200, 150],
"drawsContent": false,
"backgroundColor": "#FFFFFF"
},
{
"name": "Scrolling Layer",
"bounds": [185, 135],
"drawsContent": false
},
{
"name": "Scrolling Contents Layer",
"bounds": [360, 824],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
}
]
}
Case: Displaying movie
{
"layers": [
{
"name": "LayoutView #document",
"bounds": [200, 150],
"drawsContent": false,
"backgroundColor": "#FFFFFF"
},
{
"name": "Scrolling Layer",
"bounds": [185, 135],
"drawsContent": false
},
{
"name": "Scrolling Contents Layer",
"bounds": [360, 1184],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF"
},
{
"name": "LayoutVideo VIDEO",
"position": [8, 8],
"bounds": [352, 288],
"drawsContent": false
},
{
"name": "LayoutFlexibleBox (relative positioned) DIV class='sizing-small phase-ready state-stopped'",
"position": [8, 8],
"bounds": [352, 288]
},
{
"name": "LayoutBlockFlow (positioned) DIV",
"position": [8, 8],
"bounds": [352, 288],
"drawsContent": false
}
]
}
......@@ -75,19 +75,16 @@ Case: Displaying movie
"bounds": [352, 288],
"drawsContent": false
},
{
"name": "Squashing Containment Layer",
"drawsContent": false
},
{
"name": "LayoutFlexibleBox (relative positioned) DIV class='sizing-small phase-ready state-stopped'",
"position": [8, 8],
"bounds": [352, 288]
},
{
"name": "Squashing Layer (first squashed layer: LayoutBlockFlow (positioned) DIV)",
"name": "LayoutBlockFlow (positioned) DIV",
"position": [8, 8],
"bounds": [352, 288]
"bounds": [352, 288],
"drawsContent": false
}
]
}
......
......@@ -465,19 +465,16 @@
"bounds": [150, 60],
"drawsContent": false
},
{
"name": "Squashing Containment Layer",
"drawsContent": false
},
{
"name": "LayoutFlexibleBox (relative positioned) DIV class='sizing-small phase-ready state-stopped'",
"position": [15, 854],
"bounds": [150, 60]
},
{
"name": "Squashing Layer (first squashed layer: LayoutBlockFlow (positioned) DIV)",
"name": "LayoutBlockFlow (positioned) DIV",
"position": [15, 854],
"bounds": [150, 60]
"bounds": [150, 60],
"drawsContent": false
}
]
}
......
......@@ -75,19 +75,16 @@ Case: Displaying movie
"bounds": [352, 288],
"drawsContent": false
},
{
"name": "Squashing Containment Layer",
"drawsContent": false
},
{
"name": "LayoutFlexibleBox (relative positioned) DIV class='sizing-small phase-ready state-stopped'",
"position": [8, 8],
"bounds": [352, 288]
},
{
"name": "Squashing Layer (first squashed layer: LayoutBlockFlow (positioned) DIV)",
"name": "LayoutBlockFlow (positioned) DIV",
"position": [8, 8],
"bounds": [352, 288]
"bounds": [352, 288],
"drawsContent": false
}
]
}
......
......@@ -465,19 +465,16 @@
"bounds": [150, 60],
"drawsContent": false
},
{
"name": "Squashing Containment Layer",
"drawsContent": false
},
{
"name": "LayoutFlexibleBox (relative positioned) DIV class='sizing-small phase-ready state-stopped'",
"position": [15, 859],
"bounds": [150, 60]
},
{
"name": "Squashing Layer (first squashed layer: LayoutBlockFlow (positioned) DIV)",
"name": "LayoutBlockFlow (positioned) DIV",
"position": [15, 859],
"bounds": [150, 60]
"bounds": [150, 60],
"drawsContent": false
}
]
}
......
......@@ -238,6 +238,9 @@ void CompositingInputsUpdater::UpdateRecursive(PaintLayer* layer,
layer->DirectCompositingReasons());
}
if (layer->GetLayoutObject().IsVideo())
info.is_under_video = true;
bool should_recurse =
layer->ChildNeedsCompositingInputsUpdate() || update_type == kForceUpdate;
......@@ -360,6 +363,8 @@ void CompositingInputsUpdater::UpdateAncestorDependentCompositingInputs(
if (info.needs_reparent_scroll && layout_object.StyleRef().IsStacked())
properties.scroll_parent = info.scrolling_ancestor;
properties.is_under_video = info.is_under_video;
layer->UpdateAncestorDependentCompositingInputs(properties);
}
......
......@@ -61,6 +61,8 @@ class CompositingInputsUpdater {
bool needs_reparent_scroll = false;
bool needs_reparent_scroll_for_absolute = false;
bool needs_reparent_scroll_for_fixed = false;
bool is_under_video = false;
};
void UpdateRecursive(PaintLayer*, UpdateType, AncestorInfo);
......
......@@ -135,15 +135,10 @@ CompositingLayerAssigner::GetReasonsPreventingSquashing(
const PaintLayer& squashing_layer =
squashing_state.most_recent_mapping->OwningLayer();
// FIXME: this special case for video exists only to deal with corner cases
// where a LayoutVideo does not report that it needs to be directly
// composited. Video does not currently support sharing a backing, but this
// could be generalized in the future. The following layout tests fail if we
// permit the video to share a backing with other layers.
//
// compositing/video/video-controls-layer-creation.html
if (layer->GetLayoutObject().IsVideo() ||
squashing_layer.GetLayoutObject().IsVideo())
// Don't squash into or out of any thing underneath a video, including the
// user-agent shadow DOM for controls. This is is to work around a
// bug involving overflow clip of videos. See crbug.com/900602.
if (layer->IsUnderVideo() || squashing_layer.IsUnderVideo())
return SquashingDisallowedReason::kSquashingVideoIsDisallowed;
// Don't squash iframes, frames or plugins.
......
......@@ -754,6 +754,8 @@ class CORE_EXPORT PaintLayer : public DisplayItemClient {
IntRect unclipped_absolute_bounding_box;
const LayoutBoxModelObject* clipping_container = nullptr;
bool is_under_video = false;
};
void SetNeedsCompositingInputsUpdate();
......@@ -822,6 +824,9 @@ class CORE_EXPORT PaintLayer : public DisplayItemClient {
const PaintLayer* MaskAncestor() const {
return GetAncestorDependentCompositingInputs().mask_ancestor;
}
bool IsUnderVideo() const {
return GetAncestorDependentCompositingInputs().is_under_video;
}
bool HasDescendantWithClipPath() const {
DCHECK(!needs_descendant_dependent_flags_update_);
return has_descendant_with_clip_path_;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment