LibWeb: Parse and compute text-underline-offset property

This commit is contained in:
Callum Law 2025-09-11 22:00:19 +12:00 committed by Tim Ledbetter
commit 858450922b
Notes: github-actions[bot] 2025-09-12 06:08:23 +00:00
17 changed files with 771 additions and 4 deletions

View file

@ -3318,6 +3318,19 @@
"text-transform"
]
},
"text-underline-offset": {
"animation-type": "by-computed-value",
"inherited": true,
"initial": "auto",
"valid-identifiers": [
"auto"
],
"valid-types": [
"length [-∞,∞]",
"percentage [-∞,∞]"
],
"percentages-resolve-to": "length"
},
"text-wrap": {
"inherited": true,
"initial": "wrap",

View file

@ -3153,6 +3153,8 @@ NonnullRefPtr<StyleValue const> StyleComputer::compute_value_of_property(Propert
case PropertyID::StopOpacity:
case PropertyID::StrokeOpacity:
return compute_opacity(specified_value, computation_context);
case PropertyID::TextUnderlineOffset:
return compute_text_underline_offset(specified_value, computation_context);
default:
// FIXME: We should replace this with a VERIFY_NOT_REACHED() once all properties have their own handling.
return specified_value;
@ -3208,6 +3210,24 @@ NonnullRefPtr<StyleValue const> StyleComputer::compute_opacity(NonnullRefPtr<Sty
VERIFY_NOT_REACHED();
}
NonnullRefPtr<StyleValue const> StyleComputer::compute_text_underline_offset(NonnullRefPtr<StyleValue const> const& specified_value, PropertyValueComputationContext const& computation_context)
{
// https://drafts.csswg.org/css-text-decor-4/#underline-offset
// as specified, with <length-percentage> values computed
// auto
// <percentage>
if (specified_value->to_keyword() == Keyword::Auto || specified_value->is_percentage())
return specified_value;
// <length>
// NOTE: We also support calc()'d <length-percentage>
if (specified_value->is_calculated() || specified_value->is_length())
return specified_value->absolutized(computation_context.length_resolution_context.viewport_rect, computation_context.length_resolution_context.font_metrics, computation_context.length_resolution_context.root_font_metrics);
VERIFY_NOT_REACHED();
}
void StyleComputer::compute_math_depth(ComputedProperties& style, Optional<DOM::AbstractElement> element) const
{
// https://w3c.github.io/mathml-core/#propdef-math-depth

View file

@ -205,6 +205,7 @@ public:
static NonnullRefPtr<StyleValue const> compute_value_of_property(PropertyID, NonnullRefPtr<StyleValue const> const& specified_value, Function<NonnullRefPtr<StyleValue const>(PropertyID)> const& get_property_specified_value, PropertyValueComputationContext const&);
static NonnullRefPtr<StyleValue const> compute_border_or_outline_width(NonnullRefPtr<StyleValue const> const& specified_value, NonnullRefPtr<StyleValue const> const& style_specified_value, PropertyValueComputationContext const&);
static NonnullRefPtr<StyleValue const> compute_opacity(NonnullRefPtr<StyleValue const> const& specified_value, PropertyValueComputationContext const&);
static NonnullRefPtr<StyleValue const> compute_text_underline_offset(NonnullRefPtr<StyleValue const> const& specified_value, PropertyValueComputationContext const&);
private:
virtual void visit_edges(Visitor&) override;

View file

@ -62,6 +62,7 @@ All properties associated with getComputedStyle(document.body):
"text-rendering",
"text-shadow",
"text-transform",
"text-underline-offset",
"text-wrap-mode",
"text-wrap-style",
"visibility",

View file

@ -689,6 +689,8 @@ All supported properties and their default values exposed from CSSStylePropertie
'text-shadow': 'none'
'textTransform': 'none'
'text-transform': 'none'
'textUnderlineOffset': 'auto'
'text-underline-offset': 'auto'
'textWrap': 'wrap'
'text-wrap': 'wrap'
'textWrapMode': 'wrap'

View file

@ -60,6 +60,7 @@ text-justify: auto
text-rendering: auto
text-shadow: none
text-transform: none
text-underline-offset: auto
text-wrap-mode: wrap
text-wrap-style: auto
visibility: visible
@ -92,7 +93,7 @@ background-position-x: 0%
background-position-y: 0%
background-repeat: repeat
background-size: auto
block-size: 1410px
block-size: 1425px
border-block-end-color: rgb(0, 0, 0)
border-block-end-style: none
border-block-end-width: 0px
@ -169,7 +170,7 @@ grid-row-start: auto
grid-template-areas: none
grid-template-columns: none
grid-template-rows: none
height: 2565px
height: 2580px
inline-size: 784px
inset-block-end: auto
inset-block-start: auto

View file

@ -1,8 +1,8 @@
Harness status: OK
Found 258 tests
Found 259 tests
251 Pass
252 Pass
7 Fail
Pass accent-color
Pass border-collapse
@ -64,6 +64,7 @@ Pass text-justify
Pass text-rendering
Pass text-shadow
Pass text-transform
Pass text-underline-offset
Pass text-wrap-mode
Pass text-wrap-style
Pass visibility

View file

@ -0,0 +1,326 @@
Harness status: OK
Found 320 tests
300 Pass
20 Fail
Pass CSS Transitions: property <text-underline-offset> from [15px] to [0px] at (0) should be [15px]
Pass CSS Transitions: property <text-underline-offset> from [15px] to [0px] at (0.3) should be [10.5px]
Pass CSS Transitions: property <text-underline-offset> from [15px] to [0px] at (0.6) should be [6px]
Pass CSS Transitions: property <text-underline-offset> from [15px] to [0px] at (1) should be [0px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [15px] to [0px] at (0) should be [15px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [15px] to [0px] at (0.3) should be [10.5px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [15px] to [0px] at (0.6) should be [6px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [15px] to [0px] at (1) should be [0px]
Pass CSS Animations: property <text-underline-offset> from [15px] to [0px] at (0) should be [15px]
Pass CSS Animations: property <text-underline-offset> from [15px] to [0px] at (0.3) should be [10.5px]
Pass CSS Animations: property <text-underline-offset> from [15px] to [0px] at (0.6) should be [6px]
Pass CSS Animations: property <text-underline-offset> from [15px] to [0px] at (1) should be [0px]
Pass Web Animations: property <text-underline-offset> from [15px] to [0px] at (0) should be [15px]
Pass Web Animations: property <text-underline-offset> from [15px] to [0px] at (0.3) should be [10.5px]
Pass Web Animations: property <text-underline-offset> from [15px] to [0px] at (0.6) should be [6px]
Pass Web Animations: property <text-underline-offset> from [15px] to [0px] at (1) should be [0px]
Pass CSS Transitions: property <text-underline-offset> from [16px] to [0px] at (0) should be [16px]
Pass CSS Transitions: property <text-underline-offset> from [16px] to [0px] at (0.3) should be [11.2px]
Pass CSS Transitions: property <text-underline-offset> from [16px] to [0px] at (0.6) should be [6.4px]
Pass CSS Transitions: property <text-underline-offset> from [16px] to [0px] at (1) should be [0px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [16px] to [0px] at (0) should be [16px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [16px] to [0px] at (0.3) should be [11.2px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [16px] to [0px] at (0.6) should be [6.4px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [16px] to [0px] at (1) should be [0px]
Pass CSS Animations: property <text-underline-offset> from [16px] to [0px] at (0) should be [16px]
Pass CSS Animations: property <text-underline-offset> from [16px] to [0px] at (0.3) should be [11.2px]
Pass CSS Animations: property <text-underline-offset> from [16px] to [0px] at (0.6) should be [6.4px]
Pass CSS Animations: property <text-underline-offset> from [16px] to [0px] at (1) should be [0px]
Pass Web Animations: property <text-underline-offset> from [16px] to [0px] at (0) should be [16px]
Pass Web Animations: property <text-underline-offset> from [16px] to [0px] at (0.3) should be [11.2px]
Pass Web Animations: property <text-underline-offset> from [16px] to [0px] at (0.6) should be [6.4px]
Pass Web Animations: property <text-underline-offset> from [16px] to [0px] at (1) should be [0px]
Pass CSS Transitions: property <text-underline-offset> from [16px] to [32px] at (0) should be [16px]
Pass CSS Transitions: property <text-underline-offset> from [16px] to [32px] at (0.3) should be [20.8px]
Pass CSS Transitions: property <text-underline-offset> from [16px] to [32px] at (0.6) should be [25.6px]
Pass CSS Transitions: property <text-underline-offset> from [16px] to [32px] at (1) should be [32px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [16px] to [32px] at (0) should be [16px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [16px] to [32px] at (0.3) should be [20.8px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [16px] to [32px] at (0.6) should be [25.6px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [16px] to [32px] at (1) should be [32px]
Pass CSS Animations: property <text-underline-offset> from [16px] to [32px] at (0) should be [16px]
Pass CSS Animations: property <text-underline-offset> from [16px] to [32px] at (0.3) should be [20.8px]
Pass CSS Animations: property <text-underline-offset> from [16px] to [32px] at (0.6) should be [25.6px]
Pass CSS Animations: property <text-underline-offset> from [16px] to [32px] at (1) should be [32px]
Pass Web Animations: property <text-underline-offset> from [16px] to [32px] at (0) should be [16px]
Pass Web Animations: property <text-underline-offset> from [16px] to [32px] at (0.3) should be [20.8px]
Pass Web Animations: property <text-underline-offset> from [16px] to [32px] at (0.6) should be [25.6px]
Pass Web Animations: property <text-underline-offset> from [16px] to [32px] at (1) should be [32px]
Pass CSS Transitions: property <text-underline-offset> from [1em] to [0em] at (0) should be [16px]
Pass CSS Transitions: property <text-underline-offset> from [1em] to [0em] at (0.3) should be [11.2px]
Pass CSS Transitions: property <text-underline-offset> from [1em] to [0em] at (0.6) should be [6.4px]
Pass CSS Transitions: property <text-underline-offset> from [1em] to [0em] at (1) should be [0px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [1em] to [0em] at (0) should be [16px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [1em] to [0em] at (0.3) should be [11.2px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [1em] to [0em] at (0.6) should be [6.4px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [1em] to [0em] at (1) should be [0px]
Pass CSS Animations: property <text-underline-offset> from [1em] to [0em] at (0) should be [16px]
Pass CSS Animations: property <text-underline-offset> from [1em] to [0em] at (0.3) should be [11.2px]
Pass CSS Animations: property <text-underline-offset> from [1em] to [0em] at (0.6) should be [6.4px]
Pass CSS Animations: property <text-underline-offset> from [1em] to [0em] at (1) should be [0px]
Pass Web Animations: property <text-underline-offset> from [1em] to [0em] at (0) should be [16px]
Pass Web Animations: property <text-underline-offset> from [1em] to [0em] at (0.3) should be [11.2px]
Pass Web Animations: property <text-underline-offset> from [1em] to [0em] at (0.6) should be [6.4px]
Pass Web Animations: property <text-underline-offset> from [1em] to [0em] at (1) should be [0px]
Pass CSS Transitions: property <text-underline-offset> from [1em] to [2em] at (0) should be [16px]
Pass CSS Transitions: property <text-underline-offset> from [1em] to [2em] at (0.3) should be [20.8px]
Pass CSS Transitions: property <text-underline-offset> from [1em] to [2em] at (0.6) should be [25.6px]
Pass CSS Transitions: property <text-underline-offset> from [1em] to [2em] at (1) should be [32px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [1em] to [2em] at (0) should be [16px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [1em] to [2em] at (0.3) should be [20.8px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [1em] to [2em] at (0.6) should be [25.6px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [1em] to [2em] at (1) should be [32px]
Pass CSS Animations: property <text-underline-offset> from [1em] to [2em] at (0) should be [16px]
Pass CSS Animations: property <text-underline-offset> from [1em] to [2em] at (0.3) should be [20.8px]
Pass CSS Animations: property <text-underline-offset> from [1em] to [2em] at (0.6) should be [25.6px]
Pass CSS Animations: property <text-underline-offset> from [1em] to [2em] at (1) should be [32px]
Pass Web Animations: property <text-underline-offset> from [1em] to [2em] at (0) should be [16px]
Pass Web Animations: property <text-underline-offset> from [1em] to [2em] at (0.3) should be [20.8px]
Pass Web Animations: property <text-underline-offset> from [1em] to [2em] at (0.6) should be [25.6px]
Pass Web Animations: property <text-underline-offset> from [1em] to [2em] at (1) should be [32px]
Pass CSS Transitions: property <text-underline-offset> from [100%] to [0%] at (0) should be [100%]
Pass CSS Transitions: property <text-underline-offset> from [100%] to [0%] at (0.3) should be [70%]
Pass CSS Transitions: property <text-underline-offset> from [100%] to [0%] at (0.6) should be [40%]
Pass CSS Transitions: property <text-underline-offset> from [100%] to [0%] at (1) should be [0%]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [100%] to [0%] at (0) should be [100%]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [100%] to [0%] at (0.3) should be [70%]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [100%] to [0%] at (0.6) should be [40%]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [100%] to [0%] at (1) should be [0%]
Pass CSS Animations: property <text-underline-offset> from [100%] to [0%] at (0) should be [100%]
Pass CSS Animations: property <text-underline-offset> from [100%] to [0%] at (0.3) should be [70%]
Pass CSS Animations: property <text-underline-offset> from [100%] to [0%] at (0.6) should be [40%]
Pass CSS Animations: property <text-underline-offset> from [100%] to [0%] at (1) should be [0%]
Pass Web Animations: property <text-underline-offset> from [100%] to [0%] at (0) should be [100%]
Pass Web Animations: property <text-underline-offset> from [100%] to [0%] at (0.3) should be [70%]
Pass Web Animations: property <text-underline-offset> from [100%] to [0%] at (0.6) should be [40%]
Pass Web Animations: property <text-underline-offset> from [100%] to [0%] at (1) should be [0%]
Pass CSS Transitions: property <text-underline-offset> from [100%] to [200%] at (0) should be [100%]
Pass CSS Transitions: property <text-underline-offset> from [100%] to [200%] at (0.3) should be [130%]
Pass CSS Transitions: property <text-underline-offset> from [100%] to [200%] at (0.6) should be [160%]
Pass CSS Transitions: property <text-underline-offset> from [100%] to [200%] at (1) should be [200%]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [100%] to [200%] at (0) should be [100%]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [100%] to [200%] at (0.3) should be [130%]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [100%] to [200%] at (0.6) should be [160%]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [100%] to [200%] at (1) should be [200%]
Pass CSS Animations: property <text-underline-offset> from [100%] to [200%] at (0) should be [100%]
Pass CSS Animations: property <text-underline-offset> from [100%] to [200%] at (0.3) should be [130%]
Pass CSS Animations: property <text-underline-offset> from [100%] to [200%] at (0.6) should be [160%]
Pass CSS Animations: property <text-underline-offset> from [100%] to [200%] at (1) should be [200%]
Pass Web Animations: property <text-underline-offset> from [100%] to [200%] at (0) should be [100%]
Pass Web Animations: property <text-underline-offset> from [100%] to [200%] at (0.3) should be [130%]
Pass Web Animations: property <text-underline-offset> from [100%] to [200%] at (0.6) should be [160%]
Pass Web Animations: property <text-underline-offset> from [100%] to [200%] at (1) should be [200%]
Pass CSS Transitions: property <text-underline-offset> from [16px] to [0em] at (0) should be [16px]
Pass CSS Transitions: property <text-underline-offset> from [16px] to [0em] at (0.3) should be [11.2px]
Pass CSS Transitions: property <text-underline-offset> from [16px] to [0em] at (0.6) should be [6.4px]
Pass CSS Transitions: property <text-underline-offset> from [16px] to [0em] at (1) should be [0px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [16px] to [0em] at (0) should be [16px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [16px] to [0em] at (0.3) should be [11.2px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [16px] to [0em] at (0.6) should be [6.4px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [16px] to [0em] at (1) should be [0px]
Pass CSS Animations: property <text-underline-offset> from [16px] to [0em] at (0) should be [16px]
Pass CSS Animations: property <text-underline-offset> from [16px] to [0em] at (0.3) should be [11.2px]
Pass CSS Animations: property <text-underline-offset> from [16px] to [0em] at (0.6) should be [6.4px]
Pass CSS Animations: property <text-underline-offset> from [16px] to [0em] at (1) should be [0px]
Pass Web Animations: property <text-underline-offset> from [16px] to [0em] at (0) should be [16px]
Pass Web Animations: property <text-underline-offset> from [16px] to [0em] at (0.3) should be [11.2px]
Pass Web Animations: property <text-underline-offset> from [16px] to [0em] at (0.6) should be [6.4px]
Pass Web Animations: property <text-underline-offset> from [16px] to [0em] at (1) should be [0px]
Pass CSS Transitions: property <text-underline-offset> from [16px] to [2em] at (0) should be [16px]
Pass CSS Transitions: property <text-underline-offset> from [16px] to [2em] at (0.3) should be [20.8px]
Pass CSS Transitions: property <text-underline-offset> from [16px] to [2em] at (0.6) should be [25.6px]
Pass CSS Transitions: property <text-underline-offset> from [16px] to [2em] at (1) should be [32px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [16px] to [2em] at (0) should be [16px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [16px] to [2em] at (0.3) should be [20.8px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [16px] to [2em] at (0.6) should be [25.6px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [16px] to [2em] at (1) should be [32px]
Pass CSS Animations: property <text-underline-offset> from [16px] to [2em] at (0) should be [16px]
Pass CSS Animations: property <text-underline-offset> from [16px] to [2em] at (0.3) should be [20.8px]
Pass CSS Animations: property <text-underline-offset> from [16px] to [2em] at (0.6) should be [25.6px]
Pass CSS Animations: property <text-underline-offset> from [16px] to [2em] at (1) should be [32px]
Pass Web Animations: property <text-underline-offset> from [16px] to [2em] at (0) should be [16px]
Pass Web Animations: property <text-underline-offset> from [16px] to [2em] at (0.3) should be [20.8px]
Pass Web Animations: property <text-underline-offset> from [16px] to [2em] at (0.6) should be [25.6px]
Pass Web Animations: property <text-underline-offset> from [16px] to [2em] at (1) should be [32px]
Pass CSS Transitions: property <text-underline-offset> from [16px] to [0%] at (0) should be [calc(0% + 16px)]
Pass CSS Transitions: property <text-underline-offset> from [16px] to [0%] at (0.3) should be [calc(0% + 11.2px)]
Pass CSS Transitions: property <text-underline-offset> from [16px] to [0%] at (0.6) should be [calc(0% + 6.4px)]
Pass CSS Transitions: property <text-underline-offset> from [16px] to [0%] at (1) should be [0%]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [16px] to [0%] at (0) should be [calc(0% + 16px)]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [16px] to [0%] at (0.3) should be [calc(0% + 11.2px)]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [16px] to [0%] at (0.6) should be [calc(0% + 6.4px)]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [16px] to [0%] at (1) should be [0%]
Pass CSS Animations: property <text-underline-offset> from [16px] to [0%] at (0) should be [calc(0% + 16px)]
Pass CSS Animations: property <text-underline-offset> from [16px] to [0%] at (0.3) should be [calc(0% + 11.2px)]
Pass CSS Animations: property <text-underline-offset> from [16px] to [0%] at (0.6) should be [calc(0% + 6.4px)]
Pass CSS Animations: property <text-underline-offset> from [16px] to [0%] at (1) should be [0%]
Pass Web Animations: property <text-underline-offset> from [16px] to [0%] at (0) should be [calc(0% + 16px)]
Pass Web Animations: property <text-underline-offset> from [16px] to [0%] at (0.3) should be [calc(0% + 11.2px)]
Pass Web Animations: property <text-underline-offset> from [16px] to [0%] at (0.6) should be [calc(0% + 6.4px)]
Pass Web Animations: property <text-underline-offset> from [16px] to [0%] at (1) should be [0%]
Pass CSS Transitions: property <text-underline-offset> from [16px] to [200%] at (0) should be [calc(0% + 16px)]
Pass CSS Transitions: property <text-underline-offset> from [16px] to [200%] at (0.3) should be [calc(60% + 11.2px)]
Pass CSS Transitions: property <text-underline-offset> from [16px] to [200%] at (0.6) should be [calc(120% + 6.4px)]
Pass CSS Transitions: property <text-underline-offset> from [16px] to [200%] at (1) should be [200%]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [16px] to [200%] at (0) should be [calc(0% + 16px)]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [16px] to [200%] at (0.3) should be [calc(60% + 11.2px)]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [16px] to [200%] at (0.6) should be [calc(120% + 6.4px)]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [16px] to [200%] at (1) should be [200%]
Pass CSS Animations: property <text-underline-offset> from [16px] to [200%] at (0) should be [calc(0% + 16px)]
Pass CSS Animations: property <text-underline-offset> from [16px] to [200%] at (0.3) should be [calc(60% + 11.2px)]
Pass CSS Animations: property <text-underline-offset> from [16px] to [200%] at (0.6) should be [calc(120% + 6.4px)]
Pass CSS Animations: property <text-underline-offset> from [16px] to [200%] at (1) should be [200%]
Pass Web Animations: property <text-underline-offset> from [16px] to [200%] at (0) should be [calc(0% + 16px)]
Pass Web Animations: property <text-underline-offset> from [16px] to [200%] at (0.3) should be [calc(60% + 11.2px)]
Pass Web Animations: property <text-underline-offset> from [16px] to [200%] at (0.6) should be [calc(120% + 6.4px)]
Pass Web Animations: property <text-underline-offset> from [16px] to [200%] at (1) should be [200%]
Pass CSS Transitions: property <text-underline-offset> from [1em] to [0px] at (0) should be [16px]
Pass CSS Transitions: property <text-underline-offset> from [1em] to [0px] at (0.3) should be [11.2px]
Pass CSS Transitions: property <text-underline-offset> from [1em] to [0px] at (0.6) should be [6.4px]
Pass CSS Transitions: property <text-underline-offset> from [1em] to [0px] at (1) should be [0px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [1em] to [0px] at (0) should be [16px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [1em] to [0px] at (0.3) should be [11.2px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [1em] to [0px] at (0.6) should be [6.4px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [1em] to [0px] at (1) should be [0px]
Pass CSS Animations: property <text-underline-offset> from [1em] to [0px] at (0) should be [16px]
Pass CSS Animations: property <text-underline-offset> from [1em] to [0px] at (0.3) should be [11.2px]
Pass CSS Animations: property <text-underline-offset> from [1em] to [0px] at (0.6) should be [6.4px]
Pass CSS Animations: property <text-underline-offset> from [1em] to [0px] at (1) should be [0px]
Pass Web Animations: property <text-underline-offset> from [1em] to [0px] at (0) should be [16px]
Pass Web Animations: property <text-underline-offset> from [1em] to [0px] at (0.3) should be [11.2px]
Pass Web Animations: property <text-underline-offset> from [1em] to [0px] at (0.6) should be [6.4px]
Pass Web Animations: property <text-underline-offset> from [1em] to [0px] at (1) should be [0px]
Pass CSS Transitions: property <text-underline-offset> from [1em] to [32px] at (0) should be [16px]
Pass CSS Transitions: property <text-underline-offset> from [1em] to [32px] at (0.3) should be [20.8px]
Pass CSS Transitions: property <text-underline-offset> from [1em] to [32px] at (0.6) should be [25.6px]
Pass CSS Transitions: property <text-underline-offset> from [1em] to [32px] at (1) should be [32px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [1em] to [32px] at (0) should be [16px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [1em] to [32px] at (0.3) should be [20.8px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [1em] to [32px] at (0.6) should be [25.6px]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [1em] to [32px] at (1) should be [32px]
Pass CSS Animations: property <text-underline-offset> from [1em] to [32px] at (0) should be [16px]
Pass CSS Animations: property <text-underline-offset> from [1em] to [32px] at (0.3) should be [20.8px]
Pass CSS Animations: property <text-underline-offset> from [1em] to [32px] at (0.6) should be [25.6px]
Pass CSS Animations: property <text-underline-offset> from [1em] to [32px] at (1) should be [32px]
Pass Web Animations: property <text-underline-offset> from [1em] to [32px] at (0) should be [16px]
Pass Web Animations: property <text-underline-offset> from [1em] to [32px] at (0.3) should be [20.8px]
Pass Web Animations: property <text-underline-offset> from [1em] to [32px] at (0.6) should be [25.6px]
Pass Web Animations: property <text-underline-offset> from [1em] to [32px] at (1) should be [32px]
Pass CSS Transitions: property <text-underline-offset> from [1em] to [0%] at (0) should be [calc(0% + 16px)]
Pass CSS Transitions: property <text-underline-offset> from [1em] to [0%] at (0.3) should be [calc(0% + 11.2px)]
Pass CSS Transitions: property <text-underline-offset> from [1em] to [0%] at (0.6) should be [calc(0% + 6.4px)]
Pass CSS Transitions: property <text-underline-offset> from [1em] to [0%] at (1) should be [0%]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [1em] to [0%] at (0) should be [calc(0% + 16px)]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [1em] to [0%] at (0.3) should be [calc(0% + 11.2px)]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [1em] to [0%] at (0.6) should be [calc(0% + 6.4px)]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [1em] to [0%] at (1) should be [0%]
Pass CSS Animations: property <text-underline-offset> from [1em] to [0%] at (0) should be [calc(0% + 16px)]
Pass CSS Animations: property <text-underline-offset> from [1em] to [0%] at (0.3) should be [calc(0% + 11.2px)]
Pass CSS Animations: property <text-underline-offset> from [1em] to [0%] at (0.6) should be [calc(0% + 6.4px)]
Pass CSS Animations: property <text-underline-offset> from [1em] to [0%] at (1) should be [0%]
Pass Web Animations: property <text-underline-offset> from [1em] to [0%] at (0) should be [calc(0% + 16px)]
Pass Web Animations: property <text-underline-offset> from [1em] to [0%] at (0.3) should be [calc(0% + 11.2px)]
Pass Web Animations: property <text-underline-offset> from [1em] to [0%] at (0.6) should be [calc(0% + 6.4px)]
Pass Web Animations: property <text-underline-offset> from [1em] to [0%] at (1) should be [0%]
Pass CSS Transitions: property <text-underline-offset> from [1em] to [200%] at (0) should be [calc(0% + 16px)]
Pass CSS Transitions: property <text-underline-offset> from [1em] to [200%] at (0.3) should be [calc(60% + 11.2px)]
Pass CSS Transitions: property <text-underline-offset> from [1em] to [200%] at (0.6) should be [calc(120% + 6.4px)]
Pass CSS Transitions: property <text-underline-offset> from [1em] to [200%] at (1) should be [200%]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [1em] to [200%] at (0) should be [calc(0% + 16px)]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [1em] to [200%] at (0.3) should be [calc(60% + 11.2px)]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [1em] to [200%] at (0.6) should be [calc(120% + 6.4px)]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [1em] to [200%] at (1) should be [200%]
Pass CSS Animations: property <text-underline-offset> from [1em] to [200%] at (0) should be [calc(0% + 16px)]
Pass CSS Animations: property <text-underline-offset> from [1em] to [200%] at (0.3) should be [calc(60% + 11.2px)]
Pass CSS Animations: property <text-underline-offset> from [1em] to [200%] at (0.6) should be [calc(120% + 6.4px)]
Pass CSS Animations: property <text-underline-offset> from [1em] to [200%] at (1) should be [200%]
Pass Web Animations: property <text-underline-offset> from [1em] to [200%] at (0) should be [calc(0% + 16px)]
Pass Web Animations: property <text-underline-offset> from [1em] to [200%] at (0.3) should be [calc(60% + 11.2px)]
Pass Web Animations: property <text-underline-offset> from [1em] to [200%] at (0.6) should be [calc(120% + 6.4px)]
Pass Web Animations: property <text-underline-offset> from [1em] to [200%] at (1) should be [200%]
Pass CSS Transitions: property <text-underline-offset> from [100%] to [0px] at (0) should be [100%]
Pass CSS Transitions: property <text-underline-offset> from [100%] to [0px] at (0.3) should be [70%]
Pass CSS Transitions: property <text-underline-offset> from [100%] to [0px] at (0.6) should be [40%]
Pass CSS Transitions: property <text-underline-offset> from [100%] to [0px] at (1) should be [0%]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [100%] to [0px] at (0) should be [100%]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [100%] to [0px] at (0.3) should be [70%]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [100%] to [0px] at (0.6) should be [40%]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [100%] to [0px] at (1) should be [0%]
Pass CSS Animations: property <text-underline-offset> from [100%] to [0px] at (0) should be [100%]
Pass CSS Animations: property <text-underline-offset> from [100%] to [0px] at (0.3) should be [70%]
Pass CSS Animations: property <text-underline-offset> from [100%] to [0px] at (0.6) should be [40%]
Pass CSS Animations: property <text-underline-offset> from [100%] to [0px] at (1) should be [0%]
Pass Web Animations: property <text-underline-offset> from [100%] to [0px] at (0) should be [100%]
Pass Web Animations: property <text-underline-offset> from [100%] to [0px] at (0.3) should be [70%]
Pass Web Animations: property <text-underline-offset> from [100%] to [0px] at (0.6) should be [40%]
Pass Web Animations: property <text-underline-offset> from [100%] to [0px] at (1) should be [0%]
Fail CSS Transitions: property <text-underline-offset> from [100%] to [32px] at (0) should be [calc(100% + 0px)]
Pass CSS Transitions: property <text-underline-offset> from [100%] to [32px] at (0.3) should be [calc(70% + 9.6px)]
Pass CSS Transitions: property <text-underline-offset> from [100%] to [32px] at (0.6) should be [calc(40% + 19.2px)]
Pass CSS Transitions: property <text-underline-offset> from [100%] to [32px] at (1) should be [calc(0% + 32px)]
Fail CSS Transitions with transition: all: property <text-underline-offset> from [100%] to [32px] at (0) should be [calc(100% + 0px)]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [100%] to [32px] at (0.3) should be [calc(70% + 9.6px)]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [100%] to [32px] at (0.6) should be [calc(40% + 19.2px)]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [100%] to [32px] at (1) should be [calc(0% + 32px)]
Fail CSS Animations: property <text-underline-offset> from [100%] to [32px] at (0) should be [calc(100% + 0px)]
Pass CSS Animations: property <text-underline-offset> from [100%] to [32px] at (0.3) should be [calc(70% + 9.6px)]
Pass CSS Animations: property <text-underline-offset> from [100%] to [32px] at (0.6) should be [calc(40% + 19.2px)]
Pass CSS Animations: property <text-underline-offset> from [100%] to [32px] at (1) should be [calc(0% + 32px)]
Fail Web Animations: property <text-underline-offset> from [100%] to [32px] at (0) should be [calc(100% + 0px)]
Pass Web Animations: property <text-underline-offset> from [100%] to [32px] at (0.3) should be [calc(70% + 9.6px)]
Pass Web Animations: property <text-underline-offset> from [100%] to [32px] at (0.6) should be [calc(40% + 19.2px)]
Pass Web Animations: property <text-underline-offset> from [100%] to [32px] at (1) should be [calc(0% + 32px)]
Fail CSS Transitions: property <text-underline-offset> from [100%] to [0em] at (0) should be [calc(100% + 0em)]
Fail CSS Transitions: property <text-underline-offset> from [100%] to [0em] at (0.3) should be [calc(70% + 0em)]
Fail CSS Transitions: property <text-underline-offset> from [100%] to [0em] at (0.6) should be [calc(40% + 0em)]
Fail CSS Transitions: property <text-underline-offset> from [100%] to [0em] at (1) should be [calc(0% + 0em)]
Fail CSS Transitions with transition: all: property <text-underline-offset> from [100%] to [0em] at (0) should be [calc(100% + 0em)]
Fail CSS Transitions with transition: all: property <text-underline-offset> from [100%] to [0em] at (0.3) should be [calc(70% + 0em)]
Fail CSS Transitions with transition: all: property <text-underline-offset> from [100%] to [0em] at (0.6) should be [calc(40% + 0em)]
Fail CSS Transitions with transition: all: property <text-underline-offset> from [100%] to [0em] at (1) should be [calc(0% + 0em)]
Fail CSS Animations: property <text-underline-offset> from [100%] to [0em] at (0) should be [calc(100% + 0em)]
Fail CSS Animations: property <text-underline-offset> from [100%] to [0em] at (0.3) should be [calc(70% + 0em)]
Fail CSS Animations: property <text-underline-offset> from [100%] to [0em] at (0.6) should be [calc(40% + 0em)]
Fail CSS Animations: property <text-underline-offset> from [100%] to [0em] at (1) should be [calc(0% + 0em)]
Fail Web Animations: property <text-underline-offset> from [100%] to [0em] at (0) should be [calc(100% + 0em)]
Fail Web Animations: property <text-underline-offset> from [100%] to [0em] at (0.3) should be [calc(70% + 0em)]
Fail Web Animations: property <text-underline-offset> from [100%] to [0em] at (0.6) should be [calc(40% + 0em)]
Fail Web Animations: property <text-underline-offset> from [100%] to [0em] at (1) should be [calc(0% + 0em)]
Pass CSS Transitions: property <text-underline-offset> from [100%] to [2em] at (0) should be [100%]
Pass CSS Transitions: property <text-underline-offset> from [100%] to [2em] at (0.3) should be [calc(70% + 9.6px)]
Pass CSS Transitions: property <text-underline-offset> from [100%] to [2em] at (0.6) should be [calc(40% + 19.2px)]
Pass CSS Transitions: property <text-underline-offset> from [100%] to [2em] at (1) should be [calc(0% + 32px)]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [100%] to [2em] at (0) should be [100%]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [100%] to [2em] at (0.3) should be [calc(70% + 9.6px)]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [100%] to [2em] at (0.6) should be [calc(40% + 19.2px)]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [100%] to [2em] at (1) should be [calc(0% + 32px)]
Pass CSS Animations: property <text-underline-offset> from [100%] to [2em] at (0) should be [100%]
Pass CSS Animations: property <text-underline-offset> from [100%] to [2em] at (0.3) should be [calc(70% + 9.6px)]
Pass CSS Animations: property <text-underline-offset> from [100%] to [2em] at (0.6) should be [calc(40% + 19.2px)]
Pass CSS Animations: property <text-underline-offset> from [100%] to [2em] at (1) should be [calc(0% + 32px)]
Pass Web Animations: property <text-underline-offset> from [100%] to [2em] at (0) should be [100%]
Pass Web Animations: property <text-underline-offset> from [100%] to [2em] at (0.3) should be [calc(70% + 9.6px)]
Pass Web Animations: property <text-underline-offset> from [100%] to [2em] at (0.6) should be [calc(40% + 19.2px)]
Pass Web Animations: property <text-underline-offset> from [100%] to [2em] at (1) should be [calc(0% + 32px)]
Pass CSS Transitions: property <text-underline-offset> from [0%] to [100%] at (0) should be [0%]
Pass CSS Transitions: property <text-underline-offset> from [0%] to [100%] at (0.3) should be [30%]
Pass CSS Transitions: property <text-underline-offset> from [0%] to [100%] at (0.6) should be [60%]
Pass CSS Transitions: property <text-underline-offset> from [0%] to [100%] at (1) should be [100%]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [0%] to [100%] at (0) should be [0%]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [0%] to [100%] at (0.3) should be [30%]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [0%] to [100%] at (0.6) should be [60%]
Pass CSS Transitions with transition: all: property <text-underline-offset> from [0%] to [100%] at (1) should be [100%]
Pass CSS Animations: property <text-underline-offset> from [0%] to [100%] at (0) should be [0%]
Pass CSS Animations: property <text-underline-offset> from [0%] to [100%] at (0.3) should be [30%]
Pass CSS Animations: property <text-underline-offset> from [0%] to [100%] at (0.6) should be [60%]
Pass CSS Animations: property <text-underline-offset> from [0%] to [100%] at (1) should be [100%]
Pass Web Animations: property <text-underline-offset> from [0%] to [100%] at (0) should be [0%]
Pass Web Animations: property <text-underline-offset> from [0%] to [100%] at (0.3) should be [30%]
Pass Web Animations: property <text-underline-offset> from [0%] to [100%] at (0.6) should be [60%]
Pass Web Animations: property <text-underline-offset> from [0%] to [100%] at (1) should be [100%]

View file

@ -0,0 +1,21 @@
Harness status: OK
Found 15 tests
13 Pass
2 Fail
Pass Property text-underline-offset value 'auto'
Pass Property text-underline-offset value 'calc(10px - 8px)'
Pass Property text-underline-offset value '32px'
Pass Property text-underline-offset value '2em'
Pass Property text-underline-offset value '200%'
Pass Property text-underline-offset value 'calc(2em - 0px)'
Fail Property text-underline-offset value 'calc(200% - 0px)'
Pass Property text-underline-offset value 'calc(0.5em - 0px)'
Fail Property text-underline-offset value 'calc(50% - 0px)'
Pass Property text-underline-offset value 'calc(2em - 8px)'
Pass Property text-underline-offset value 'calc(2em - 0.5em)'
Pass Property text-underline-offset value 'calc(2em - 50%)'
Pass Property text-underline-offset value 'calc(200% - 8px)'
Pass Property text-underline-offset value 'calc(200% - 0.5em)'
Pass Property text-underline-offset value 'calc(200% - 50%)'

View file

@ -0,0 +1,6 @@
Harness status: OK
Found 1 tests
1 Pass
Pass Initial value of text-underline-offset

View file

@ -0,0 +1,13 @@
Harness status: OK
Found 8 tests
8 Pass
Pass e.style['text-underline-offset'] = "from-font" should not set the property value
Pass e.style['text-underline-offset'] = "otto" should not set the property value
Pass e.style['text-underline-offset'] = "asdlflj" should not set the property value
Pass e.style['text-underline-offset'] = "-10" should not set the property value
Pass e.style['text-underline-offset'] = "60002020" should not set the property value
Pass e.style['text-underline-offset'] = "!@#$%^&" should not set the property value
Pass e.style['text-underline-offset'] = "10e2" should not set the property value
Pass e.style['text-underline-offset'] = "from font" should not set the property value

View file

@ -0,0 +1,17 @@
Harness status: OK
Found 12 tests
12 Pass
Pass e.style['text-underline-offset'] = "auto" should set the property value
Pass e.style['text-underline-offset'] = "-10px" should set the property value
Pass e.style['text-underline-offset'] = "2001em" should set the property value
Pass e.style['text-underline-offset'] = "-49em" should set the property value
Pass e.style['text-underline-offset'] = "53px" should set the property value
Pass e.style['text-underline-offset'] = "5%" should set the property value
Pass e.style['text-underline-offset'] = "89%" should set the property value
Pass e.style['text-underline-offset'] = "-30%" should set the property value
Pass e.style['text-underline-offset'] = "187%" should set the property value
Pass e.style['text-underline-offset'] = "calc(45% - 0.3em)" should set the property value
Pass e.style['text-underline-offset'] = "calc(40em - 10px)" should set the property value
Pass e.style['text-underline-offset'] = "calc(-13em + 50px)" should set the property value

View file

@ -0,0 +1,240 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<link rel="help" href="https://www.w3.org/TR/css-text-decor-4/#underline-offset">
<meta name="test" content="text-underline-offset supports animation by computed value type">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/interpolation-testcommon.js"></script>
<style>
.target {
font: 16px sans-serif;
}
</style>
<body>
<template id="target-template">T</template>
</body>
<script>
test_interpolation({
property: 'text-underline-offset',
from: '15px',
to: '0px',
}, [
{at: 0, expect: '15px'},
{at: 0.3, expect: '10.5px'},
{at: 0.6, expect: '6px'},
{at: 1, expect: '0px'},
]);
test_interpolation({
property: 'text-underline-offset',
from: '16px',
to: '0px',
}, [
{at: 0, expect: '16px'},
{at: 0.3, expect: '11.2px'},
{at: 0.6, expect: '6.4px'},
{at: 1, expect: '0px'},
]);
test_interpolation({
property: 'text-underline-offset',
from: '16px',
to: '32px',
}, [
{at: 0, expect: '16px'},
{at: 0.3, expect: '20.8px'},
{at: 0.6, expect: '25.6px'},
{at: 1, expect: '32px'},
]);
test_interpolation({
property: 'text-underline-offset',
from: '1em',
to: '0em',
}, [
{at: 0, expect: '16px'},
{at: 0.3, expect: '11.2px'},
{at: 0.6, expect: '6.4px'},
{at: 1, expect: '0px'},
]);
test_interpolation({
property: 'text-underline-offset',
from: '1em',
to: '2em',
}, [
{at: 0, expect: '16px'},
{at: 0.3, expect: '20.8px'},
{at: 0.6, expect: '25.6px'},
{at: 1, expect: '32px'},
]);
test_interpolation({
property: 'text-underline-offset',
from: '100%',
to: '0%',
}, [
{at: 0, expect: '100%'},
{at: 0.3, expect: '70%'},
{at: 0.6, expect: '40%'},
{at: 1, expect: '0%'},
]);
test_interpolation({
property: 'text-underline-offset',
from: '100%',
to: '200%',
}, [
{at: 0, expect: '100%'},
{at: 0.3, expect: '130%'},
{at: 0.6, expect: '160%'},
{at: 1, expect: '200%'},
]);
test_interpolation({
property: 'text-underline-offset',
from: '16px',
to: '0em',
}, [
{at: 0, expect: '16px'},
{at: 0.3, expect: '11.2px'},
{at: 0.6, expect: '6.4px'},
{at: 1, expect: '0px'},
]);
test_interpolation({
property: 'text-underline-offset',
from: '16px',
to: '2em',
}, [
{at: 0, expect: '16px'},
{at: 0.3, expect: '20.8px'},
{at: 0.6, expect: '25.6px'},
{at: 1, expect: '32px'},
]);
test_interpolation({
property: 'text-underline-offset',
from: '16px',
to: '0%',
}, [
{at: 0, expect: 'calc(0% + 16px)'},
{at: 0.3, expect: 'calc(0% + 11.2px)'},
{at: 0.6, expect: 'calc(0% + 6.4px)'},
{at: 1, expect: '0%'},
]);
test_interpolation({
property: 'text-underline-offset',
from: '16px',
to: '200%',
}, [
{at: 0, expect: 'calc(0% + 16px)'},
{at: 0.3, expect: 'calc(60% + 11.2px)'},
{at: 0.6, expect: 'calc(120% + 6.4px)'},
{at: 1, expect: '200%'},
]);
test_interpolation({
property: 'text-underline-offset',
from: '1em',
to: '0px',
}, [
{at: 0, expect: '16px'},
{at: 0.3, expect: '11.2px'},
{at: 0.6, expect: '6.4px'},
{at: 1, expect: '0px'},
]);
test_interpolation({
property: 'text-underline-offset',
from: '1em',
to: '32px',
}, [
{at: 0, expect: '16px'},
{at: 0.3, expect: '20.8px'},
{at: 0.6, expect: '25.6px'},
{at: 1, expect: '32px'},
]);
test_interpolation({
property: 'text-underline-offset',
from: '1em',
to: '0%',
}, [
{at: 0, expect: 'calc(0% + 16px)'},
{at: 0.3, expect: 'calc(0% + 11.2px)'},
{at: 0.6, expect: 'calc(0% + 6.4px)'},
{at: 1, expect: '0%'},
]);
test_interpolation({
property: 'text-underline-offset',
from: '1em',
to: '200%',
}, [
{at: 0, expect: 'calc(0% + 16px)'},
{at: 0.3, expect: 'calc(60% + 11.2px)'},
{at: 0.6, expect: 'calc(120% + 6.4px)'},
{at: 1, expect: '200%'},
]);
test_interpolation({
property: 'text-underline-offset',
from: '100%',
to: '0px',
}, [
{at: 0, expect: '100%'},
{at: 0.3, expect: '70%'},
{at: 0.6, expect: '40%'},
{at: 1, expect: '0%'},
]);
test_interpolation({
property: 'text-underline-offset',
from: '100%',
to: '32px',
}, [
{at: 0, expect: 'calc(100% + 0px)'},
{at: 0.3, expect: 'calc(70% + 9.6px)'},
{at: 0.6, expect: 'calc(40% + 19.2px)'},
{at: 1, expect: 'calc(0% + 32px)'},
]);
test_interpolation({
property: 'text-underline-offset',
from: '100%',
to: '0em',
}, [
{at: 0, expect: 'calc(100% + 0em)'},
{at: 0.3, expect: 'calc(70% + 0em)'},
{at: 0.6, expect: 'calc(40% + 0em)'},
{at: 1, expect: 'calc(0% + 0em)'},
]);
test_interpolation({
property: 'text-underline-offset',
from: '100%',
to: '2em',
}, [
{at: 0, expect: '100%'},
{at: 0.3, expect: 'calc(70% + 9.6px)'},
{at: 0.6, expect: 'calc(40% + 19.2px)'},
{at: 1, expect: 'calc(0% + 32px)'},
]);
test_interpolation({
property: 'text-underline-offset',
from: '0%',
to: '100%',
}, [
{at: 0, expect: '0%'},
{at: 0.3, expect: '30%'},
{at: 0.6, expect: '60%'},
{at: 1, expect: '100%'},
]);
</script>

View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Text Decoration Test: parsing text-underline-offset computed values</title>
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#underline-offset">
<meta name="assert" content="text-underline-offset computed value is as specified.">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("text-underline-offset", "auto");
test_computed_value("text-underline-offset", "calc(10px - 8px)", "2px");
test_computed_value("text-underline-offset", "32px", "32px");
test_computed_value("text-underline-offset", "2em", "32px");
test_computed_value("text-underline-offset", "200%", "200%");
test_computed_value("text-underline-offset", "calc(2em - 0px)", "32px");
test_computed_value("text-underline-offset", "calc(200% - 0px)", "200%");
test_computed_value("text-underline-offset", "calc(0.5em - 0px)", "8px");
test_computed_value("text-underline-offset", "calc(50% - 0px)", "50%");
test_computed_value("text-underline-offset", "calc(2em - 8px)", "24px");
test_computed_value("text-underline-offset", "calc(2em - 0.5em)", "24px");
test_computed_value("text-underline-offset", "calc(2em - 50%)", "calc(-50% + 32px)");
test_computed_value("text-underline-offset", "calc(200% - 8px)");
test_computed_value("text-underline-offset", "calc(200% - 0.5em)", "calc(200% - 8px)");
test_computed_value("text-underline-offset", "calc(200% - 50%)", "150%");
</script>
</body>
</html>

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<link rel="help" title="2.4 Text Underline Offset: the 'text-underline-offset' property"
href="https://drafts.csswg.org/css-text-decor-4/#underline-offset" />
</head>
<body>
<script>
test(function() {
assert_equals(getComputedStyle(document.body)["text-underline-offset"], "auto", "Must be set to value auto as initial value.");
}, "Initial value of text-underline-offset");
</script>
</body>
</html>

View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Text Decoration Test: parsing text-underline-offset with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#underline-offset">
<meta name="assert" content="text-underline-offset supports the following values: auto | <length> | <percentage>">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("text-underline-offset", "from-font");
test_invalid_value("text-underline-offset", "otto");
test_invalid_value("text-underline-offset", "asdlflj");
test_invalid_value("text-underline-offset", "-10");
test_invalid_value("text-underline-offset", "60002020");
test_invalid_value("text-underline-offset", "!@#$%^&");
test_invalid_value("text-underline-offset", "10e2");
test_invalid_value("text-underline-offset", "from font");
</script>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Text Decoration Test: parsing text-underline-offset with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#underline-offset">
<meta name="assert" content="text-underline-offset supports the following values: auto | <length> | <percentage>">
<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("text-underline-offset", "auto");
test_valid_value("text-underline-offset", "-10px");
test_valid_value("text-underline-offset", "2001em");
test_valid_value("text-underline-offset", "-49em");
test_valid_value("text-underline-offset", "53px");
test_valid_value("text-underline-offset", "5%");
test_valid_value("text-underline-offset", "89%");
test_valid_value("text-underline-offset", "-30%");
test_valid_value("text-underline-offset", "187%");
test_valid_value("text-underline-offset", "calc(45% - 0.3em)");
test_valid_value("text-underline-offset", "calc(40em - 10px)");
test_valid_value("text-underline-offset", "calc(-13em + 50px)");
</script>
</body>
</html>