text-decoration-inset sampler
Overview
What this sampler covers
This page includes both tracks: base property support from #468928416 and percentage behavior from #498974811.
The first two sections are single-line samples for quick checks. The final
matrix mirrors the harder WPT cases (fragment edges, RTL, and sideways
writing modes) with slice and clone behavior.
Feature state on this browser
Checking...Running feature detection.
Checks used: CSS.supports('text-decoration-inset', ...) and
computed style probe (getPropertyValue('text-decoration-inset')).
If this says OFF, enable via chrome://flags/#enable-experimental-web-platform-features
or command line --enable-blink-features=CSSTextDecorationInset.
With text-decoration-inset: 5ch -5ch
the quick brown fox
Without text-decoration-inset
the quick brown fox
Sanity check: when the feature is ON, these two lines should be visibly different. When OFF, they look almost the same.
Issue 468928416 core samples
10px -10px
the quick brown fox
-0.5em
the quick brown fox
auto
the quick brown fox
Issue 498974811 percentage samples
10%
the quick brown fox
10% 20%
the quick brown fox
calc(10% + 1px) calc(20% - 1px)
the quick brown fox
Fragmentation and writing-mode matrix
slice + LTR + horizontal
foo a b c bar
slice + RTL + horizontal
foo a b c bar
slice + LTR + sideways-rl
foo a b c bar
slice + RTL + sideways-rl
foo a b c bar
clone + LTR + sideways-lr
foo a b c bar
clone + RTL + sideways-lr
foo a b c bar
clone + LTR + horizontal
foo a b c bar
clone + RTL + horizontal
foo a b c bar
Debug commands used in Chromium
third_party/blink/tools/run_web_tests.py -t Default --no-show-results \
external/wpt/css/css-text-decor/text-decoration-inset-{001..024}.html
third_party/blink/tools/run_web_tests.py -t Default --no-show-results \
external/wpt/css/css-text-decor/parsing/text-decoration-inset-{valid,invalid,computed}.html
cd /home/chrome/my-host/static-files/i-468928416
DISPLAY=:21 python3 capture_screenshots.py
# capture_screenshots.py forces: --enable-blink-features=CSSTextDecorationInsetExpected behavior checklist
- Inset applies from logical start/end, including RTL cases.
- Sideways-lr does not mirror start/end incorrectly.
- Large negative end inset can extend underline past text without clipping.
- clone vs slice changes per-line edge behavior as expected.