LibWeb: Import a bunch of CSS font related tests

Done in distinct commit to see progress over multiple following commits
This commit is contained in:
Callum Law 2025-08-29 20:17:56 +12:00 committed by Sam Atkins
parent fbf47e57d0
commit 3b6d17cd42
24 changed files with 1427 additions and 0 deletions

View File

@ -0,0 +1 @@
oblique calc(57.29578deg * sign(1em - 1px))

View File

@ -0,0 +1 @@
bolder

View File

@ -0,0 +1,191 @@
Harness status: OK
Found 185 tests
32 Pass
153 Fail
Pass CSS Transitions: property <font-stretch> from [100%] to [200%] at (-2) should be [0%]
Pass CSS Transitions: property <font-stretch> from [100%] to [200%] at (-0.25) should be [75%]
Pass CSS Transitions: property <font-stretch> from [100%] to [200%] at (0) should be [100%]
Pass CSS Transitions: property <font-stretch> from [100%] to [200%] at (0.3) should be [130%]
Pass CSS Transitions: property <font-stretch> from [100%] to [200%] at (0.6) should be [160%]
Pass CSS Transitions: property <font-stretch> from [100%] to [200%] at (1) should be [200%]
Pass CSS Transitions: property <font-stretch> from [100%] to [200%] at (1.5) should be [250%]
Pass CSS Transitions with transition: all: property <font-stretch> from [100%] to [200%] at (-2) should be [0%]
Pass CSS Transitions with transition: all: property <font-stretch> from [100%] to [200%] at (-0.25) should be [75%]
Pass CSS Transitions with transition: all: property <font-stretch> from [100%] to [200%] at (0) should be [100%]
Pass CSS Transitions with transition: all: property <font-stretch> from [100%] to [200%] at (0.3) should be [130%]
Pass CSS Transitions with transition: all: property <font-stretch> from [100%] to [200%] at (0.6) should be [160%]
Pass CSS Transitions with transition: all: property <font-stretch> from [100%] to [200%] at (1) should be [200%]
Pass CSS Transitions with transition: all: property <font-stretch> from [100%] to [200%] at (1.5) should be [250%]
Pass CSS Animations: property <font-stretch> from [100%] to [200%] at (-2) should be [0%]
Pass CSS Animations: property <font-stretch> from [100%] to [200%] at (-0.25) should be [75%]
Pass CSS Animations: property <font-stretch> from [100%] to [200%] at (0) should be [100%]
Pass CSS Animations: property <font-stretch> from [100%] to [200%] at (0.3) should be [130%]
Pass CSS Animations: property <font-stretch> from [100%] to [200%] at (0.6) should be [160%]
Pass CSS Animations: property <font-stretch> from [100%] to [200%] at (1) should be [200%]
Pass CSS Animations: property <font-stretch> from [100%] to [200%] at (1.5) should be [250%]
Pass Web Animations: property <font-stretch> from [100%] to [200%] at (-2) should be [0%]
Pass Web Animations: property <font-stretch> from [100%] to [200%] at (-0.25) should be [75%]
Pass Web Animations: property <font-stretch> from [100%] to [200%] at (0) should be [100%]
Pass Web Animations: property <font-stretch> from [100%] to [200%] at (0.3) should be [130%]
Pass Web Animations: property <font-stretch> from [100%] to [200%] at (0.6) should be [160%]
Pass Web Animations: property <font-stretch> from [100%] to [200%] at (1) should be [200%]
Pass Web Animations: property <font-stretch> from [100%] to [200%] at (1.5) should be [250%]
Fail CSS Transitions: property <font-stretch> from neutral to [200%] at (-2) should be [0%]
Fail CSS Transitions: property <font-stretch> from neutral to [200%] at (-0.25) should be [75%]
Fail CSS Transitions: property <font-stretch> from neutral to [200%] at (0) should be [100%]
Fail CSS Transitions: property <font-stretch> from neutral to [200%] at (0.3) should be [130%]
Fail CSS Transitions: property <font-stretch> from neutral to [200%] at (0.6) should be [160%]
Pass CSS Transitions: property <font-stretch> from neutral to [200%] at (1) should be [200%]
Fail CSS Transitions: property <font-stretch> from neutral to [200%] at (1.5) should be [250%]
Fail CSS Transitions with transition: all: property <font-stretch> from neutral to [200%] at (-2) should be [0%]
Fail CSS Transitions with transition: all: property <font-stretch> from neutral to [200%] at (-0.25) should be [75%]
Fail CSS Transitions with transition: all: property <font-stretch> from neutral to [200%] at (0) should be [100%]
Fail CSS Transitions with transition: all: property <font-stretch> from neutral to [200%] at (0.3) should be [130%]
Fail CSS Transitions with transition: all: property <font-stretch> from neutral to [200%] at (0.6) should be [160%]
Pass CSS Transitions with transition: all: property <font-stretch> from neutral to [200%] at (1) should be [200%]
Fail CSS Transitions with transition: all: property <font-stretch> from neutral to [200%] at (1.5) should be [250%]
Fail CSS Animations: property <font-stretch> from neutral to [200%] at (-2) should be [0%]
Fail CSS Animations: property <font-stretch> from neutral to [200%] at (-0.25) should be [75%]
Fail CSS Animations: property <font-stretch> from neutral to [200%] at (0) should be [100%]
Fail CSS Animations: property <font-stretch> from neutral to [200%] at (0.3) should be [130%]
Fail CSS Animations: property <font-stretch> from neutral to [200%] at (0.6) should be [160%]
Pass CSS Animations: property <font-stretch> from neutral to [200%] at (1) should be [200%]
Fail CSS Animations: property <font-stretch> from neutral to [200%] at (1.5) should be [250%]
Fail Web Animations: property <font-stretch> from neutral to [200%] at (-2) should be [0%]
Fail Web Animations: property <font-stretch> from neutral to [200%] at (-0.25) should be [75%]
Fail Web Animations: property <font-stretch> from neutral to [200%] at (0) should be [100%]
Fail Web Animations: property <font-stretch> from neutral to [200%] at (0.3) should be [130%]
Fail Web Animations: property <font-stretch> from neutral to [200%] at (0.6) should be [160%]
Pass Web Animations: property <font-stretch> from neutral to [200%] at (1) should be [200%]
Fail Web Animations: property <font-stretch> from neutral to [200%] at (1.5) should be [250%]
Fail CSS Transitions: property <font-stretch> from [initial] to [inherit] at (-2) should be [0%]
Fail CSS Transitions: property <font-stretch> from [initial] to [inherit] at (-0.25) should be [75%]
Fail CSS Transitions: property <font-stretch> from [initial] to [inherit] at (0) should be [100%]
Fail CSS Transitions: property <font-stretch> from [initial] to [inherit] at (0.3) should be [130%]
Fail CSS Transitions: property <font-stretch> from [initial] to [inherit] at (0.6) should be [160%]
Fail CSS Transitions: property <font-stretch> from [initial] to [inherit] at (1) should be [200%]
Fail CSS Transitions: property <font-stretch> from [initial] to [inherit] at (1.5) should be [250%]
Fail CSS Transitions with transition: all: property <font-stretch> from [initial] to [inherit] at (-2) should be [0%]
Fail CSS Transitions with transition: all: property <font-stretch> from [initial] to [inherit] at (-0.25) should be [75%]
Fail CSS Transitions with transition: all: property <font-stretch> from [initial] to [inherit] at (0) should be [100%]
Fail CSS Transitions with transition: all: property <font-stretch> from [initial] to [inherit] at (0.3) should be [130%]
Fail CSS Transitions with transition: all: property <font-stretch> from [initial] to [inherit] at (0.6) should be [160%]
Fail CSS Transitions with transition: all: property <font-stretch> from [initial] to [inherit] at (1) should be [200%]
Fail CSS Transitions with transition: all: property <font-stretch> from [initial] to [inherit] at (1.5) should be [250%]
Fail CSS Animations: property <font-stretch> from [initial] to [inherit] at (-2) should be [0%]
Fail CSS Animations: property <font-stretch> from [initial] to [inherit] at (-0.25) should be [75%]
Fail CSS Animations: property <font-stretch> from [initial] to [inherit] at (0) should be [100%]
Fail CSS Animations: property <font-stretch> from [initial] to [inherit] at (0.3) should be [130%]
Fail CSS Animations: property <font-stretch> from [initial] to [inherit] at (0.6) should be [160%]
Fail CSS Animations: property <font-stretch> from [initial] to [inherit] at (1) should be [200%]
Fail CSS Animations: property <font-stretch> from [initial] to [inherit] at (1.5) should be [250%]
Fail Web Animations: property <font-stretch> from [initial] to [inherit] at (-2) should be [0%]
Fail Web Animations: property <font-stretch> from [initial] to [inherit] at (-0.25) should be [75%]
Fail Web Animations: property <font-stretch> from [initial] to [inherit] at (0) should be [100%]
Fail Web Animations: property <font-stretch> from [initial] to [inherit] at (0.3) should be [130%]
Fail Web Animations: property <font-stretch> from [initial] to [inherit] at (0.6) should be [160%]
Fail Web Animations: property <font-stretch> from [initial] to [inherit] at (1) should be [200%]
Fail Web Animations: property <font-stretch> from [initial] to [inherit] at (1.5) should be [250%]
Fail CSS Transitions: property <font-stretch> from [normal] to [ultra-expanded] at (-0.25) should be [75%]
Fail CSS Transitions: property <font-stretch> from [normal] to [ultra-expanded] at (0) should be [100%]
Fail CSS Transitions: property <font-stretch> from [normal] to [ultra-expanded] at (0.125) should be [112.5%]
Fail CSS Transitions: property <font-stretch> from [normal] to [ultra-expanded] at (0.25) should be [125%]
Fail CSS Transitions: property <font-stretch> from [normal] to [ultra-expanded] at (0.5) should be [150%]
Fail CSS Transitions: property <font-stretch> from [normal] to [ultra-expanded] at (0.75) should be [175%]
Fail CSS Transitions: property <font-stretch> from [normal] to [ultra-expanded] at (1) should be [200%]
Fail CSS Transitions with transition: all: property <font-stretch> from [normal] to [ultra-expanded] at (-0.25) should be [75%]
Fail CSS Transitions with transition: all: property <font-stretch> from [normal] to [ultra-expanded] at (0) should be [100%]
Fail CSS Transitions with transition: all: property <font-stretch> from [normal] to [ultra-expanded] at (0.125) should be [112.5%]
Fail CSS Transitions with transition: all: property <font-stretch> from [normal] to [ultra-expanded] at (0.25) should be [125%]
Fail CSS Transitions with transition: all: property <font-stretch> from [normal] to [ultra-expanded] at (0.5) should be [150%]
Fail CSS Transitions with transition: all: property <font-stretch> from [normal] to [ultra-expanded] at (0.75) should be [175%]
Fail CSS Transitions with transition: all: property <font-stretch> from [normal] to [ultra-expanded] at (1) should be [200%]
Fail CSS Animations: property <font-stretch> from [normal] to [ultra-expanded] at (-0.25) should be [75%]
Fail CSS Animations: property <font-stretch> from [normal] to [ultra-expanded] at (0) should be [100%]
Fail CSS Animations: property <font-stretch> from [normal] to [ultra-expanded] at (0.125) should be [112.5%]
Fail CSS Animations: property <font-stretch> from [normal] to [ultra-expanded] at (0.25) should be [125%]
Fail CSS Animations: property <font-stretch> from [normal] to [ultra-expanded] at (0.5) should be [150%]
Fail CSS Animations: property <font-stretch> from [normal] to [ultra-expanded] at (0.75) should be [175%]
Fail CSS Animations: property <font-stretch> from [normal] to [ultra-expanded] at (1) should be [200%]
Fail Web Animations: property <font-stretch> from [normal] to [ultra-expanded] at (-0.25) should be [75%]
Fail Web Animations: property <font-stretch> from [normal] to [ultra-expanded] at (0) should be [100%]
Fail Web Animations: property <font-stretch> from [normal] to [ultra-expanded] at (0.125) should be [112.5%]
Fail Web Animations: property <font-stretch> from [normal] to [ultra-expanded] at (0.25) should be [125%]
Fail Web Animations: property <font-stretch> from [normal] to [ultra-expanded] at (0.5) should be [150%]
Fail Web Animations: property <font-stretch> from [normal] to [ultra-expanded] at (0.75) should be [175%]
Fail Web Animations: property <font-stretch> from [normal] to [ultra-expanded] at (1) should be [200%]
Fail CSS Transitions: property <font-stretch> from [ultra-condensed] to [condensed] at (0) should be [50%]
Fail CSS Transitions: property <font-stretch> from [ultra-condensed] to [condensed] at (0.5) should be [62.5%]
Fail CSS Transitions: property <font-stretch> from [ultra-condensed] to [condensed] at (1) should be [75%]
Fail CSS Transitions with transition: all: property <font-stretch> from [ultra-condensed] to [condensed] at (0) should be [50%]
Fail CSS Transitions with transition: all: property <font-stretch> from [ultra-condensed] to [condensed] at (0.5) should be [62.5%]
Fail CSS Transitions with transition: all: property <font-stretch> from [ultra-condensed] to [condensed] at (1) should be [75%]
Fail CSS Animations: property <font-stretch> from [ultra-condensed] to [condensed] at (0) should be [50%]
Fail CSS Animations: property <font-stretch> from [ultra-condensed] to [condensed] at (0.5) should be [62.5%]
Fail CSS Animations: property <font-stretch> from [ultra-condensed] to [condensed] at (1) should be [75%]
Fail Web Animations: property <font-stretch> from [ultra-condensed] to [condensed] at (0) should be [50%]
Fail Web Animations: property <font-stretch> from [ultra-condensed] to [condensed] at (0.5) should be [62.5%]
Fail Web Animations: property <font-stretch> from [ultra-condensed] to [condensed] at (1) should be [75%]
Fail CSS Transitions: property <font-stretch> from [extra-condensed] to [semi-condensed] at (0) should be [62.5%]
Fail CSS Transitions: property <font-stretch> from [extra-condensed] to [semi-condensed] at (0.5) should be [75%]
Fail CSS Transitions: property <font-stretch> from [extra-condensed] to [semi-condensed] at (1) should be [87.5%]
Fail CSS Transitions with transition: all: property <font-stretch> from [extra-condensed] to [semi-condensed] at (0) should be [62.5%]
Fail CSS Transitions with transition: all: property <font-stretch> from [extra-condensed] to [semi-condensed] at (0.5) should be [75%]
Fail CSS Transitions with transition: all: property <font-stretch> from [extra-condensed] to [semi-condensed] at (1) should be [87.5%]
Fail CSS Animations: property <font-stretch> from [extra-condensed] to [semi-condensed] at (0) should be [62.5%]
Fail CSS Animations: property <font-stretch> from [extra-condensed] to [semi-condensed] at (0.5) should be [75%]
Fail CSS Animations: property <font-stretch> from [extra-condensed] to [semi-condensed] at (1) should be [87.5%]
Fail Web Animations: property <font-stretch> from [extra-condensed] to [semi-condensed] at (0) should be [62.5%]
Fail Web Animations: property <font-stretch> from [extra-condensed] to [semi-condensed] at (0.5) should be [75%]
Fail Web Animations: property <font-stretch> from [extra-condensed] to [semi-condensed] at (1) should be [87.5%]
Fail CSS Transitions: property <font-stretch> from [condensed] to [expanded] at (0) should be [75%]
Fail CSS Transitions: property <font-stretch> from [condensed] to [expanded] at (0.25) should be [87.5%]
Fail CSS Transitions: property <font-stretch> from [condensed] to [expanded] at (0.5) should be [100%]
Fail CSS Transitions: property <font-stretch> from [condensed] to [expanded] at (0.75) should be [112.5%]
Fail CSS Transitions: property <font-stretch> from [condensed] to [expanded] at (1) should be [125%]
Fail CSS Transitions with transition: all: property <font-stretch> from [condensed] to [expanded] at (0) should be [75%]
Fail CSS Transitions with transition: all: property <font-stretch> from [condensed] to [expanded] at (0.25) should be [87.5%]
Fail CSS Transitions with transition: all: property <font-stretch> from [condensed] to [expanded] at (0.5) should be [100%]
Fail CSS Transitions with transition: all: property <font-stretch> from [condensed] to [expanded] at (0.75) should be [112.5%]
Fail CSS Transitions with transition: all: property <font-stretch> from [condensed] to [expanded] at (1) should be [125%]
Fail CSS Animations: property <font-stretch> from [condensed] to [expanded] at (0) should be [75%]
Fail CSS Animations: property <font-stretch> from [condensed] to [expanded] at (0.25) should be [87.5%]
Fail CSS Animations: property <font-stretch> from [condensed] to [expanded] at (0.5) should be [100%]
Fail CSS Animations: property <font-stretch> from [condensed] to [expanded] at (0.75) should be [112.5%]
Fail CSS Animations: property <font-stretch> from [condensed] to [expanded] at (1) should be [125%]
Fail Web Animations: property <font-stretch> from [condensed] to [expanded] at (0) should be [75%]
Fail Web Animations: property <font-stretch> from [condensed] to [expanded] at (0.25) should be [87.5%]
Fail Web Animations: property <font-stretch> from [condensed] to [expanded] at (0.5) should be [100%]
Fail Web Animations: property <font-stretch> from [condensed] to [expanded] at (0.75) should be [112.5%]
Fail Web Animations: property <font-stretch> from [condensed] to [expanded] at (1) should be [125%]
Fail CSS Transitions: property <font-stretch> from [semi-condensed] to [semi-expanded] at (0) should be [87.5%]
Fail CSS Transitions: property <font-stretch> from [semi-condensed] to [semi-expanded] at (0.5) should be [100%]
Fail CSS Transitions: property <font-stretch> from [semi-condensed] to [semi-expanded] at (1) should be [112.5%]
Fail CSS Transitions with transition: all: property <font-stretch> from [semi-condensed] to [semi-expanded] at (0) should be [87.5%]
Fail CSS Transitions with transition: all: property <font-stretch> from [semi-condensed] to [semi-expanded] at (0.5) should be [100%]
Fail CSS Transitions with transition: all: property <font-stretch> from [semi-condensed] to [semi-expanded] at (1) should be [112.5%]
Fail CSS Animations: property <font-stretch> from [semi-condensed] to [semi-expanded] at (0) should be [87.5%]
Fail CSS Animations: property <font-stretch> from [semi-condensed] to [semi-expanded] at (0.5) should be [100%]
Fail CSS Animations: property <font-stretch> from [semi-condensed] to [semi-expanded] at (1) should be [112.5%]
Fail Web Animations: property <font-stretch> from [semi-condensed] to [semi-expanded] at (0) should be [87.5%]
Fail Web Animations: property <font-stretch> from [semi-condensed] to [semi-expanded] at (0.5) should be [100%]
Fail Web Animations: property <font-stretch> from [semi-condensed] to [semi-expanded] at (1) should be [112.5%]
Fail CSS Transitions: property <font-stretch> from [normal] to [extra-expanded] at (0) should be [100%]
Fail CSS Transitions: property <font-stretch> from [normal] to [extra-expanded] at (0.25) should be [112.5%]
Fail CSS Transitions: property <font-stretch> from [normal] to [extra-expanded] at (0.5) should be [125%]
Fail CSS Transitions: property <font-stretch> from [normal] to [extra-expanded] at (1) should be [150%]
Fail CSS Transitions with transition: all: property <font-stretch> from [normal] to [extra-expanded] at (0) should be [100%]
Fail CSS Transitions with transition: all: property <font-stretch> from [normal] to [extra-expanded] at (0.25) should be [112.5%]
Fail CSS Transitions with transition: all: property <font-stretch> from [normal] to [extra-expanded] at (0.5) should be [125%]
Fail CSS Transitions with transition: all: property <font-stretch> from [normal] to [extra-expanded] at (1) should be [150%]
Fail CSS Animations: property <font-stretch> from [normal] to [extra-expanded] at (0) should be [100%]
Fail CSS Animations: property <font-stretch> from [normal] to [extra-expanded] at (0.25) should be [112.5%]
Fail CSS Animations: property <font-stretch> from [normal] to [extra-expanded] at (0.5) should be [125%]
Fail CSS Animations: property <font-stretch> from [normal] to [extra-expanded] at (1) should be [150%]
Fail Web Animations: property <font-stretch> from [normal] to [extra-expanded] at (0) should be [100%]
Fail Web Animations: property <font-stretch> from [normal] to [extra-expanded] at (0.25) should be [112.5%]
Fail Web Animations: property <font-stretch> from [normal] to [extra-expanded] at (0.5) should be [125%]
Fail Web Animations: property <font-stretch> from [normal] to [extra-expanded] at (1) should be [150%]
Fail An interpolation to inherit updates correctly on a parent style change.

View File

@ -0,0 +1,10 @@
Harness status: OK
Found 4 tests
2 Pass
2 Fail
Pass Keywords should appear in serialization of font and fontStretch
Fail Percentages which can be transformed into keywords should be for serialization of font, but not of fontStretch
Pass Percentages which cannot be transformed into keywords should prevent the font shorthand from serializing, but not fontStretch
Fail calc() transformation into keywords

View File

@ -0,0 +1,194 @@
Harness status: OK
Found 188 tests
160 Pass
28 Fail
Pass Setting font-family to sans-serif should not prevent the font shorthand from serializing in specified style
Pass Setting font-family to sans-serif should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant to initial should prevent the font shorthand from serializing in specified style
Pass Setting font-variant to initial should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant to inherit should prevent the font shorthand from serializing in specified style
Pass Setting font-variant to inherit should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant to unset should prevent the font shorthand from serializing in specified style
Pass Setting font-variant to unset should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant to revert should prevent the font shorthand from serializing in specified style
Pass Setting font-variant to revert should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant to revert-layer should prevent the font shorthand from serializing in specified style
Pass Setting font-variant to revert-layer should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant to normal should not prevent the font shorthand from serializing in specified style
Pass Setting font-variant to normal should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant to none should prevent the font shorthand from serializing in specified style
Pass Setting font-variant to none should prevent the font shorthand from serializing in computed style
Pass Setting font-variant to small-caps should not prevent the font shorthand from serializing in specified style
Pass Setting font-variant to small-caps should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant to all-small-caps should prevent the font shorthand from serializing in specified style
Pass Setting font-variant to all-small-caps should prevent the font shorthand from serializing in computed style
Pass Setting font-variant-caps to initial should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-caps to initial should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-caps to inherit should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-caps to inherit should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-caps to unset should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-caps to unset should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-caps to revert should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-caps to revert should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-caps to revert-layer should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-caps to revert-layer should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-caps to small-caps should not prevent the font shorthand from serializing in specified style
Pass Setting font-variant-caps to small-caps should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-caps to all-small-caps should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-caps to all-small-caps should prevent the font shorthand from serializing in computed style
Pass Setting font-stretch to initial should prevent the font shorthand from serializing in specified style
Pass Setting font-stretch to initial should not prevent the font shorthand from serializing in computed style
Pass Setting font-stretch to inherit should prevent the font shorthand from serializing in specified style
Pass Setting font-stretch to inherit should not prevent the font shorthand from serializing in computed style
Pass Setting font-stretch to unset should prevent the font shorthand from serializing in specified style
Pass Setting font-stretch to unset should not prevent the font shorthand from serializing in computed style
Pass Setting font-stretch to revert should prevent the font shorthand from serializing in specified style
Pass Setting font-stretch to revert should not prevent the font shorthand from serializing in computed style
Pass Setting font-stretch to revert-layer should prevent the font shorthand from serializing in specified style
Pass Setting font-stretch to revert-layer should not prevent the font shorthand from serializing in computed style
Pass Setting font-stretch to normal should not prevent the font shorthand from serializing in specified style
Pass Setting font-stretch to normal should not prevent the font shorthand from serializing in computed style
Pass Setting font-stretch to 95% should prevent the font shorthand from serializing in specified style
Pass Setting font-stretch to 95% should prevent the font shorthand from serializing in computed style
Fail Setting font-kerning to initial should prevent the font shorthand from serializing in specified style
Pass Setting font-kerning to initial should not prevent the font shorthand from serializing in computed style
Fail Setting font-kerning to inherit should prevent the font shorthand from serializing in specified style
Pass Setting font-kerning to inherit should not prevent the font shorthand from serializing in computed style
Fail Setting font-kerning to unset should prevent the font shorthand from serializing in specified style
Pass Setting font-kerning to unset should not prevent the font shorthand from serializing in computed style
Fail Setting font-kerning to revert should prevent the font shorthand from serializing in specified style
Pass Setting font-kerning to revert should not prevent the font shorthand from serializing in computed style
Fail Setting font-kerning to revert-layer should prevent the font shorthand from serializing in specified style
Pass Setting font-kerning to revert-layer should not prevent the font shorthand from serializing in computed style
Pass Setting font-kerning to auto should not prevent the font shorthand from serializing in specified style
Pass Setting font-kerning to auto should not prevent the font shorthand from serializing in computed style
Fail Setting font-kerning to normal should prevent the font shorthand from serializing in specified style
Fail Setting font-kerning to normal should prevent the font shorthand from serializing in computed style
Pass Setting font-variant-ligatures to initial should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-ligatures to initial should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-ligatures to inherit should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-ligatures to inherit should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-ligatures to unset should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-ligatures to unset should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-ligatures to revert should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-ligatures to revert should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-ligatures to revert-layer should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-ligatures to revert-layer should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-ligatures to normal should not prevent the font shorthand from serializing in specified style
Pass Setting font-variant-ligatures to normal should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-ligatures to none should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-ligatures to none should prevent the font shorthand from serializing in computed style
Pass Setting font-variant-position to initial should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-position to initial should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-position to inherit should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-position to inherit should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-position to unset should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-position to unset should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-position to revert should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-position to revert should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-position to revert-layer should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-position to revert-layer should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-position to normal should not prevent the font shorthand from serializing in specified style
Pass Setting font-variant-position to normal should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-position to sub should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-position to sub should prevent the font shorthand from serializing in computed style
Pass Setting font-variant-numeric to initial should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-numeric to initial should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-numeric to inherit should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-numeric to inherit should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-numeric to unset should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-numeric to unset should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-numeric to revert should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-numeric to revert should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-numeric to revert-layer should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-numeric to revert-layer should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-numeric to normal should not prevent the font shorthand from serializing in specified style
Pass Setting font-variant-numeric to normal should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-numeric to ordinal should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-numeric to ordinal should prevent the font shorthand from serializing in computed style
Pass Setting font-variant-alternates to initial should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-alternates to initial should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-alternates to inherit should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-alternates to inherit should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-alternates to unset should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-alternates to unset should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-alternates to revert should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-alternates to revert should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-alternates to revert-layer should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-alternates to revert-layer should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-alternates to normal should not prevent the font shorthand from serializing in specified style
Pass Setting font-variant-alternates to normal should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-alternates to historical-forms should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-alternates to historical-forms should prevent the font shorthand from serializing in computed style
Pass Setting font-variant-east-asian to initial should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-east-asian to initial should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-east-asian to inherit should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-east-asian to inherit should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-east-asian to unset should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-east-asian to unset should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-east-asian to revert should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-east-asian to revert should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-east-asian to revert-layer should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-east-asian to revert-layer should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-east-asian to normal should not prevent the font shorthand from serializing in specified style
Pass Setting font-variant-east-asian to normal should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-east-asian to full-width should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-east-asian to full-width should prevent the font shorthand from serializing in computed style
Pass Setting font-variant-emoji to initial should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-emoji to initial should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-emoji to inherit should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-emoji to inherit should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-emoji to unset should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-emoji to unset should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-emoji to revert should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-emoji to revert should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-emoji to revert-layer should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-emoji to revert-layer should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-emoji to normal should not prevent the font shorthand from serializing in specified style
Pass Setting font-variant-emoji to normal should not prevent the font shorthand from serializing in computed style
Pass Setting font-variant-emoji to text should prevent the font shorthand from serializing in specified style
Pass Setting font-variant-emoji to text should prevent the font shorthand from serializing in computed style
Fail Setting font-feature-settings to initial should prevent the font shorthand from serializing in specified style
Pass Setting font-feature-settings to initial should not prevent the font shorthand from serializing in computed style
Fail Setting font-feature-settings to inherit should prevent the font shorthand from serializing in specified style
Pass Setting font-feature-settings to inherit should not prevent the font shorthand from serializing in computed style
Fail Setting font-feature-settings to unset should prevent the font shorthand from serializing in specified style
Pass Setting font-feature-settings to unset should not prevent the font shorthand from serializing in computed style
Fail Setting font-feature-settings to revert should prevent the font shorthand from serializing in specified style
Pass Setting font-feature-settings to revert should not prevent the font shorthand from serializing in computed style
Fail Setting font-feature-settings to revert-layer should prevent the font shorthand from serializing in specified style
Pass Setting font-feature-settings to revert-layer should not prevent the font shorthand from serializing in computed style
Pass Setting font-feature-settings to normal should not prevent the font shorthand from serializing in specified style
Pass Setting font-feature-settings to normal should not prevent the font shorthand from serializing in computed style
Fail Setting font-feature-settings to "sinf" should prevent the font shorthand from serializing in specified style
Fail Setting font-feature-settings to "sinf" should prevent the font shorthand from serializing in computed style
Fail Setting font-language-override to initial should prevent the font shorthand from serializing in specified style
Pass Setting font-language-override to initial should not prevent the font shorthand from serializing in computed style
Fail Setting font-language-override to inherit should prevent the font shorthand from serializing in specified style
Pass Setting font-language-override to inherit should not prevent the font shorthand from serializing in computed style
Fail Setting font-language-override to unset should prevent the font shorthand from serializing in specified style
Pass Setting font-language-override to unset should not prevent the font shorthand from serializing in computed style
Fail Setting font-language-override to revert should prevent the font shorthand from serializing in specified style
Pass Setting font-language-override to revert should not prevent the font shorthand from serializing in computed style
Fail Setting font-language-override to revert-layer should prevent the font shorthand from serializing in specified style
Pass Setting font-language-override to revert-layer should not prevent the font shorthand from serializing in computed style
Pass Setting font-language-override to normal should not prevent the font shorthand from serializing in specified style
Pass Setting font-language-override to normal should not prevent the font shorthand from serializing in computed style
Fail Setting font-language-override to "SRB" should prevent the font shorthand from serializing in specified style
Fail Setting font-language-override to "SRB" should prevent the font shorthand from serializing in computed style
Fail Setting font-variation-settings to initial should prevent the font shorthand from serializing in specified style
Pass Setting font-variation-settings to initial should not prevent the font shorthand from serializing in computed style
Fail Setting font-variation-settings to inherit should prevent the font shorthand from serializing in specified style
Pass Setting font-variation-settings to inherit should not prevent the font shorthand from serializing in computed style
Fail Setting font-variation-settings to unset should prevent the font shorthand from serializing in specified style
Pass Setting font-variation-settings to unset should not prevent the font shorthand from serializing in computed style
Fail Setting font-variation-settings to revert should prevent the font shorthand from serializing in specified style
Pass Setting font-variation-settings to revert should not prevent the font shorthand from serializing in computed style
Fail Setting font-variation-settings to revert-layer should prevent the font shorthand from serializing in specified style
Pass Setting font-variation-settings to revert-layer should not prevent the font shorthand from serializing in computed style
Pass Setting font-variation-settings to normal should not prevent the font shorthand from serializing in specified style
Pass Setting font-variation-settings to normal should not prevent the font shorthand from serializing in computed style
Fail Setting font-variation-settings to "aaaa" 1 should prevent the font shorthand from serializing in specified style
Fail Setting font-variation-settings to "aaaa" 1 should prevent the font shorthand from serializing in computed style

View File

@ -0,0 +1,8 @@
Harness status: OK
Found 3 tests
3 Fail
Fail Property font-weight value 'calc(sign(1rem - 1px) * 10)'
Fail Property font-weight value 'calc(sign(1rem - 1px) * -10000)'
Fail Property font-weight value 'calc(sign(1rem - 1px) * 10000)'

View File

@ -0,0 +1,28 @@
Harness status: OK
Found 22 tests
10 Pass
12 Fail
Pass Font shorthand: Font size specified as calc()
Fail Font shorthand: Font weight specified as number
Pass Font shorthand: Font weight specified as number, value less than 1
Pass Font shorthand: Font weight specified as number, value greater than 1000
Fail Font shorthand: Font weight specified as calc()
Fail Font shorthand: Font weight specified as calc(), value smaller than 1
Fail Font shorthand: Font weight specified as calc(), value greater than 1000
Fail Font shorthand: 'oblique' with positive angle
Fail Font shorthand: 'oblique' with negative angle
Pass Font shorthand: 'oblique' without slant angle
Pass Font shorthand: 'oblique' with positive angle, value out of range
Pass Font shorthand: 'oblique' with negative angle, value out of range
Pass Font shorthand: 'oblique' followed by valid small weight
Pass Font shorthand: 'oblique' followed by valid large weight
Fail Font shorthand: 'oblique' with positive angle followed by valid weight
Fail Font shorthand: 'oblique' with negative angle followed by valid weight
Pass Font shorthand: 'oblique' followed by valid calc() weight
Fail Font shorthand: 'oblique' with angle followed by valid calc() weight
Fail Font shorthand: 'oblique' followed by a to-be-clamped calc() weight
Pass Font shorthand: calc() weight folowed by 'oblique'
Fail Font shorthand: calc() weight folowed by 'oblique' and slant angle
Fail Font shorthand: To-be-clamped calc() weight folowed by 'oblique' and slant angle

View File

@ -0,0 +1,57 @@
Harness status: OK
Found 51 tests
39 Pass
12 Fail
Pass @supports: 100 - only percentages, not numbers allowed
Pass @supports: -1% - negative values are illegal
Pass @supports: 0% - zero is legal
Pass @getComputedStyle: 0% - zero is legal
Pass @supports: 1% - legal percentage
Pass @getComputedStyle: 1% - legal percentage
Pass @supports: 10% - legal percentage
Pass @getComputedStyle: 10% - legal percentage
Pass @supports: 100% - legal percentage
Pass @getComputedStyle: 100% - legal percentage
Pass @supports: 1000% - legal percentage
Pass @getComputedStyle: 1000% - legal percentage
Pass @supports: 1e9% - huge legal percentage
Fail @getComputedStyle: 1e9% - huge legal percentage
Pass @supports: ultra-condensed - legal enum
Fail @getComputedStyle: ultra-condensed - legal enum
Pass @supports: extra-condensed - legal enum
Fail @getComputedStyle: extra-condensed - legal enum
Pass @supports: condensed - legal enum
Fail @getComputedStyle: condensed - legal enum
Pass @supports: semi-condensed - legal enum
Fail @getComputedStyle: semi-condensed - legal enum
Pass @supports: normal - legal enum
Fail @getComputedStyle: normal - legal enum
Pass @supports: semi-expanded - legal enum
Fail @getComputedStyle: semi-expanded - legal enum
Pass @supports: expanded - legal enum
Fail @getComputedStyle: expanded - legal enum
Pass @supports: extra-expanded - legal enum
Fail @getComputedStyle: extra-expanded - legal enum
Pass @supports: ultra-expanded - legal enum
Fail @getComputedStyle: ultra-expanded - legal enum
Pass @supports: narrower - deprecated
Pass @supports: wider - deprecated
Pass @supports: calc(200.5%) - Simple calc value
Pass @getComputedStyle: calc(200.5%) - Simple calc value
Pass @supports: calc(50%*2 - 20%) - Valid calc expression
Pass @getComputedStyle: calc(50%*2 - 20%) - Valid calc expression
Pass @supports: calc(-100%) - Negative calc value (to be clamped)
Pass @getComputedStyle: calc(-100%) - Negative calc value (to be clamped)
Pass @supports: calc(50% - 50%*2) - Negative calc expression (to be clamped)
Pass @getComputedStyle: calc(50% - 50%*2) - Negative calc expression (to be clamped)
Pass @supports: calc(100) - Unit-less calc value
Pass @supports: calc(100px) - Calc value with units
Pass @supports: 100% 700% - Extra percentage after numeric value
Pass @supports: 100% 100 - Extra content after numeric value
Pass @supports: condensed expanded - Extra content after keyword value
Pass @supports: calc(100%) 100% - Extra content after calc value
Pass Test font-stretch for overridden number condensed
Fail Test font-stretch for overridden enum name resolved to number condensed
Fail Test font-stretch for inherited named enum resolved to number condensed

View File

@ -0,0 +1,49 @@
Harness status: OK
Found 43 tests
40 Pass
3 Fail
Pass Font-style (supports): 'italic' is valid
Pass Font-style (supports): 'italic' followed by angle is invalid
Pass Font-style (supports): 'italic' followed by non-number is invalid
Pass Font-style (supports): 'oblique' is valid
Pass Font-style (supports): 'oblique' followed by zero degrees is valid
Pass Font-style (supports): 'oblique' followed by positive angle in degrees is valid
Pass Font-style (supports): 'oblique' followed by positive angle in radians is valid
Pass Font-style (supports): 'oblique' followed by positive angle in gradians is valid
Pass Font-style (supports): 'oblique' followed by positive angle in turns is valid
Pass Font-style (supports): 'oblique' followed by number with invalid unit type is in valid
Pass Font-style (supports): 'oblique' followed by negative angle is valid
Pass Font-style (supports): 'oblique' followed by fractional angle is valid
Pass Font-style (supports): 'oblique' followed by maxumum 90 degree angle is valid
Pass Font-style (supports): 'oblique' followed by minimum -90 degree angle is valid
Pass Font-style (supports): 'oblique' followed by positive out of range angle is in invalid
Pass Font-style (supports): 'oblique' followed by negative out of range angle is in invalid
Pass Font-style (supports): 'oblique' followed by unit-less value is invalid
Pass Font-style (supports): 'oblique' followed by positive angle is valid
Pass Font-style (supports): 'oblique' followed by non-number is invalid
Pass Font-style (supports): 'oblique' and angle followed by non-number is invalid
Pass Font-style (supports): 'oblique' followed by isolated minus is invalid
Pass Font-style (supports): 'oblique' followed by minus and angle separated by space is invalid
Pass Font-style (supports): 'oblique' followed by minus and non-number is invalid
Pass Font-style (supports): 'oblique' followed by calc is valid
Pass Font-style (supports): 'oblique' followed by calc is valid even if it must be clamped (no computation)
Pass Font-style (supports): 'oblique' followed by calc is valid even if it must be clamped (with computation)
Pass Font-style (supports): 'oblique' followed by calc is valid even if it mixes units (with computation)
Pass Font-style (computed): 'italic' is valid
Pass Font-style (computed): 'oblique' is valid
Pass Font-style (computed): 'oblique' followed by zero degrees is valid
Pass Font-style (computed): 'oblique' followed by positive angle in degrees is valid
Pass Font-style (computed): 'oblique' followed by positive angle in radians is valid
Pass Font-style (computed): 'oblique' followed by positive angle in gradians is valid
Pass Font-style (computed): 'oblique' followed by positive angle in turns is valid
Pass Font-style (computed): 'oblique' followed by negative angle is valid
Pass Font-style (computed): 'oblique' followed by fractional angle is valid
Pass Font-style (computed): 'oblique' followed by maxumum 90 degree angle is valid
Pass Font-style (computed): 'oblique' followed by minimum -90 degree angle is valid
Pass Font-style (computed): 'oblique' followed by positive angle is valid
Pass Font-style (computed): 'oblique' followed by calc is valid
Fail Font-style (computed): 'oblique' followed by calc is valid even if it must be clamped (no computation)
Fail Font-style (computed): 'oblique' followed by calc is valid even if it must be clamped (with computation)
Fail Font-style (computed): 'oblique' followed by calc is valid even if it mixes units (with computation)

View File

@ -0,0 +1,7 @@
Harness status: OK
Found 2 tests
2 Pass
Pass font-weight animation
Pass font-weight transition

View File

@ -0,0 +1,28 @@
Harness status: OK
Found 22 tests
4 Pass
18 Fail
Fail Test lighter font-weight for base weight 99
Fail Test bolder font-weight for base weight 99
Fail Test lighter font-weight for base weight 100
Fail Test bolder font-weight for base weight 100
Fail Test lighter font-weight for base weight 349
Fail Test bolder font-weight for base weight 349
Fail Test lighter font-weight for base weight 350
Pass Test bolder font-weight for base weight 350
Fail Test lighter font-weight for base weight 549
Pass Test bolder font-weight for base weight 549
Pass Test lighter font-weight for base weight 550
Fail Test bolder font-weight for base weight 550
Pass Test lighter font-weight for base weight 749
Fail Test bolder font-weight for base weight 749
Fail Test lighter font-weight for base weight 750
Fail Test bolder font-weight for base weight 750
Fail Test lighter font-weight for base weight 899
Fail Test bolder font-weight for base weight 899
Fail Test lighter font-weight for base weight 900
Fail Test bolder font-weight for base weight 900
Fail Test lighter font-weight for base weight 901
Fail Test bolder font-weight for base weight 901

View File

@ -0,0 +1,32 @@
Harness status: OK
Found 26 tests
21 Pass
5 Fail
Pass @supports: Values that are not multiple of 100 should be parsed successfully
Pass @supports: Non-integer Values should be parsed successfully
Pass @supports: Minimum allowed value should be parsed successfully
Pass @supports: Values below minimum should be rejected
Pass @supports: Values below zero should be rejected
Pass @supports: Maximum allowed value should be parsed successfully
Pass @supports: Values above maximum should be rejected
Pass @supports: Simple calc value
Pass @supports: Negative simple calc value (to be clamped)
Pass @supports: Out-of-range simple calc value (to be clamped)
Pass @supports: Valid calc expression
Pass @supports: Valid calc expression with out-of-range value (to be clamped)
Pass @supports: Valid calc expression with units
Pass @supports: Extra number after numeric value
Pass @supports: Extra content after numeric value
Pass @supports: Extra content after keyword value
Pass @supports: Extra content after calc value
Pass Computed style: Values that are not multiple of 100 should be parsed successfully
Fail Computed style: Non-integer Values should be parsed successfully
Pass Computed style: Minimum allowed value should be parsed successfully
Pass Computed style: Maximum allowed value should be parsed successfully
Fail Computed style: Simple calc value
Fail Computed style: Negative simple calc value (to be clamped)
Fail Computed style: Out-of-range simple calc value (to be clamped)
Pass Computed style: Valid calc expression
Fail Computed style: Valid calc expression with out-of-range value (to be clamped)

View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<style>
#foo {
font-style: oblique calc(sign(1em - 1px) * 1rad);
}
</style>
<div id="foo"></div>
<script src="../include.js"></script>
<script>
test(() => {
println(getComputedStyle(foo).fontStyle);
});
</script>
</html>

View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<div style="font-weight: 400">
<div id="foo"></div>
</div>
<script src="../include.js"></script>
<script>
test(() => {
const anim = foo.animate([{ fontWeight: "normal" }, { fontWeight: "bolder" }], 1000);
anim.pause();
anim.currentTime = 500;
println(getComputedStyle(foo).fontWeight);
});
</script>
</html>

View File

@ -0,0 +1,164 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>font-size interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-size">
<meta name="assert" content="font-size supports animation as length">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/interpolation-testcommon.js"></script>
<style>
.container {
font-stretch: ultra-expanded;
}
.container2 {
font-stretch: ultra-condensed;
}
.target {
display: inline-block;
font: 100px sans-serif;
font-stretch: normal;
}
.expected {
color: green;
margin-right: 30px;
}
</style>
<body>
<template id="target-template">
<span class="container">
<div class="target">TT</div>
</span>
</template>
<span id="inv-container" class="container">
<div id="inv-target" class="target">TT</div>
</span>
</body>
<script>
test_interpolation({
property: 'font-stretch',
from: '100%',
to: '200%'
}, [
{at: -2, expect: '0%'}, // CSS font-stretch can't be negative.
{at: -0.25, expect: '75%'},
{at: 0, expect: '100%'},
{at: 0.3, expect: '130%'},
{at: 0.6, expect: '160%'},
{at: 1, expect: '200%'},
{at: 1.5, expect: '250%'},
]);
test_interpolation({
property: 'font-stretch',
from: neutralKeyframe,
to: '200%'
}, [
{at: -2, expect: '0%'},
{at: -0.25, expect: '75%'},
{at: 0, expect: '100%'},
{at: 0.3, expect: '130%'},
{at: 0.6, expect: '160%'},
{at: 1, expect: '200%'},
{at: 1.5, expect: '250%'},
]);
test_interpolation({
property: 'font-stretch',
from: 'initial',
to: 'inherit'
}, [
{at: -2, expect: '0%'},
{at: -0.25, expect: '75%'},
{at: 0, expect: '100%'},
{at: 0.3, expect: '130%'},
{at: 0.6, expect: '160%'},
{at: 1, expect: '200%'},
{at: 1.5, expect: '250%'},
]);
// Test interpolation from keywords.
test_interpolation({
property: 'font-stretch',
from: 'normal',
to: 'ultra-expanded'
}, [
{at: -0.25, expect: '75%'},
{at: 0, expect: '100%'},
{at: 0.125, expect: '112.5%'},
{at: 0.25, expect: '125%'},
{at: 0.5, expect: '150%'},
{at: 0.75, expect: '175%'},
{at: 1, expect: '200%'},
]);
test_interpolation({
property: 'font-stretch',
from: 'ultra-condensed',
to: 'condensed'
}, [
{at: 0, expect: '50%'},
{at: 0.5, expect: '62.5%'},
{at: 1, expect: '75%'},
]);
test_interpolation({
property: 'font-stretch',
from: 'extra-condensed',
to: 'semi-condensed'
}, [
{at: 0, expect: '62.5%'},
{at: 0.5, expect: '75%'},
{at: 1, expect: '87.5%'},
]);
test_interpolation({
property: 'font-stretch',
from: 'condensed',
to: 'expanded'
}, [
{at: 0, expect: '75%'},
{at: 0.25, expect: '87.5%'},
{at: 0.5, expect: '100%'},
{at: 0.75, expect: '112.5%'},
{at: 1, expect: '125%'},
]);
test_interpolation({
property: 'font-stretch',
from: 'semi-condensed',
to: 'semi-expanded'
}, [
{at: 0, expect: '87.5%'},
{at: 0.5, expect: '100%'},
{at: 1, expect: '112.5%'},
]);
test_interpolation({
property: 'font-stretch',
from: 'normal',
to: 'extra-expanded'
}, [
{at: 0, expect: '100%'},
{at: 0.25, expect: '112.5%'},
{at: 0.5, expect: '125%'},
{at: 1, expect: '150%'},
]);
test(t => {
var container = document.getElementById('inv-container');
var target = document.getElementById('inv-target');
var anim = target.animate({fontStretch: ['normal', 'inherit']}, 1000);
anim.pause();
anim.currentTime = 500;
assert_equals(getComputedStyle(target).fontStretch, '150%');
container.setAttribute('class', 'container2');
assert_equals(getComputedStyle(target).fontStretch, '75%');
}, "An interpolation to inherit updates correctly on a parent style change.");
</script>

View File

@ -0,0 +1,101 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Test: font shorthand serialization with font-stretch values</title>
<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#propdef-font">
<link rel="help" href="https://drafts.csswg.org/cssom-1/#serializing-css-values">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<div id="test" style="font: medium serif"></div>
<script>
test(function() {
const div = document.getElementById("test");
div.style.fontStretch = "ultra-condensed";
assert_equals(div.style.fontStretch, "ultra-condensed");
assert_equals(div.style.font, "ultra-condensed medium serif");
div.style.fontStretch = "extra-condensed";
assert_equals(div.style.fontStretch, "extra-condensed");
assert_equals(div.style.font, "extra-condensed medium serif");
div.style.fontStretch = "condensed";
assert_equals(div.style.fontStretch, "condensed");
assert_equals(div.style.font, "condensed medium serif");
div.style.fontStretch = "semi-condensed";
assert_equals(div.style.fontStretch, "semi-condensed");
assert_equals(div.style.font, "semi-condensed medium serif");
div.style.fontStretch = "normal";
assert_equals(div.style.fontStretch, "normal");
assert_equals(div.style.font, "medium serif", "The keyword normal should be omitted");
div.style.fontStretch = "semi-expanded";
assert_equals(div.style.fontStretch, "semi-expanded");
assert_equals(div.style.font, "semi-expanded medium serif");
div.style.fontStretch = "expanded";
assert_equals(div.style.fontStretch, "expanded");
assert_equals(div.style.font, "expanded medium serif");
div.style.fontStretch = "extra-expanded";
assert_equals(div.style.fontStretch, "extra-expanded");
assert_equals(div.style.font, "extra-expanded medium serif");
div.style.fontStretch = "ultra-expanded";
assert_equals(div.style.fontStretch, "ultra-expanded");
assert_equals(div.style.font, "ultra-expanded medium serif");
}, "Keywords should appear in serialization of font and fontStretch");
test(function() {
const div = document.getElementById("test");
div.style.fontStretch = "50%";
assert_equals(div.style.fontStretch, "50%");
assert_equals(div.style.font, "ultra-condensed medium serif");
div.style.fontStretch = "62.5%";
assert_equals(div.style.fontStretch, "62.5%");
assert_equals(div.style.font, "extra-condensed medium serif");
div.style.fontStretch = "75%";
assert_equals(div.style.fontStretch, "75%");
assert_equals(div.style.font, "condensed medium serif");
div.style.fontStretch = "87.5%";
assert_equals(div.style.fontStretch, "87.5%");
assert_equals(div.style.font, "semi-condensed medium serif");
div.style.fontStretch = "100%";
assert_equals(div.style.fontStretch, "100%");
assert_equals(div.style.font, "medium serif", "The keyword normal should be omitted");
div.style.fontStretch = "112.5%";
assert_equals(div.style.fontStretch, "112.5%");
assert_equals(div.style.font, "semi-expanded medium serif");
div.style.fontStretch = "125%";
assert_equals(div.style.fontStretch, "125%");
assert_equals(div.style.font, "expanded medium serif");
div.style.fontStretch = "150%";
assert_equals(div.style.fontStretch, "150%");
assert_equals(div.style.font, "extra-expanded medium serif");
div.style.fontStretch = "200%";
assert_equals(div.style.fontStretch, "200%");
assert_equals(div.style.font, "ultra-expanded medium serif");
div.style.fontStretch = "50.00000%";
assert_equals(div.style.fontStretch, "50%");
assert_equals(div.style.font, "ultra-condensed medium serif");
}, "Percentages which can be transformed into keywords should be for serialization of font, but not of fontStretch");
test(function() {
const div = document.getElementById("test");
div.style.fontStretch = "25%";
assert_equals(div.style.fontStretch, "25%");
assert_equals(div.style.font, "");
div.style.fontStretch = "101%";
assert_equals(div.style.fontStretch, "101%");
assert_equals(div.style.font, "");
div.style.fontStretch = "50.01%";
assert_equals(div.style.fontStretch, "50.01%");
assert_equals(div.style.font, "");
}, "Percentages which cannot be transformed into keywords should prevent the font shorthand from serializing, but not fontStretch");
test(function() {
const div = document.getElementById("test");
// This isn't well-specified, but appears to be consistent across browsers.
div.style.fontStretch = "calc(50%)";
assert_equals(div.style.fontStretch, "calc(50%)");
assert_equals(div.style.font, "ultra-condensed medium serif");
div.style.fontStretch = "calc(50% + 25% * sign(100em - 1px))";
assert_equals(div.style.fontStretch, "calc(50% + (25% * sign(100em - 1px)))");
assert_equals(div.style.font, "");
}, "calc() transformation into keywords");
</script>

View File

@ -0,0 +1,96 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Test: font shorthand serialization prevention for font subproperty values the shorthand cannot express</title>
<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#propdef-font">
<link rel="help" href="https://drafts.csswg.org/cssom-1/#serializing-css-values">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<div id="test"></div>
<script>
function is_property_supported(property) {
const element = document.getElementById('test')
element.style = ''
element.style = property + ': initial'
return element.style[property] == 'initial'
}
function overwrite_font_shorthand(property, value) {
const element = document.getElementById('test')
element.style = ''
element.style.font = '16px serif'
element.style[property] = value
}
function test_font_shorthand_specified_serializable_after_setting_subproperty(property, value) {
test(() => {
overwrite_font_shorthand(property, value)
assert_not_equals(document.getElementById('test').style.font, '')
}, 'Setting ' + property + ' to ' + value + ' should not prevent the font shorthand from serializing in specified style')
}
function test_font_shorthand_computed_serializable_after_setting_subproperty(property, value) {
test(() => {
overwrite_font_shorthand(property, value)
assert_not_equals(getComputedStyle(document.getElementById('test')).font, '')
}, 'Setting ' + property + ' to ' + value + ' should not prevent the font shorthand from serializing in computed style')
}
function test_font_shorthand_specified_unserializable_after_setting_subproperty(property, value) {
test(() => {
overwrite_font_shorthand(property, value)
assert_equals(document.getElementById('test').style.font, '')
}, 'Setting ' + property + ' to ' + value + ' should prevent the font shorthand from serializing in specified style')
}
function test_font_shorthand_computed_unserializable_after_setting_subproperty(property, value) {
test(() => {
overwrite_font_shorthand(property, value)
assert_equals(getComputedStyle(document.getElementById('test')).font, '')
}, 'Setting ' + property + ' to ' + value + ' should prevent the font shorthand from serializing in computed style')
}
function test_font_shorthand_serializable_after_setting_subproperty(property, value) {
test_font_shorthand_specified_serializable_after_setting_subproperty(property, value)
test_font_shorthand_computed_serializable_after_setting_subproperty(property, value)
}
function test_font_shorthand_unserializable_after_setting_subproperty(property, value) {
test_font_shorthand_specified_unserializable_after_setting_subproperty(property, value)
test_font_shorthand_computed_unserializable_after_setting_subproperty(property, value)
}
function test_font_shorthand_serialization_after_setting_subproperty(property, defaultValue, otherValue) {
if (!is_property_supported(property))
return
const keywords = [ 'initial', 'inherit', 'unset', 'revert', 'revert-layer' ]
keywords.forEach(keyword => {
test_font_shorthand_specified_unserializable_after_setting_subproperty(property, keyword)
test_font_shorthand_computed_serializable_after_setting_subproperty(property, keyword)
});
test_font_shorthand_serializable_after_setting_subproperty(property, defaultValue)
test_font_shorthand_unserializable_after_setting_subproperty(property, otherValue)
}
test_font_shorthand_serializable_after_setting_subproperty('font-family', 'sans-serif')
test_font_shorthand_serialization_after_setting_subproperty('font-variant', 'normal', 'none')
test_font_shorthand_serializable_after_setting_subproperty('font-variant', 'small-caps')
test_font_shorthand_unserializable_after_setting_subproperty('font-variant', 'all-small-caps')
test_font_shorthand_serialization_after_setting_subproperty('font-variant-caps', 'small-caps', 'all-small-caps')
test_font_shorthand_serialization_after_setting_subproperty('font-stretch', 'normal', '95%')
test_font_shorthand_serialization_after_setting_subproperty('font-size-adjust', 'none', '0')
test_font_shorthand_serialization_after_setting_subproperty('font-kerning', 'auto', 'normal')
test_font_shorthand_serialization_after_setting_subproperty('font-variant-ligatures', 'normal', 'none')
test_font_shorthand_serialization_after_setting_subproperty('font-variant-position', 'normal', 'sub')
test_font_shorthand_serialization_after_setting_subproperty('font-variant-numeric', 'normal', 'ordinal')
test_font_shorthand_serialization_after_setting_subproperty('font-variant-alternates', 'normal', 'historical-forms')
test_font_shorthand_serialization_after_setting_subproperty('font-variant-east-asian', 'normal', 'full-width')
test_font_shorthand_serialization_after_setting_subproperty('font-variant-emoji', 'normal', 'text')
test_font_shorthand_serialization_after_setting_subproperty('font-feature-settings', 'normal', '"sinf"')
test_font_shorthand_serialization_after_setting_subproperty('font-language-override', 'normal', '"SRB"')
test_font_shorthand_serialization_after_setting_subproperty('font-optical-sizing', 'auto', 'none')
test_font_shorthand_serialization_after_setting_subproperty('font-variation-settings', 'normal', '"aaaa" 1')
</script>

View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Fonts test: font-weight with CSS sign() function</title>
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-weight-prop">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../css/support/computed-testcommon.js"></script>
<style>
:root {
font-size: 16px;
}
</style>
<div id="target"></div>
<script>
test_computed_value("font-weight", "calc(sign(1rem - 1px) * 10)", "10");
test_computed_value("font-weight", "calc(sign(1rem - 1px) * -10000)", "1");
test_computed_value("font-weight", "calc(sign(1rem - 1px) * 10000)", "1000");
</script>

View File

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html>
<head>
<title>Testing font shorthand for new values introduced in CSS Fonts level 4</title>
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-prop" />
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
</head>
<body>
<div id="shorthand-test">Shorthand test</div>
<script>
testFontShorthand = [
{ value: "calc(24px) Arial", isValid:true, message: "Font size specified as calc()" },
// font-weight as number
{ value: "700.5 24px Arial", isValid:true, expectedWeight:"700.5", message: "Font weight specified as number" },
{ value: "0.9 24px Arial", isValid:false, message: "Font weight specified as number, value less than 1" },
{ value: "1700.5 24px Arial", isValid:false, message: "Font weight specified as number, value greater than 1000" },
// font-weight as calc()
{ value: "calc(900.7 - 200.1 * 2) calc(12px + 12px) Arial", isValid:true, expectedWeight:"500.5", message: "Font weight specified as calc()" },
{ value: "calc(400.5 - 200.1 * 2) 24px Arial", isValid:true, expectedWeight:"1", message: "Font weight specified as calc(), value smaller than 1" },
{ value: "calc(400.5 + 300.1 * 2) 24px Arial", isValid:true, expectedWeight:"1000", message: "Font weight specified as calc(), value greater than 1000" },
// font-style
{ value: "oblique 45deg 24px Arial", isValid:true, expectedStyle: "oblique 45deg", message: "'oblique' with positive angle" },
{ value: "oblique -45deg 24px Arial", isValid:true, expectedStyle: "oblique -45deg", message: "'oblique' with negative angle" },
{ value: "oblique 24px Arial", isValid:true, expectedStyle: "oblique", message: "'oblique' without slant angle" },
{ value: "oblique 100deg 24px Arial", isValid:false, message: "'oblique' with positive angle, value out of range" },
{ value: "oblique -100deg 24px Arial", isValid:false, message: "'oblique' with negative angle, value out of range" },
// font-weight and font-style combined
{ value: "oblique 50 24px Arial", isValid:true, expectedStyle: "oblique", expectedWeight:"50", message: "'oblique' followed by valid small weight" },
{ value: "oblique 500 24px Arial", isValid:true, expectedStyle: "oblique", expectedWeight:"500", message: "'oblique' followed by valid large weight" },
{ value: "oblique 45deg 500 24px Arial", isValid:true, expectedStyle: "oblique 45deg", expectedWeight:"500", message: "'oblique' with positive angle followed by valid weight" },
{ value: "oblique -45deg 500 24px Arial", isValid:true, expectedStyle: "oblique -45deg", expectedWeight:"500", message: "'oblique' with negative angle followed by valid weight" },
// font-weight and font-style combined, with calc()
{ value: "oblique calc(200 + 300) 24px Arial", isValid:true, expectedStyle: "oblique", expectedWeight:"500", message: "'oblique' followed by valid calc() weight" },
{ value: "oblique 30deg calc(200 + 300) 24px Arial", isValid:true, expectedStyle: "oblique 30deg", expectedWeight:"500", message: "'oblique' with angle followed by valid calc() weight" },
{ value: "oblique calc(900 + 300) 24px Arial", isValid:true, expectedStyle: "oblique", expectedWeight:"1000", message: "'oblique' followed by a to-be-clamped calc() weight" },
{ value: "calc(200 + 300) oblique 24px Arial", isValid:true, expectedStyle: "oblique", expectedWeight:"500", message: "calc() weight folowed by 'oblique'" },
{ value: "calc(200 + 300) oblique 45deg 24px Arial", isValid:true, expectedStyle: "oblique 45deg", expectedWeight:"500", message: "calc() weight folowed by 'oblique' and slant angle" },
{ value: "calc(900 + 300) oblique 45deg 24px Arial", isValid:true, expectedStyle: "oblique 45deg", expectedWeight:"1000", message: "To-be-clamped calc() weight folowed by 'oblique' and slant angle" },
];
testFontShorthand.forEach(function (testCase) {
test(() => {
assert_equals(window.CSS.supports("font", testCase.value), testCase.isValid, "Font shorthand: " + testCase.message);
let expectedStyle = (testCase.expectedStyle) ? testCase.expectedStyle : "normal";
let expectedWeight = (testCase.expectedWeight) ? testCase.expectedWeight : "400";
let expectedSize = (testCase.isValid) ? "24px" : "16px";
var testElement = document.getElementById("shorthand-test");
testElement.setAttribute("style", "font:" + testCase.value);
var style = window.getComputedStyle(testElement);
assert_equals(style.fontStyle, expectedStyle, "Font shorthand expected style: " + testCase.message);
assert_equals(style.fontWeight, expectedWeight, "Font shorthand expected weight: " + testCase.message);
assert_equals(style.fontSize, expectedSize, "Font shorthand expected size: " + testCase.message);
}, "Font shorthand: " + testCase.message);
});
</script>
</body>
</html>

View File

@ -0,0 +1,84 @@
<!DOCTYPE html>
<html>
<head>
<title>Testing new font-stretch values introduced in CSS Fonts level 4</title>
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-stretch-prop" />
<script src="../../..//resources/testharness.js"></script>
<script src="../../..//resources/testharnessreport.js"></script>
</head>
<body>
<div id="computedStyleTest">Abc</span></div>
<div id="inheritanceTest"><span style="font-stretch:125%;">Abc</span><span style="font-stretch:expanded;">Abc</span><span style="font-weight: 700;">Abc</span></div>
<script>
testStretchValues = [
{ stretch: "100", expectedComputedStretch: "100%" , expectedIsSupported: false, message: "only percentages, not numbers allowed" },
{ stretch: "-1%", expectedComputedStretch: "" , expectedIsSupported: false, message: "negative values are illegal" },
{ stretch: "0%", expectedComputedStretch: "0%", expectedIsSupported: true, message: "zero is legal" },
{ stretch: "1%", expectedComputedStretch: "1%", expectedIsSupported: true, message: "legal percentage" },
{ stretch: "10%", expectedComputedStretch: "10%", expectedIsSupported: true, message: "legal percentage" },
{ stretch: "100%", expectedComputedStretch: "100%", expectedIsSupported: true, message: "legal percentage" },
{ stretch: "1000%", expectedComputedStretch: "1000%", expectedIsSupported: true, message: "legal percentage" },
{ stretch: "1e9%", expectedComputedStretch: "1e+009%", expectedIsSupported: true, message: "huge legal percentage" },
{ stretch: "ultra-condensed", expectedComputedStretch: "50%", expectedIsSupported: true, message: "legal enum" },
{ stretch: "extra-condensed", expectedComputedStretch: "62.5%", expectedIsSupported: true, message: "legal enum" },
{ stretch: "condensed", expectedComputedStretch: "75%", expectedIsSupported: true, message: "legal enum" },
{ stretch: "semi-condensed", expectedComputedStretch: "87.5%", expectedIsSupported: true, message: "legal enum" },
{ stretch: "normal", expectedComputedStretch: "100%", expectedIsSupported: true, message: "legal enum" },
{ stretch: "semi-expanded", expectedComputedStretch: "112.5%", expectedIsSupported: true, message: "legal enum" },
{ stretch: "expanded", expectedComputedStretch: "125%", expectedIsSupported: true, message: "legal enum" },
{ stretch: "extra-expanded", expectedComputedStretch: "150%", expectedIsSupported: true, message: "legal enum" },
{ stretch: "ultra-expanded", expectedComputedStretch: "200%", expectedIsSupported: true, message: "legal enum" },
{ stretch: "narrower", expectedComputedStretch: "", expectedIsSupported: false, message: "deprecated" },
{ stretch: "wider", expectedComputedStretch: "", expectedIsSupported: false, message: "deprecated" },
{ stretch: "calc(200.5%)", expectedComputedStretch: "200.5%", expectedIsSupported: true, message: "Simple calc value" },
{ stretch: "calc(50%*2 - 20%)", expectedComputedStretch: "80%", expectedIsSupported: true, message: "Valid calc expression" },
{ stretch: "calc(-100%)", expectedComputedStretch: "0%", expectedIsSupported: true, message: "Negative calc value (to be clamped)" },
{ stretch: "calc(50% - 50%*2)", expectedComputedStretch: "0%", expectedIsSupported: true, message: "Negative calc expression (to be clamped)" },
{ stretch: "calc(100)", expectedComputedStretch: "", expectedIsSupported: false, message: "Unit-less calc value" },
{ stretch: "calc(100px)", expectedComputedStretch: "", expectedIsSupported: false, message: "Calc value with units" },
{ stretch: "100% 700%", expectedComputedStretch: "", expectedIsSupported: false, message: "Extra percentage after numeric value" },
{ stretch: "100% 100", expectedComputedStretch: "", expectedIsSupported: false, message: "Extra content after numeric value" },
{ stretch: "condensed expanded",expectedComputedStretch: "", expectedIsSupported: false, message: "Extra content after keyword value" },
{ stretch: "calc(100%) 100%", expectedComputedStretch: "", expectedIsSupported: false, message: "Extra content after calc value" }
];
testStretchValues.forEach(function (element) {
test(() => { assert_equals(window.CSS.supports("font-stretch", element.stretch), element.expectedIsSupported, element.message); }, "@supports: " + element.stretch + " - " + element.message);
// If supported, verify the computed style.
if (element.expectedIsSupported)
{
var testSpan = document.getElementById("computedStyleTest");
testSpan.style.fontStretch = element.stretch;
var actualStretch = window.getComputedStyle(testSpan).fontStretch;
test(() => { assert_equals(actualStretch, element.expectedComputedStretch, element.message); }, "@getComputedStyle: " + element.stretch + " - " + element.message);
}
});
// Verify computed inheritance of nested elements.
{
var base = document.getElementById("inheritanceTest");
var parentStretch = "condensed";
base.style.fontStretch = parentStretch;
test(() => {
var actualStretch = window.getComputedStyle(base.children[0]).fontStretch;
assert_equals(actualStretch, "125%", "Overridden value for " + parentStretch + " should match expected value.");
}, "Test font-stretch for overridden number " + parentStretch);
test(() => {
var actualStretch = window.getComputedStyle(base.children[1]).fontStretch;
assert_equals(actualStretch, "125%", "Inherited value " + parentStretch + " should match expected value.");
}, "Test font-stretch for overridden enum name resolved to number " + parentStretch);
test(() => {
var actualStretch = window.getComputedStyle(base.children[2]).fontStretch;
assert_equals(actualStretch, "75%", "Inherited value " + parentStretch + " should match expected value.");
}, "Test font-stretch for inherited named enum resolved to number " + parentStretch);
}
</script>
</body>
</html>

View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html>
<head>
<title>Testing the new font-style values introduced in CSS Fonts level 4</title>
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-style-prop" />
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
</head>
<body>
<div id="test"></div>
<script>
var testFontStyle = [
{ style: "italic", expectedResult: true, message: "'italic' is valid" },
{ style: "italic 20deg", expectedResult: false, message: "'italic' followed by angle is invalid" },
{ style: "italic a", expectedResult: false, message: "'italic' followed by non-number is invalid" },
{ style: "oblique", expectedResult: true, message: "'oblique' is valid" },
{ style: "oblique 0deg", expectedResult: true, message: "'oblique' followed by zero degrees is valid", expectedValue: "normal" },
{ style: "oblique 20deg", expectedResult: true, message: "'oblique' followed by positive angle in degrees is valid" },
{ style: "oblique 0.5rad", expectedResult: true, message: "'oblique' followed by positive angle in radians is valid", expectedValue: /^oblique 28\.\d*deg$/ },
{ style: "oblique 20grad", expectedResult: true, message: "'oblique' followed by positive angle in gradians is valid", expectedValue: "oblique 18deg" },
{ style: "oblique 0.1turn", expectedResult: true, message: "'oblique' followed by positive angle in turns is valid", expectedValue: "oblique 36deg" },
{ style: "oblique 20px", expectedResult: false, message: "'oblique' followed by number with invalid unit type is in valid" },
{ style: "oblique -20deg", expectedResult: true, message: "'oblique' followed by negative angle is valid" },
{ style: "oblique 20.5deg", expectedResult: true, message: "'oblique' followed by fractional angle is valid" },
{ style: "oblique 90deg", expectedResult: true, message: "'oblique' followed by maxumum 90 degree angle is valid" },
{ style: "oblique -90deg", expectedResult: true, message: "'oblique' followed by minimum -90 degree angle is valid" },
{ style: "oblique 90.01deg", expectedResult: false, message: "'oblique' followed by positive out of range angle is in invalid" },
{ style: "oblique -90.01deg", expectedResult: false, message: "'oblique' followed by negative out of range angle is in invalid" },
{ style: "oblique 10", expectedResult: false, message: "'oblique' followed by unit-less value is invalid" },
{ style: "oblique 30deg", expectedResult: true, message: "'oblique' followed by positive angle is valid" },
{ style: "oblique a", expectedResult: false, message: "'oblique' followed by non-number is invalid" },
{ style: "oblique 20deg a", expectedResult: false, message: "'oblique' and angle followed by non-number is invalid" },
{ style: "oblique -", expectedResult: false, message: "'oblique' followed by isolated minus is invalid" },
{ style: "oblique - 20deg", expectedResult: false, message: "'oblique' followed by minus and angle separated by space is invalid" },
{ style: "oblique -a", expectedResult: false, message: "'oblique' followed by minus and non-number is invalid" },
{ style: "oblique calc(50deg)", expectedResult: true, message: "'oblique' followed by calc is valid", expectedValue: "oblique 50deg" },
{ style: "oblique calc(-120deg)", expectedResult: true, message: "'oblique' followed by calc is valid even if it must be clamped (no computation)", expectedValue: "oblique -90deg" },
{ style: "oblique calc(6 * 20deg)", expectedResult: true, message: "'oblique' followed by calc is valid even if it must be clamped (with computation)", expectedValue: "oblique 90deg" },
{ style: "oblique calc(10grad + 5deg)", expectedResult: true, message: "'oblique' followed by calc is valid even if it mixes units (with computation)", expectedValue: "oblique" }
];
testFontStyle.forEach(function (testCase) {
test(() => {
assert_equals(window.CSS.supports("font-style", testCase.style), testCase.expectedResult, "Font-style supports: " + testCase.message);
}, "Font-style (supports): " + testCase.message);
});
testFontStyle.forEach(function (testCase) {
if (testCase.expectedResult) {
test(() => {
let element = document.getElementById("test");
element.style = "font-style: " + testCase.style;
let actualValue = getComputedStyle(element).fontStyle;
let expectedValue = testCase.expectedValue ?? testCase.style;
let assert_fn = expectedValue instanceof RegExp ? assert_regexp_match : assert_equals;
assert_fn(actualValue, expectedValue, "Font-style computed style: " + testCase.message);
}, "Font-style (computed): " + testCase.message);
}
});
</script>
</body>
</html>

View File

@ -0,0 +1,84 @@
<!DOCTYPE html>
<html>
<head>
<title>Testing the interpolation of new font-weight values introduced in CSS Fonts level 4</title>
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-weight-prop" />
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
@keyframes fontWeightAnimation {
from { font-weight: 100; }
to { font-weight: 900; }
}
#animation-test.animate {
animation: fontWeightAnimation 1s infinite alternate;
}
#transition-test {
font-weight: 100;
transition-property: font-weight;
transition-duration: 10s;
}
#transition-test.animate {
font-weight: 900;
}
</style>
</head>
<body>
<div style="font-family: 'CSSTest Weights Full';">
<div id="animation-test">A</div>
<div id="transition-test">A</div>
</div>
<script>
async_test(function (test) {
var animationElement = document.getElementById("animation-test");
// Verify starting value
assert_equals(window.getComputedStyle(animationElement).fontWeight, "400", "Font weight before animation");
// Start animation
animationElement.classList.add("animate");
var waitForAnimationStep = test.step_func(function() {
var computedFontWeight = window.getComputedStyle(animationElement).fontWeight;
if (computedFontWeight[1] != "0" || computedFontWeight[2] != 0) { // the value should eventually not be a multiple of 100
test.done();
}
else {
window.requestAnimationFrame(waitForAnimationStep);
}
});
waitForAnimationStep();
}, "font-weight animation");
async_test(function (test) {
var transitionElement = document.getElementById("transition-test");
// Verify starting value
assert_equals(window.getComputedStyle(transitionElement).fontWeight, "100", "Font weight before transition");
// Start transition
transitionElement.classList.add("animate");
var waitForTransitionStep = test.step_func(function() {
var computedFontWeight = window.getComputedStyle(transitionElement).fontWeight;
if (computedFontWeight[1] != "0" || computedFontWeight[2] != 0) { // the value should eventually not be a multiple of 100
test.done();
}
else {
window.requestAnimationFrame(waitForTransitionStep);
}
});
waitForTransitionStep();
}, "font-weight transition");
</script>
</body>
</html>

View File

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html>
<head>
<title>Testing new font-weight lighter/bolder table introduced in CSS Fonts level 4</title>
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-weight-prop" />
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
</head>
<body>
<div id="testcases">
<div class="testcase" style="font-family: 'CSSTest Weights Full';">
<span style="font-weight:lighter;color:red;">A</span>A<span style="font-weight:bolder;color:red;">A</span>
<span style="font: menu; font-size: 10px;">(default)</span>
</div>
</div>
<script>
testRelativeWeights = [
{ baseWeight: 99, lighter: "99", bolder: "400" },
{ baseWeight: 100, lighter: "100", bolder: "400" },
{ baseWeight: 349, lighter: "100", bolder: "400" },
{ baseWeight: 350, lighter: "100", bolder: "700" },
{ baseWeight: 549, lighter: "100", bolder: "700" },
{ baseWeight: 550, lighter: "400", bolder: "900" },
{ baseWeight: 749, lighter: "400", bolder: "900" },
{ baseWeight: 750, lighter: "700", bolder: "900" },
{ baseWeight: 899, lighter: "700", bolder: "900" },
{ baseWeight: 900, lighter: "700", bolder: "900" },
{ baseWeight: 901, lighter: "700", bolder: "901" },
];
var testcases = document.getElementById("testcases");
var testcase_template = testcases.firstElementChild; testcases.removeChild(testcase_template);
testRelativeWeights.forEach(function(element) {
var base = testcase_template.cloneNode(true);
base.children[2].textContent = element.baseWeight;
base.style.fontWeight = element.baseWeight;
testcases.appendChild(base);
test(() => {
var actualLighter = window.getComputedStyle(base.children[0]).fontWeight;
assert_equals(actualLighter, element.lighter, "Lighter value for " + element.baseWeight + " should match expected value.");
base.children[0].style.color = 'green';
}, "Test lighter font-weight for base weight " + element.baseWeight);
test(() => {
var actualBolder = window.getComputedStyle(base.children[1]).fontWeight;
assert_equals(actualBolder, element.bolder, "Bolder value " + element.baseWeight + " should match expected value.");
base.children[1].style.color = 'green';
}, "Test bolder font-weight for base weight " + element.baseWeight);
});
</script>
</body>
</html>

View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<title>Testing the new font-weight values introduced in CSS Fonts level 4</title>
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-weight-prop" />
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
</head>
<body>
<div id="computedStyleTest">A</div>
<script>
var testContinuousWeights = [
{ weight: "401", isValid: true, message: "Values that are not multiple of 100 should be parsed successfully" },
{ weight: "400.5", isValid: true, message: "Non-integer Values should be parsed successfully" },
{ weight: "1", isValid: true, message: "Minimum allowed value should be parsed successfully" },
{ weight: "0.999", isValid: false, message: "Values below minimum should be rejected" },
{ weight: "-100", isValid: false, message: "Values below zero should be rejected" },
{ weight: "1000", isValid: true, message: "Maximum allowed value should be parsed successfully" },
{ weight: "1000.001", isValid: false, message: "Values above maximum should be rejected" },
{ weight: "calc(100.5)", isValid: true, expectedWeight: "100.5", message: "Simple calc value" },
{ weight: "calc(-100)", isValid: true, expectedWeight: "1", message: "Negative simple calc value (to be clamped)" },
{ weight: "calc(1001)", isValid: true, expectedWeight: "1000", message: "Out-of-range simple calc value (to be clamped)" },
{ weight: "calc(100.5*3 + 50.5)", isValid: true, expectedWeight: "352", message: "Valid calc expression" },
{ weight: "calc(100.5*3 + 800)", isValid: true, expectedWeight: "1000", message: "Valid calc expression with out-of-range value (to be clamped)" },
{ weight: "calc(100.5px + 50.5px)", isValid: false, message: "Valid calc expression with units" },
{ weight: "400 700", isValid: false, message: "Extra number after numeric value" },
{ weight: "400 10px", isValid: false, message: "Extra content after numeric value" },
{ weight: "bold 400", isValid: false, message: "Extra content after keyword value" },
{ weight: "calc(100.5) 400", isValid: false, message: "Extra content after calc value" }
];
testContinuousWeights.forEach(function (element) {
test(() => { assert_equals(window.CSS.supports("font-weight", element.weight), element.isValid, element.message); }, "@supports: " + element.message);
});
testContinuousWeights.forEach(function (element) {
var testElement = document.getElementById("computedStyleTest");
if (element.isValid) {
testElement.style.fontWeight = "300";
testElement.style.fontWeight = element.weight;
var expectedWeight = (element.expectedWeight) ? element.expectedWeight : element.weight;
test(() => { assert_equals(window.getComputedStyle(testElement).fontWeight, expectedWeight, element.message); }, "Computed style: " + element.message);
}
});
</script>
</body>
</html>