Skip to content

GitLab

T
tangled
Commit d6121ea3 authored by Emil A Eklund's avatar Emil A Eklund Committed by Commit Bot
Browse files
Options

[LayoutNG] Fix ink overflow for webkit-mask-image 

Fix assumption in NGPaintFragment::InkOverflow where it would return the
self ink overflow, rather than the content overflow, if there is a mask.
This is incorrect for line boxes as those only have content ink overflow
causing foreground painting to be skipped, due to the culled rect logic.

Bug: 967567
Test: web_tests/fast/css/webkit-mask-image-painting.html
Change-Id: I5f52d6752fbeae1b25a0397dc4bcff5d8a8de281
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1633314
Commit-Queue: Emil A Eklund <eae@chromium.org>
Reviewed-by: default avatarAleks Totic <atotic@chromium.org>
Cr-Commit-Position: refs/heads/master@{#664472}
parent 57492abc
Hide whitespace changes
Inline Side-by-side
Showing with 56 additions and 3 deletions
third_party/blink/renderer/core/paint/ng/ng_paint_fragment.cc
View file @ d6121ea3
...@@ -583,9 +583,7 @@ PhysicalRect NGPaintFragment::InkOverflow() const { ...@@ -583,9 +583,7 @@ PhysicalRect NGPaintFragment::InkOverflow() const {
if (!ink_overflow_) if (!ink_overflow_)
return fragment.LocalRect(); return fragment.LocalRect();
// |Style()| is one of the most expensive operations in this function. Do this if (HasOverflowClip())
// after other checks.
if (HasOverflowClip() || fragment.Style().HasMask())
return ink_overflow_->self_ink_overflow; return ink_overflow_->self_ink_overflow;
PhysicalRect rect = ink_overflow_->self_ink_overflow; PhysicalRect rect = ink_overflow_->self_ink_overflow;
......
third_party/blink/web_tests/fast/css/webkit-mask-image-painting-expected.html 0 → 100644
View file @ d6121ea3
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: skyblue;
width: 100px;
}
div > span {
display: block;
}
div > span > b {
display: inline-block;
background: black;
width: 10px;
height: 10px;
margin: 1px;
}
</style>
</head>
<body>
<div><span><b></b><b></b></span></div>
<p>
The blue box above should contain two black boxes.
</p>
</body>
</html>
third_party/blink/web_tests/fast/css/webkit-mask-image-painting.html 0 → 100644
View file @ d6121ea3
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: skyblue;
width: 100px;
}
div span {
display: block;
-webkit-mask-box-image: -webkit-linear-gradient(left,black 48px,transparent 60px);
}
div > span > b {
display: inline-block;
background: black;
width: 10px;
height: 10px;
margin: 1px;
}
</style>
</head>
<body>
<div><span><b></b><b></b></span></div>
<p>
The blue box above should contain two black boxes.
</p>
</body>
</html>
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