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 ...@@ -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/siblings-with-border-radius-ancestor.html [ Failure ]
Bug(none) compositing/overflow/grandchild-composited-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) 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 @@ ...@@ -23,17 +23,19 @@
"bounds": [320, 240], "bounds": [320, 240],
"drawsContent": false "drawsContent": false
}, },
{
"name": "Squashing Containment Layer",
"drawsContent": false
},
{ {
"name": "LayoutFlexibleBox (relative positioned) DIV class='sizing-small test-mode phase-ready state-stopped'", "name": "LayoutFlexibleBox (relative positioned) DIV class='sizing-small test-mode phase-ready state-stopped'",
"position": [8, 8], "position": [8, 8],
"bounds": [320, 240] "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], "position": [8, 8],
"bounds": [320, 240] "bounds": [320, 240]
} }
......
...@@ -465,19 +465,16 @@ ...@@ -465,19 +465,16 @@
"bounds": [150, 60], "bounds": [150, 60],
"drawsContent": false "drawsContent": false
}, },
{
"name": "Squashing Containment Layer",
"drawsContent": false
},
{ {
"name": "LayoutFlexibleBox (relative positioned) DIV class='sizing-small phase-ready state-stopped'", "name": "LayoutFlexibleBox (relative positioned) DIV class='sizing-small phase-ready state-stopped'",
"position": [15, 859], "position": [15, 859],
"bounds": [150, 60] "bounds": [150, 60]
}, },
{ {
"name": "Squashing Layer (first squashed layer: LayoutBlockFlow (positioned) DIV)", "name": "LayoutBlockFlow (positioned) DIV",
"position": [15, 859], "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 ...@@ -75,19 +75,16 @@ Case: Displaying movie
"bounds": [352, 288], "bounds": [352, 288],
"drawsContent": false "drawsContent": false
}, },
{
"name": "Squashing Containment Layer",
"drawsContent": false
},
{ {
"name": "LayoutFlexibleBox (relative positioned) DIV class='sizing-small phase-ready state-stopped'", "name": "LayoutFlexibleBox (relative positioned) DIV class='sizing-small phase-ready state-stopped'",
"position": [8, 8], "position": [8, 8],
"bounds": [352, 288] "bounds": [352, 288]
}, },
{ {
"name": "Squashing Layer (first squashed layer: LayoutBlockFlow (positioned) DIV)", "name": "LayoutBlockFlow (positioned) DIV",
"position": [8, 8], "position": [8, 8],
"bounds": [352, 288] "bounds": [352, 288],
"drawsContent": false
} }
] ]
} }
......
...@@ -465,19 +465,16 @@ ...@@ -465,19 +465,16 @@
"bounds": [150, 60], "bounds": [150, 60],
"drawsContent": false "drawsContent": false
}, },
{
"name": "Squashing Containment Layer",
"drawsContent": false
},
{ {
"name": "LayoutFlexibleBox (relative positioned) DIV class='sizing-small phase-ready state-stopped'", "name": "LayoutFlexibleBox (relative positioned) DIV class='sizing-small phase-ready state-stopped'",
"position": [15, 854], "position": [15, 854],
"bounds": [150, 60] "bounds": [150, 60]
}, },
{ {
"name": "Squashing Layer (first squashed layer: LayoutBlockFlow (positioned) DIV)", "name": "LayoutBlockFlow (positioned) DIV",
"position": [15, 854], "position": [15, 854],
"bounds": [150, 60] "bounds": [150, 60],
"drawsContent": false
} }
] ]
} }
......
...@@ -75,19 +75,16 @@ Case: Displaying movie ...@@ -75,19 +75,16 @@ Case: Displaying movie
"bounds": [352, 288], "bounds": [352, 288],
"drawsContent": false "drawsContent": false
}, },
{
"name": "Squashing Containment Layer",
"drawsContent": false
},
{ {
"name": "LayoutFlexibleBox (relative positioned) DIV class='sizing-small phase-ready state-stopped'", "name": "LayoutFlexibleBox (relative positioned) DIV class='sizing-small phase-ready state-stopped'",
"position": [8, 8], "position": [8, 8],
"bounds": [352, 288] "bounds": [352, 288]
}, },
{ {
"name": "Squashing Layer (first squashed layer: LayoutBlockFlow (positioned) DIV)", "name": "LayoutBlockFlow (positioned) DIV",
"position": [8, 8], "position": [8, 8],
"bounds": [352, 288] "bounds": [352, 288],
"drawsContent": false
} }
] ]
} }
......
...@@ -465,19 +465,16 @@ ...@@ -465,19 +465,16 @@
"bounds": [150, 60], "bounds": [150, 60],
"drawsContent": false "drawsContent": false
}, },
{
"name": "Squashing Containment Layer",
"drawsContent": false
},
{ {
"name": "LayoutFlexibleBox (relative positioned) DIV class='sizing-small phase-ready state-stopped'", "name": "LayoutFlexibleBox (relative positioned) DIV class='sizing-small phase-ready state-stopped'",
"position": [15, 859], "position": [15, 859],
"bounds": [150, 60] "bounds": [150, 60]
}, },
{ {
"name": "Squashing Layer (first squashed layer: LayoutBlockFlow (positioned) DIV)", "name": "LayoutBlockFlow (positioned) DIV",
"position": [15, 859], "position": [15, 859],
"bounds": [150, 60] "bounds": [150, 60],
"drawsContent": false
} }
] ]
} }
......
...@@ -238,6 +238,9 @@ void CompositingInputsUpdater::UpdateRecursive(PaintLayer* layer, ...@@ -238,6 +238,9 @@ void CompositingInputsUpdater::UpdateRecursive(PaintLayer* layer,
layer->DirectCompositingReasons()); layer->DirectCompositingReasons());
} }
if (layer->GetLayoutObject().IsVideo())
info.is_under_video = true;
bool should_recurse = bool should_recurse =
layer->ChildNeedsCompositingInputsUpdate() || update_type == kForceUpdate; layer->ChildNeedsCompositingInputsUpdate() || update_type == kForceUpdate;
...@@ -360,6 +363,8 @@ void CompositingInputsUpdater::UpdateAncestorDependentCompositingInputs( ...@@ -360,6 +363,8 @@ void CompositingInputsUpdater::UpdateAncestorDependentCompositingInputs(
if (info.needs_reparent_scroll && layout_object.StyleRef().IsStacked()) if (info.needs_reparent_scroll && layout_object.StyleRef().IsStacked())
properties.scroll_parent = info.scrolling_ancestor; properties.scroll_parent = info.scrolling_ancestor;
properties.is_under_video = info.is_under_video;
layer->UpdateAncestorDependentCompositingInputs(properties); layer->UpdateAncestorDependentCompositingInputs(properties);
} }
......
...@@ -61,6 +61,8 @@ class CompositingInputsUpdater { ...@@ -61,6 +61,8 @@ class CompositingInputsUpdater {
bool needs_reparent_scroll = false; bool needs_reparent_scroll = false;
bool needs_reparent_scroll_for_absolute = false; bool needs_reparent_scroll_for_absolute = false;
bool needs_reparent_scroll_for_fixed = false; bool needs_reparent_scroll_for_fixed = false;
bool is_under_video = false;
}; };
void UpdateRecursive(PaintLayer*, UpdateType, AncestorInfo); void UpdateRecursive(PaintLayer*, UpdateType, AncestorInfo);
......
...@@ -135,15 +135,10 @@ CompositingLayerAssigner::GetReasonsPreventingSquashing( ...@@ -135,15 +135,10 @@ CompositingLayerAssigner::GetReasonsPreventingSquashing(
const PaintLayer& squashing_layer = const PaintLayer& squashing_layer =
squashing_state.most_recent_mapping->OwningLayer(); squashing_state.most_recent_mapping->OwningLayer();
// FIXME: this special case for video exists only to deal with corner cases // Don't squash into or out of any thing underneath a video, including the
// where a LayoutVideo does not report that it needs to be directly // user-agent shadow DOM for controls. This is is to work around a
// composited. Video does not currently support sharing a backing, but this // bug involving overflow clip of videos. See crbug.com/900602.
// could be generalized in the future. The following layout tests fail if we if (layer->IsUnderVideo() || squashing_layer.IsUnderVideo())
// 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())
return SquashingDisallowedReason::kSquashingVideoIsDisallowed; return SquashingDisallowedReason::kSquashingVideoIsDisallowed;
// Don't squash iframes, frames or plugins. // Don't squash iframes, frames or plugins.
......
...@@ -754,6 +754,8 @@ class CORE_EXPORT PaintLayer : public DisplayItemClient { ...@@ -754,6 +754,8 @@ class CORE_EXPORT PaintLayer : public DisplayItemClient {
IntRect unclipped_absolute_bounding_box; IntRect unclipped_absolute_bounding_box;
const LayoutBoxModelObject* clipping_container = nullptr; const LayoutBoxModelObject* clipping_container = nullptr;
bool is_under_video = false;
}; };
void SetNeedsCompositingInputsUpdate(); void SetNeedsCompositingInputsUpdate();
...@@ -822,6 +824,9 @@ class CORE_EXPORT PaintLayer : public DisplayItemClient { ...@@ -822,6 +824,9 @@ class CORE_EXPORT PaintLayer : public DisplayItemClient {
const PaintLayer* MaskAncestor() const { const PaintLayer* MaskAncestor() const {
return GetAncestorDependentCompositingInputs().mask_ancestor; return GetAncestorDependentCompositingInputs().mask_ancestor;
} }
bool IsUnderVideo() const {
return GetAncestorDependentCompositingInputs().is_under_video;
}
bool HasDescendantWithClipPath() const { bool HasDescendantWithClipPath() const {
DCHECK(!needs_descendant_dependent_flags_update_); DCHECK(!needs_descendant_dependent_flags_update_);
return has_descendant_with_clip_path_; 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