Jason Leo
4ef8f3f0ca
Automatic update from web-platform-tests Implement background-clip: border-area behind a flag Implement the border-area value for background-clip from CSS Backgrounds Level 4 [1], gated behind the experimental CSSBackgroundClipBorderArea runtime flag. The border-area value clips a background to the area painted by the border strokes, taking border-width and border-style into account but ignoring any transparency introduced by border-color. This enables effects like gradient borders without border-image. Parsing changes: - Add "border-area" CSS keyword and EFillBox::kBorderArea enum value with bidirectional CSSValueID mappings. - Accept border-area in ConsumeBackgroundClip() when the flag is enabled, controlled by an AllowBorderAreaValue enum. Reject it for -webkit-background-clip (and other prefixed properties) via UseAliasParsing(). - Support the full [ border-area || text ] combined syntax via a new EFillBox::kBorderAreaText value and space-separated CSSValueList parsing. Canonical serialization: "border-area text". - In the background shorthand, default background-origin to border-box when border-area is the clip (alone or combined with text) and origin is not explicitly specified, per spec [2][3]. Rendering changes: - Use a path-based clip (outer minus inner border contour) for area-filling border styles (solid, inset, outset, groove, ridge). Uses BorderEdge (which applies EffectiveStyle) for consistency with how borders are actually painted. - For non-area-filling styles (dashed, dotted, double), use a mask-based approach via BoxBorderPainter::PaintBorderArea(), which paints border strokes in opaque black as a DstIn mask. - For the combined [ border-area text ] case, the DstIn mask is the union of border-area strokes and text shapes, both painted as opaque regions in the same mask layer. - Handle kBorderArea and kBorderAreaText in all EFillBox switch statements across background geometry, SVG mask painting, and layout code. For SVG, border-area maps to the stroke-box reference area. - Add IsSpecialClipFillBox() helper for the repeated kText/kBorderArea/kBorderAreaText checks in layout code. - Exclude kBorderArea/kBorderAreaText from the bottom-layer fast path, opaque rect computation, and composited fixed-attachment backgrounds. - Widen the clip_ and origin_ bitfields in FillLayer from 3 to 4 bits to accommodate the new EFillBox values without overflow. Also adds WPT tests for parsing, computed values, shorthand serialization, and reftests for border-area (standalone and combined with text), corner-shape, and border-shape. Adds Chromium pixel tests for dashed, dotted, double, and mixed border styles. [1]: https://drafts.csswg.org/css-backgrounds-4/#typedef-bg-clip [2]: https://drafts.csswg.org/css-backgrounds-4/#propdef-background [3]: https://github.com/w3c/csswg-drafts/issues/11167#issuecomment-2474360495 Bug: 329302543, 387626415, 496306817 Change-Id: I2a8f4eeb51b1b36b3a3a532ceaf0b68f740fa7d5 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7678270 Reviewed-by: Fredrik Söderquist <fs@opera.com> Commit-Queue: Jason Leo <cgqaq@chromium.org> Cr-Commit-Position: refs/heads/main@{#1607101} -- wpt-commits: c73a0113969e29f121cca0f3cdf9fb6d714790cf wpt-pr: 58858
28 lines
1.1 KiB
HTML
28 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>CSS Backgrounds and Borders Module Level 3: parsing background-clip with valid values</title>
|
|
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
|
<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-clip">
|
|
<meta name="assert" content="background-clip supports the full grammar '<box>#'.">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/css/support/parsing-testcommon.js"></script>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
test_valid_value("background-clip", "border-box");
|
|
test_valid_value("background-clip", "padding-box");
|
|
test_valid_value("background-clip", "content-box");
|
|
test_valid_value("background-clip", "border-area");
|
|
test_valid_value("background-clip", "text");
|
|
test_valid_value("background-clip", "border-area text");
|
|
test_valid_value("background-clip", "text border-area", "border-area text");
|
|
|
|
test_valid_value("background-clip", "border-box, padding-box, content-box, border-area");
|
|
test_valid_value("background-clip", "border-area text, content-box");
|
|
</script>
|
|
</body>
|
|
</html>
|