Skip to content

GitLab

T
tangled
Commit d2294de0 authored by Philip Rogers's avatar Philip Rogers Committed by Commit Bot
Browse files
Options

Do not create a stacking context for CSS clip 

This patch extracts out the stacking context grouping properties from
ComputedStyle::HasGroupingProperty, and uses this for the stacking
context decision. This has the effect of not creating a stacking context
for clip which, unlike clip-path, does not create a stacking context:
  https://drafts.fxtf.org/css-masking-1/#propdef-clip

Bug: 1115003
Change-Id: I4bd5d3c61a2bb34a56a089cbeaca260fc9bf2eb4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2358473
Commit-Queue: Philip Rogers <pdr@chromium.org>
Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org>
Auto-Submit: Philip Rogers <pdr@chromium.org>
Reviewed-by: default avatarXianzhu Wang <wangxianzhu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#798712}
parent 8381dcb4
Hide whitespace changes
Inline Side-by-side
Showing with 54 additions and 5 deletions
third_party/blink/renderer/core/style/computed_style.cc
View file @ d2294de0
......@@ -1073,8 +1073,8 @@ void ComputedStyle::UpdateIsStackingContextWithoutContainment(
if (is_document_element || is_in_top_layer || is_svg_stacking ||
StyleType() == kPseudoIdBackdrop || HasTransformRelatedProperty() ||
HasGroupingProperty(BoxReflect()) || HasViewportConstrainedPosition() ||
GetPosition() == EPosition::kSticky ||
HasStackingGroupingProperty(BoxReflect()) ||
HasViewportConstrainedPosition() || GetPosition() == EPosition::kSticky ||
HasPropertyThatCreatesStackingContext(WillChangeProperties()) ||
/* TODO(882625): This becomes unnecessary when will-change correctly takes
into account active animations. */
......
third_party/blink/renderer/core/style/computed_style.h
View file @ d2294de0
......@@ -2304,15 +2304,24 @@ class ComputedStyle : public ComputedStyleBase,
// because box reflection styles only apply for some objects (see:
// |LayoutObject::HasReflection()|).
bool HasGroupingProperty(bool has_box_reflection) const {
// TODO(pdr): Spec requires "overflow: any value other than visible or clip"
if (HasStackingGroupingProperty(has_box_reflection))
return true;
// TODO(pdr): Also check for overflow because the spec requires "overflow:
// any value other than visible or clip."
if (!HasAutoClip() && HasOutOfFlowPosition())
return true;
return false;
}
// This is the subset of grouping properties (see: |HasGroupingProperty|) that
// also create stacking contexts.
bool HasStackingGroupingProperty(bool has_box_reflection) const {
if (HasNonInitialOpacity())
return true;
if (HasNonInitialFilter())
return true;
if (has_box_reflection)
return true;
if (!HasAutoClip() && HasOutOfFlowPosition())
return true;
if (ClipPath())
return true;
if (HasIsolation())
......
third_party/blink/web_tests/external/wpt/css/css-masking/clip/clip-no-stacking-context-ref.html 0 → 100644
View file @ d2294de0
<!DOCTYPE html>
<meta charset="utf-8">
<p>Expected: A green box with no red visible.</p>
<div style="width: 100px; height: 100px; background: green;"></div>
third_party/blink/web_tests/external/wpt/css/css-masking/clip/clip-no-stacking-context.html 0 → 100644
View file @ d2294de0
<!DOCTYPE html>
<meta charset="utf-8">
<title>Clip does not create a stacking context</title>
<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#propdef-clip">
<link rel="match" href="clip-no-stacking-context-ref.html">
<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org">
<style>
#bottom {
position: absolute;
width: 100px;
height: 100px;
background: red;
z-index: 1;
}
#clip {
position: absolute;
clip: rect(0px, 100px, 100px, 0px);
}
#top {
position: absolute;
width: 100px;
height: 100px;
background: green;
z-index: 3;
}
</style>
<p>Expected: A green box with no red visible.</p>
<div id="bottom"></div>
<!-- If #clip creates a stacking context, it will be below #bottom (which has a
higher z-index) which will force #top to be below #bottom as well. This
should not happen because #clip should not create a stacking context. -->
<div id="clip">
<div id="top"></div>
</div>
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