Skip to content

GitLab

T
tangled
Commit cf181e26 authored by Xianzhu Wang's avatar Xianzhu Wang Committed by Commit Bot
Browse files
Options

Reland "[PE] Support float, block, table descendants for background-clip:text" 

This is a reland of 91779560

The original change was reverted in
https://chromium-review.googlesource.com/c/chromium/src/+/1212483
because of crbug.com/881644. This reland CL fixes the bug by ignoring
objects other than LayoutInline and LayoutBlock when painting text
clip mask.

Original change's description:
> [PE] Support float, block, table descendants for background-clip:text
>
> In https://chromium-review.googlesource.com/c/chromium/src/+/1197462
> we changed box_model_.Paint() to LineBoxListPainter so we no longer
> supported text clip for descendants other than inline contents.
>
> This CL calls ToLayoutBlock(box_model_).PaintObject() to support text
> clip of other descendants, and still avoid the original double paint
> offset issue of box_model_.Paint().
>
> Bug: 880825
> Cq-Include-Trybots: luci.chromium.try:linux_layout_tests_slimming_paint_v2;master.tryserver.blink:linux_trusty_blink_rel
> Change-Id: I2c4b0e23df11bf300c01f9c804fb7e7d129f3aa0
> Reviewed-on: https://chromium-review.googlesource.com/1211244
> Reviewed-by: Philip Rogers <pdr@chromium.org>
> Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org>
> Cr-Commit-Position: refs/heads/master@{#589314}

Bug: 880825
Change-Id: I0d51678f07422743c952e20a880b257a830157c4
Cq-Include-Trybots: luci.chromium.try:linux_layout_tests_slimming_paint_v2;master.tryserver.blink:linux_trusty_blink_rel
Reviewed-on: https://chromium-review.googlesource.com/1213371Reviewed-by: default avatarPhilip Rogers <pdr@chromium.org>
Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#589584}
parent 29792853
Hide whitespace changes
Inline Side-by-side
Showing with 63 additions and 11 deletions
third_party/WebKit/LayoutTests/paint/background/background-clip-text-descendants-expected.html 0 → 100644
View file @ cf181e26
<!DOCTYPE html>
<style>
body {
font-size: 40px;
}
.transformed {
transform: translateX(0);
}
.clip-text {
background: blue;
-webkit-background-clip: text;
color: rgba(255,0,0,0.5);
clear: both;
}
</style>
Passes if all texts are purple.
<div class="clip-text">Block</div>
<div class="clip-text">Block transformed</div>
<div><div class="clip-text" style="float:left">Float</div><br></div>
<div><div class="clip-text" style="float:left">Float transformed</div><br></div>
<table><tr><td class="clip-text">Table</td></tr></table>
<table><tr><td class="clip-text">Table transformed</td></tr></table>
Except these (inline-block is not supported for text background clip yet):
<div style="color: rgba(255,0,0,0.5"><div style="display: inline-block">Inline block</div></div>
<div style="color: rgba(255,0,0,0.5"><div style="display: inline-block">Inline block transformed</div></div>
third_party/WebKit/LayoutTests/paint/background/background-clip-text-descendants.html 0 → 100644
View file @ cf181e26
<!DOCTYPE html>
<style>
body {
font-size: 40px;
}
.transformed {
transform: translateX(0);
}
.clip-text {
background: blue;
-webkit-background-clip: text;
color: rgba(255,0,0,0.5);
}
</style>
Passes if all texts are purple.
<div class="clip-text"><div>Block</div></div>
<div class="clip-text transformed"><div>Block transformed</div></div>
<div class="clip-text"><div style="float:left">Float</div><br></div>
<div class="clip-text transformed"><div style="float:left">Float transformed</div><br></div>
<table class="clip-text"><tr><td>Table</td></tr></table>
<table class="clip-text transformed"><tr><td>Table transformed</td></tr></table>
Except these (inline-block is not supported for text background clip yet):
<div class="clip-text"><div style="display: inline-block">Inline block</div></div>
<div class="clip-text transformed"><div style="display: inline-block">Inline block transformed</div></div>
third_party/WebKit/LayoutTests/paint/background/background-clip-text-img-crash.html 0 → 100644
View file @ cf181e26
<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<img style="width: 100px; height: 100px; background: blue; -webkit-background-clip: text">
<script>
test(function() {});
</script>
third_party/blink/renderer/core/paint/box_model_object_painter.cc
View file @ cf181e26
...@@ -4,12 +4,10 @@ ...@@ -4,12 +4,10 @@
#include "third_party/blink/renderer/core/paint/box_model_object_painter.h" #include "third_party/blink/renderer/core/paint/box_model_object_painter.h"
#include "third_party/blink/renderer/core/layout/layout_block_flow.h" #include "third_party/blink/renderer/core/layout/layout_block.h"
#include "third_party/blink/renderer/core/layout/layout_box_model_object.h" #include "third_party/blink/renderer/core/layout/layout_box_model_object.h"
#include "third_party/blink/renderer/core/layout/layout_inline.h"
#include "third_party/blink/renderer/core/layout/line/root_inline_box.h" #include "third_party/blink/renderer/core/layout/line/root_inline_box.h"
#include "third_party/blink/renderer/core/paint/background_image_geometry.h" #include "third_party/blink/renderer/core/paint/background_image_geometry.h"
#include "third_party/blink/renderer/core/paint/line_box_list_painter.h"
#include "third_party/blink/renderer/core/paint/object_painter.h" #include "third_party/blink/renderer/core/paint/object_painter.h"
#include "third_party/blink/renderer/core/paint/paint_info.h" #include "third_party/blink/renderer/core/paint/paint_info.h"
#include "third_party/blink/renderer/core/paint/paint_layer.h" #include "third_party/blink/renderer/core/paint/paint_layer.h"
...@@ -84,15 +82,13 @@ void BoxModelObjectPainter::PaintTextClipMask(GraphicsContext& context, ...@@ -84,15 +82,13 @@ void BoxModelObjectPainter::PaintTextClipMask(GraphicsContext& context,
const RootInlineBox& root = flow_box_->Root(); const RootInlineBox& root = flow_box_->Root();
flow_box_->Paint(paint_info, paint_offset - local_offset, root.LineTop(), flow_box_->Paint(paint_info, paint_offset - local_offset, root.LineTop(),
root.LineBottom()); root.LineBottom());
} else if (box_model_.IsLayoutBlock()) {
ToLayoutBlock(box_model_).PaintObject(paint_info, paint_offset);
} else { } else {
const LineBoxList* line_boxes = nullptr; // We should go through the above path for LayoutInlines.
if (box_model_.IsLayoutBlockFlow()) DCHECK(!box_model_.IsLayoutInline());
line_boxes = &ToLayoutBlockFlow(box_model_).LineBoxes(); // Other types of objects don't have anything meaningful to paint for text
else if (box_model_.IsLayoutInline()) // clip mask.
line_boxes = ToLayoutInline(box_model_).LineBoxes();
if (!line_boxes)
return;
LineBoxListPainter(*line_boxes).Paint(box_model_, paint_info, paint_offset);
} }
} }
......
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