Changeset 289876 in webkit


Ignore:
Timestamp:
Feb 15, 2022 9:27:04 PM (5 months ago)
Author:
Nikos Mouchtaris
Message:

Implement parsing and animation support for offset shorthand
​https://bugs.webkit.org/show_bug.cgi?id=233109

Reviewed by Dean Jackson.

LayoutTests/imported/w3c:

  • web-platform-tests/css/motion/animation/offset-interpolation-expected.txt:
  • web-platform-tests/css/motion/parsing/offset-parsing-valid-expected.txt:
  • web-platform-tests/css/motion/parsing/offset-parsing-valid.html:
  • web-platform-tests/css/motion/parsing/offset-shorthand-expected.txt:

Source/WebCore:

This patch implements support for the offset shorthand for css motion path. This involves
adding the offset property to CSSProperties.json, the introduction of consumeOffset() to
parse the set offset, and serialization of the offset values.

  • animation/CSSPropertyAnimation.cpp:

(WebCore::CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap):

  • animation/KeyframeEffect.cpp:

(WebCore::KeyframeEffect::CSSPropertyIDToIDLAttributeName):
(WebCore::IDLAttributeNameToAnimationPropertyName):

  • css/CSSComputedStyleDeclaration.cpp:

(WebCore::valueForOffsetShorthand):
(WebCore::ComputedStyleExtractor::valueForPropertyInStyle):

  • css/CSSOffsetRotateValue.cpp:

(WebCore::CSSOffsetRotateValue::initialValue):
(WebCore::CSSOffsetRotateValue::isInitialValue const):

  • css/CSSOffsetRotateValue.h:
  • css/CSSProperties.json:
  • css/StyleProperties.cpp:

(WebCore::StyleProperties::getPropertyValue const):
(WebCore::StyleProperties::offsetValue const):

  • css/StyleProperties.h:
  • css/parser/CSSPropertyParser.cpp:

(WebCore::consumeBasicShapeOrBox):
(WebCore::CSSPropertyParser::consumeOffset):
(WebCore::CSSPropertyParser::parseShorthand):

  • css/parser/CSSPropertyParser.h:
Location:
trunk
Files:
16 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/imported/w3c/ChangeLog

    r289862 r289876  
     12022-02-15  Nikolaos Mouchtaris  <nmouchtaris@apple.com>
     2
     3        Implement parsing and animation support for offset shorthand
     4        https://bugs.webkit.org/show_bug.cgi?id=233109
     5
     6        Reviewed by Dean Jackson.
     7
     8        * web-platform-tests/css/motion/animation/offset-interpolation-expected.txt:
     9        * web-platform-tests/css/motion/parsing/offset-parsing-valid-expected.txt:
     10        * web-platform-tests/css/motion/parsing/offset-parsing-valid.html:
     11        * web-platform-tests/css/motion/parsing/offset-shorthand-expected.txt:
     12
    1132022-02-15  Nikolaos Mouchtaris  <nmouchtaris@apple.com>
    214

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/motion/animation/offset-interpolation-expected.txt

    r283645 r289876  
    11
    2 FAIL CSS Transitions: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (-0.3) should be [path("M0 300H 700 Z") 470px 770deg] assert_true: 'from' value should be supported expected true got false
    3 FAIL CSS Transitions: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (0) should be [path("M0 300H 700 Z") 500px 800deg] assert_true: 'from' value should be supported expected true got false
    4 FAIL CSS Transitions: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (0.3) should be [path("M0 300H 700 Z") 530px 830deg] assert_true: 'from' value should be supported expected true got false
    5 FAIL CSS Transitions: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (0.6) should be [path("M0 300H 700 Z") 560px 860deg] assert_true: 'from' value should be supported expected true got false
    6 FAIL CSS Transitions: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (1) should be [path("M0 300H 700 Z") 600px 900deg] assert_true: 'from' value should be supported expected true got false
    7 FAIL CSS Transitions: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (1.5) should be [path("M0 300H 700 Z") 650px 950deg] assert_true: 'from' value should be supported expected true got false
    8 FAIL CSS Transitions: property <offset> from [path("M0 0H 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (-0.3) should be [path("M0 0H 170") 470px 0deg] assert_true: 'from' value should be supported expected true got false
    9 FAIL CSS Transitions: property <offset> from [path("M0 0H 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (0) should be [path("M0 0H 200") 500px 0deg] assert_true: 'from' value should be supported expected true got false
    10 FAIL CSS Transitions: property <offset> from [path("M0 0H 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (0.3) should be [path("M0 0H 230") 530px 0deg] assert_true: 'from' value should be supported expected true got false
    11 FAIL CSS Transitions: property <offset> from [path("M0 0H 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (0.6) should be [path("M0 0H 260") 560px 0deg] assert_true: 'from' value should be supported expected true got false
    12 FAIL CSS Transitions: property <offset> from [path("M0 0H 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (1) should be [path("M0 0H 300") 600px 0deg] assert_true: 'from' value should be supported expected true got false
    13 FAIL CSS Transitions: property <offset> from [path("M0 0H 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (1.5) should be [path("M0 0H 350") 650px 0deg] assert_true: 'from' value should be supported expected true got false
    14 FAIL CSS Animations: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (-0.3) should be [path("M0 200H 700") 470px 770deg] assert_true: 'from' value should be supported expected true got false
    15 FAIL CSS Animations: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (0) should be [path("M0 200H 700") 500px 800deg] assert_true: 'from' value should be supported expected true got false
    16 FAIL CSS Animations: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (0.3) should be [path("M0 200H 700") 530px 830deg] assert_true: 'from' value should be supported expected true got false
    17 FAIL CSS Animations: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (0.6) should be [path("M0 300H 700 Z") 560px 860deg] assert_true: 'from' value should be supported expected true got false
    18 FAIL CSS Animations: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (1) should be [path("M0 300H 700 Z") 600px 900deg] assert_true: 'from' value should be supported expected true got false
    19 FAIL CSS Animations: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (1.5) should be [path("M0 300H 700 Z") 650px 950deg] assert_true: 'from' value should be supported expected true got false
    20 FAIL CSS Animations: property <offset> from [path("M0 0H 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (-0.3) should be [path("M0 0H 170") 470px] assert_true: 'from' value should be supported expected true got false
    21 FAIL CSS Animations: property <offset> from [path("M0 0H 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (0) should be [path("M0 0H 200") 500px] assert_true: 'from' value should be supported expected true got false
    22 FAIL CSS Animations: property <offset> from [path("M0 0H 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (0.3) should be [path("M0 0H 230") 530px] assert_true: 'from' value should be supported expected true got false
    23 FAIL CSS Animations: property <offset> from [path("M0 0H 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (0.6) should be [path("M0 0H 260") 560px 0deg] assert_true: 'from' value should be supported expected true got false
    24 FAIL CSS Animations: property <offset> from [path("M0 0H 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (1) should be [path("M0 0H 300") 600px 0deg] assert_true: 'from' value should be supported expected true got false
    25 FAIL CSS Animations: property <offset> from [path("M0 0H 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (1.5) should be [path("M0 0H 350") 650px 0deg] assert_true: 'from' value should be supported expected true got false
    26 FAIL Web Animations: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (-0.3) should be [path("M0 200H 700") 470px 770deg] assert_true: 'from' value should be supported expected true got false
    27 FAIL Web Animations: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (0) should be [path("M0 200H 700") 500px 800deg] assert_true: 'from' value should be supported expected true got false
    28 FAIL Web Animations: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (0.3) should be [path("M0 200H 700") 530px 830deg] assert_true: 'from' value should be supported expected true got false
    29 FAIL Web Animations: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (0.6) should be [path("M0 300H 700 Z") 560px 860deg] assert_true: 'from' value should be supported expected true got false
    30 FAIL Web Animations: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (1) should be [path("M0 300H 700 Z") 600px 900deg] assert_true: 'from' value should be supported expected true got false
    31 FAIL Web Animations: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (1.5) should be [path("M0 300H 700 Z") 650px 950deg] assert_true: 'from' value should be supported expected true got false
    32 FAIL Web Animations: property <offset> from [path("M0 0V 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (-0.3) should be [path("M0 0V 200") 470px] assert_true: 'from' value should be supported expected true got false
    33 FAIL Web Animations: property <offset> from [path("M0 0V 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (0) should be [path("M0 0V 200") 500px] assert_true: 'from' value should be supported expected true got false
    34 FAIL Web Animations: property <offset> from [path("M0 0V 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (0.3) should be [path("M0 0V 200") 530px] assert_true: 'from' value should be supported expected true got false
    35 FAIL Web Animations: property <offset> from [path("M0 0V 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (0.6) should be [path("M0 0H 300") 560px 0deg] assert_true: 'from' value should be supported expected true got false
    36 FAIL Web Animations: property <offset> from [path("M0 0V 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (1) should be [path("M0 0H 300") 600px 0deg] assert_true: 'from' value should be supported expected true got false
    37 FAIL Web Animations: property <offset> from [path("M0 0V 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (1.5) should be [path("M0 0H 300") 650px 0deg] assert_true: 'from' value should be supported expected true got false
     2PASS CSS Transitions: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (-0.3) should be [path("M0 300H 700 Z") 470px 770deg]
     3PASS CSS Transitions: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (0) should be [path("M0 300H 700 Z") 500px 800deg]
     4PASS CSS Transitions: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (0.3) should be [path("M0 300H 700 Z") 530px 830deg]
     5PASS CSS Transitions: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (0.6) should be [path("M0 300H 700 Z") 560px 860deg]
     6PASS CSS Transitions: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (1) should be [path("M0 300H 700 Z") 600px 900deg]
     7PASS CSS Transitions: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (1.5) should be [path("M0 300H 700 Z") 650px 950deg]
     8PASS CSS Transitions: property <offset> from [path("M0 0H 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (-0.3) should be [path("M0 0H 170") 470px 0deg]
     9PASS CSS Transitions: property <offset> from [path("M0 0H 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (0) should be [path("M0 0H 200") 500px 0deg]
     10PASS CSS Transitions: property <offset> from [path("M0 0H 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (0.3) should be [path("M0 0H 230") 530px 0deg]
     11PASS CSS Transitions: property <offset> from [path("M0 0H 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (0.6) should be [path("M0 0H 260") 560px 0deg]
     12PASS CSS Transitions: property <offset> from [path("M0 0H 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (1) should be [path("M0 0H 300") 600px 0deg]
     13PASS CSS Transitions: property <offset> from [path("M0 0H 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (1.5) should be [path("M0 0H 350") 650px 0deg]
     14PASS CSS Animations: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (-0.3) should be [path("M0 200H 700") 470px 770deg]
     15PASS CSS Animations: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (0) should be [path("M0 200H 700") 500px 800deg]
     16PASS CSS Animations: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (0.3) should be [path("M0 200H 700") 530px 830deg]
     17PASS CSS Animations: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (0.6) should be [path("M0 300H 700 Z") 560px 860deg]
     18PASS CSS Animations: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (1) should be [path("M0 300H 700 Z") 600px 900deg]
     19PASS CSS Animations: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (1.5) should be [path("M0 300H 700 Z") 650px 950deg]
     20PASS CSS Animations: property <offset> from [path("M0 0H 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (-0.3) should be [path("M0 0H 170") 470px]
     21PASS CSS Animations: property <offset> from [path("M0 0H 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (0) should be [path("M0 0H 200") 500px]
     22PASS CSS Animations: property <offset> from [path("M0 0H 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (0.3) should be [path("M0 0H 230") 530px]
     23PASS CSS Animations: property <offset> from [path("M0 0H 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (0.6) should be [path("M0 0H 260") 560px 0deg]
     24PASS CSS Animations: property <offset> from [path("M0 0H 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (1) should be [path("M0 0H 300") 600px 0deg]
     25PASS CSS Animations: property <offset> from [path("M0 0H 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (1.5) should be [path("M0 0H 350") 650px 0deg]
     26PASS Web Animations: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (-0.3) should be [path("M0 200H 700") 470px 770deg]
     27PASS Web Animations: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (0) should be [path("M0 200H 700") 500px 800deg]
     28PASS Web Animations: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (0.3) should be [path("M0 200H 700") 530px 830deg]
     29PASS Web Animations: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (0.6) should be [path("M0 300H 700 Z") 560px 860deg]
     30PASS Web Animations: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (1) should be [path("M0 300H 700 Z") 600px 900deg]
     31PASS Web Animations: property <offset> from [path("M0 200H 700") 500px 800deg] to [path("M0 300H 700 Z") 600px 900deg] at (1.5) should be [path("M0 300H 700 Z") 650px 950deg]
     32PASS Web Animations: property <offset> from [path("M0 0V 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (-0.3) should be [path("M0 0V 200") 470px]
     33PASS Web Animations: property <offset> from [path("M0 0V 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (0) should be [path("M0 0V 200") 500px]
     34PASS Web Animations: property <offset> from [path("M0 0V 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (0.3) should be [path("M0 0V 200") 530px]
     35PASS Web Animations: property <offset> from [path("M0 0V 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (0.6) should be [path("M0 0H 300") 560px 0deg]
     36PASS Web Animations: property <offset> from [path("M0 0V 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (1) should be [path("M0 0H 300") 600px 0deg]
     37PASS Web Animations: property <offset> from [path("M0 0V 200") 500px auto] to [path("M0 0H 300") 600px 0deg] at (1.5) should be [path("M0 0H 300") 650px 0deg]
    3838

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/motion/parsing/offset-parsing-valid-expected.txt

    r283645 r289876  
    11
    2 FAIL e.style['offset'] = "100px none auto 90deg" should set the property value assert_not_equals: property should be set got disallowed value ""
    3 FAIL e.style['offset'] = "100px" should set the property value assert_not_equals: property should be set got disallowed value ""
    4 FAIL e.style['offset'] = "auto none reverse" should set the property value assert_not_equals: property should be set got disallowed value ""
    5 FAIL e.style['offset'] = "auto" should set the property value assert_not_equals: property should be set got disallowed value ""
    6 FAIL e.style['offset'] = "center bottom path(\"M 1 2 V 3 Z\")" should set the property value assert_not_equals: property should be set got disallowed value ""
    7 FAIL e.style['offset'] = "center center path(\"M 0 0 L 100 100 M 100 200 L 200 200 Z L 300 300 Z\") 100% 90deg / left bottom" should set the property value assert_not_equals: property should be set got disallowed value ""
    8 FAIL e.style['offset'] = "left bottom ray(0rad closest-side) 10px auto 30deg / right bottom" should set the property value assert_not_equals: property should be set got disallowed value ""
    9 FAIL e.style['offset'] = "left top" should set the property value assert_not_equals: property should be set got disallowed value ""
    10 FAIL e.style['offset'] = "none 30deg reverse" should set the property value assert_not_equals: property should be set got disallowed value ""
    11 FAIL e.style['offset'] = "none 50px reverse 30deg" should set the property value assert_not_equals: property should be set got disallowed value ""
    12 FAIL e.style['offset'] = "none calc(10px + 20%) auto" should set the property value assert_not_equals: property should be set got disallowed value ""
    13 FAIL e.style['offset'] = "none reverse" should set the property value assert_not_equals: property should be set got disallowed value ""
    14 FAIL e.style['offset'] = "path(\"M 0 0 H 1\") -200% auto" should set the property value assert_not_equals: property should be set got disallowed value ""
    15 FAIL e.style['offset'] = "path(\"M 0 0 H 1\") -200%" should set the property value assert_not_equals: property should be set got disallowed value ""
    16 FAIL e.style['offset'] = "path('M 0 0 H 1') 50px" should set the property value assert_not_equals: property should be set got disallowed value ""
    17 FAIL e.style['offset'] = "path(\"M 0 0 H 1\") auto" should set the property value assert_not_equals: property should be set got disallowed value ""
    18 FAIL e.style['offset'] = "path(\"M 0 0 H 1\") auto 0deg" should set the property value assert_not_equals: property should be set got disallowed value ""
    19 FAIL e.style['offset'] = "path(\"M 0 0 H 1\") auto 0rad" should set the property value assert_not_equals: property should be set got disallowed value ""
    20 FAIL e.style['offset'] = "path(\"M 0 0 H 1\") auto 0.5turn" should set the property value assert_not_equals: property should be set got disallowed value ""
    21 FAIL e.style['offset'] = "path('M 0 0 H 1') reverse 30deg 50px" should set the property value assert_not_equals: property should be set got disallowed value ""
    22 FAIL e.style['offset'] = "path(\"M 0 0 H 1\")" should set the property value assert_not_equals: property should be set got disallowed value ""
    23 FAIL e.style['offset'] = "path('m 20 0 h 100') -7rad 8px / auto" should set the property value assert_not_equals: property should be set got disallowed value ""
    24 FAIL e.style['offset'] = "path('m 0 30 v 100') -7rad 8px / left top" should set the property value assert_not_equals: property should be set got disallowed value ""
    25 FAIL e.style['offset'] = "path('m 0 0 h 100') -7rad 8px" should set the property value assert_not_equals: property should be set got disallowed value ""
    26 FAIL e.style['offset'] = "path(\"M 0 0 H 100\") 100px 0deg" should set the property value assert_not_equals: property should be set got disallowed value ""
    27 FAIL e.style['offset'] = "path(  'm 1 2   v 3.00 z')" should set the property value assert_not_equals: property should be set got disallowed value ""
    28 FAIL e.style['offset'] = "ray(farthest-corner 90deg) 1%" should set the property value assert_not_equals: property should be set got disallowed value ""
    29 FAIL e.style['offset'] = "ray(sides 0deg) 50% 90deg auto" should set the property value assert_not_equals: property should be set got disallowed value ""
    30 FAIL e.style['offset'] = "right bottom / left top" should set the property value assert_not_equals: property should be set got disallowed value ""
     2PASS e.style['offset'] = "100px none auto 90deg" should set the property value
     3PASS e.style['offset'] = "100px" should set the property value
     4PASS e.style['offset'] = "auto none reverse" should set the property value
     5PASS e.style['offset'] = "auto" should set the property value
     6PASS e.style['offset'] = "center bottom path(\"M 1 2 V 3 Z\")" should set the property value
     7PASS e.style['offset'] = "center center path(\"M 0 0 L 100 100 M 100 200 L 200 200 Z L 300 300 Z\") 100% 90deg / left bottom" should set the property value
     8PASS e.style['offset'] = "left bottom ray(0rad closest-side) 10px auto 30deg / right bottom" should set the property value
     9PASS e.style['offset'] = "left top" should set the property value
     10PASS e.style['offset'] = "none 30deg reverse" should set the property value
     11PASS e.style['offset'] = "none 50px reverse 30deg" should set the property value
     12PASS e.style['offset'] = "none calc(10px + 20%) auto" should set the property value
     13PASS e.style['offset'] = "none reverse" should set the property value
     14PASS e.style['offset'] = "path(\"M 0 0 H 1\") -200% auto" should set the property value
     15PASS e.style['offset'] = "path(\"M 0 0 H 1\") -200%" should set the property value
     16PASS e.style['offset'] = "path('M 0 0 H 1') 50px" should set the property value
     17PASS e.style['offset'] = "path(\"M 0 0 H 1\") auto" should set the property value
     18PASS e.style['offset'] = "path(\"M 0 0 H 1\") auto 0deg" should set the property value
     19PASS e.style['offset'] = "path(\"M 0 0 H 1\") auto 0rad" should set the property value
     20PASS e.style['offset'] = "path(\"M 0 0 H 1\") auto 0.5turn" should set the property value
     21PASS e.style['offset'] = "path('M 0 0 H 1') reverse 30deg 50px" should set the property value
     22PASS e.style['offset'] = "path(\"M 0 0 H 1\")" should set the property value
     23PASS e.style['offset'] = "path('m 20 0 h 100') -7rad 8px / auto" should set the property value
     24PASS e.style['offset'] = "path('m 0 30 v 100') -7rad 8px / left top" should set the property value
     25PASS e.style['offset'] = "path('m 0 0 h 100') -7rad 8px" should set the property value
     26PASS e.style['offset'] = "path(\"M 0 0 H 100\") 100px 0deg" should set the property value
     27PASS e.style['offset'] = "path(  'm 1 2   v 3.00 z')" should set the property value
     28PASS e.style['offset'] = "ray(farthest-corner 90deg) 1%" should set the property value
     29PASS e.style['offset'] = "ray(sides 0deg) 50% 90deg auto" should set the property value
     30PASS e.style['offset'] = "right bottom / left top" should set the property value
    3131

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/motion/parsing/offset-parsing-valid.html

    r283645 r289876  
    1818test_valid_value("offset", "auto");
    1919test_valid_value("offset", "center bottom path(\"M 1 2 V 3 Z\")");
    20 test_valid_value("offset", "center center path(\"M 0 0 L 100 100 M 100 200 L 200 200 Z L 300 300 Z\") 100% 90deg / left bottom");
     20test_valid_value("offset", "center center path(\"M 0 0 L 100 100 M 100 200 L 200 200 Z L 300 300 Z\") 100% 90deg / left bottom", "center path(\"M 0 0 L 100 100 M 100 200 L 200 200 Z L 300 300 Z\") 100% 90deg / left bottom");
    2121test_valid_value("offset", "left bottom ray(0rad closest-side) 10px auto 30deg / right bottom");
    2222test_valid_value("offset", "left top");

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/motion/parsing/offset-shorthand-expected.txt

    r285822 r289876  
    11
    2 FAIL e.style['offset'] = "left bottom ray(0rad closest-side) 10px auto 30deg / right bottom" should set offset-anchor assert_equals: offset-anchor should be canonical expected "right bottom" but got ""
    3 FAIL e.style['offset'] = "left bottom ray(0rad closest-side) 10px auto 30deg / right bottom" should set offset-distance assert_equals: offset-distance should be canonical expected "10px" but got ""
    4 FAIL e.style['offset'] = "left bottom ray(0rad closest-side) 10px auto 30deg / right bottom" should set offset-path assert_equals: offset-path should be canonical expected "ray(0rad closest-side)" but got ""
    5 FAIL e.style['offset'] = "left bottom ray(0rad closest-side) 10px auto 30deg / right bottom" should set offset-position assert_equals: offset-position should be canonical expected "left bottom" but got ""
    6 FAIL e.style['offset'] = "left bottom ray(0rad closest-side) 10px auto 30deg / right bottom" should set offset-rotate assert_equals: offset-rotate should be canonical expected "auto 30deg" but got ""
    7 FAIL e.style['offset'] = "left bottom ray(0rad closest-side) 10px auto 30deg / right bottom" should not set unrelated longhands assert_true: expected true got false
    8 FAIL e.style['offset'] = "top right / top left" should set offset-anchor assert_equals: offset-anchor should be canonical expected "left top" but got ""
    9 FAIL e.style['offset'] = "top right / top left" should set offset-distance assert_equals: offset-distance should be canonical expected "0px" but got ""
    10 FAIL e.style['offset'] = "top right / top left" should set offset-path assert_equals: offset-path should be canonical expected "none" but got ""
    11 FAIL e.style['offset'] = "top right / top left" should set offset-position assert_equals: offset-position should be canonical expected "right top" but got ""
    12 FAIL e.style['offset'] = "top right / top left" should set offset-rotate assert_equals: offset-rotate should be canonical expected "auto" but got ""
    13 FAIL e.style['offset'] = "top right / top left" should not set unrelated longhands assert_true: expected true got false
    14 FAIL e.style['offset'] = "path(\"M 0 0 H 2\") reverse 50%" should set offset-anchor assert_equals: offset-anchor should be canonical expected "auto" but got ""
    15 FAIL e.style['offset'] = "path(\"M 0 0 H 2\") reverse 50%" should set offset-distance assert_equals: offset-distance should be canonical expected "50%" but got ""
    16 FAIL e.style['offset'] = "path(\"M 0 0 H 2\") reverse 50%" should set offset-path assert_equals: offset-path should be canonical expected "path(\"M 0 0 H 2\")" but got ""
    17 FAIL e.style['offset'] = "path(\"M 0 0 H 2\") reverse 50%" should set offset-position assert_equals: offset-position should be canonical expected "auto" but got ""
    18 FAIL e.style['offset'] = "path(\"M 0 0 H 2\") reverse 50%" should set offset-rotate assert_equals: offset-rotate should be canonical expected "reverse" but got ""
    19 FAIL e.style['offset'] = "path(\"M 0 0 H 2\") reverse 50%" should not set unrelated longhands assert_true: expected true got false
     2PASS e.style['offset'] = "left bottom ray(0rad closest-side) 10px auto 30deg / right bottom" should set offset-anchor
     3PASS e.style['offset'] = "left bottom ray(0rad closest-side) 10px auto 30deg / right bottom" should set offset-distance
     4PASS e.style['offset'] = "left bottom ray(0rad closest-side) 10px auto 30deg / right bottom" should set offset-path
     5PASS e.style['offset'] = "left bottom ray(0rad closest-side) 10px auto 30deg / right bottom" should set offset-position
     6PASS e.style['offset'] = "left bottom ray(0rad closest-side) 10px auto 30deg / right bottom" should set offset-rotate
     7PASS e.style['offset'] = "left bottom ray(0rad closest-side) 10px auto 30deg / right bottom" should not set unrelated longhands
     8PASS e.style['offset'] = "top right / top left" should set offset-anchor
     9PASS e.style['offset'] = "top right / top left" should set offset-distance
     10PASS e.style['offset'] = "top right / top left" should set offset-path
     11PASS e.style['offset'] = "top right / top left" should set offset-position
     12PASS e.style['offset'] = "top right / top left" should set offset-rotate
     13PASS e.style['offset'] = "top right / top left" should not set unrelated longhands
     14PASS e.style['offset'] = "path(\"M 0 0 H 2\") reverse 50%" should set offset-anchor
     15PASS e.style['offset'] = "path(\"M 0 0 H 2\") reverse 50%" should set offset-distance
     16PASS e.style['offset'] = "path(\"M 0 0 H 2\") reverse 50%" should set offset-path
     17PASS e.style['offset'] = "path(\"M 0 0 H 2\") reverse 50%" should set offset-position
     18PASS e.style['offset'] = "path(\"M 0 0 H 2\") reverse 50%" should set offset-rotate
     19PASS e.style['offset'] = "path(\"M 0 0 H 2\") reverse 50%" should not set unrelated longhands
    2020

  • trunk/Source/WebCore/ChangeLog

    r289872 r289876  
     12022-02-15  Nikolaos Mouchtaris  <nmouchtaris@apple.com>
     2
     3        Implement parsing and animation support for offset shorthand
     4        https://bugs.webkit.org/show_bug.cgi?id=233109
     5
     6        Reviewed by Dean Jackson.
     7
     8        This patch implements support for the offset shorthand for css motion path. This involves
     9        adding the offset property to CSSProperties.json, the introduction of consumeOffset() to
     10        parse the set offset, and serialization of the offset values.
     11
     12        * animation/CSSPropertyAnimation.cpp:
     13        (WebCore::CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap):
     14        * animation/KeyframeEffect.cpp:
     15        (WebCore::KeyframeEffect::CSSPropertyIDToIDLAttributeName):
     16        (WebCore::IDLAttributeNameToAnimationPropertyName):
     17        * css/CSSComputedStyleDeclaration.cpp:
     18        (WebCore::valueForOffsetShorthand):
     19        (WebCore::ComputedStyleExtractor::valueForPropertyInStyle):
     20        * css/CSSOffsetRotateValue.cpp:
     21        (WebCore::CSSOffsetRotateValue::initialValue):
     22        (WebCore::CSSOffsetRotateValue::isInitialValue const):
     23        * css/CSSOffsetRotateValue.h:
     24        * css/CSSProperties.json:
     25        * css/StyleProperties.cpp:
     26        (WebCore::StyleProperties::getPropertyValue const):
     27        (WebCore::StyleProperties::offsetValue const):
     28        * css/StyleProperties.h:
     29        * css/parser/CSSPropertyParser.cpp:
     30        (WebCore::consumeBasicShapeOrBox):
     31        (WebCore::CSSPropertyParser::consumeOffset):
     32        (WebCore::CSSPropertyParser::parseShorthand):
     33        * css/parser/CSSPropertyParser.h:
     34
    1352022-02-15  Chris Dumez  <cdumez@apple.com>
    236

  • trunk/Source/WebCore/animation/CSSPropertyAnimation.cpp

    r289599 r289876  
    28212821        CSSPropertyWebkitBorderRadius,
    28222822        CSSPropertyTransformOrigin,
    2823         CSSPropertyPerspectiveOrigin
     2823        CSSPropertyPerspectiveOrigin,
     2824        CSSPropertyOffset
    28242825    };
    28252826    const unsigned animatableShorthandPropertiesCount = WTF_ARRAY_LENGTH(animatableShorthandProperties);

  • trunk/Source/WebCore/animation/KeyframeEffect.cpp

    r289732 r289876  
    8686
    8787    // 3. If property refers to the CSS offset property, return the string "cssOffset".
    88     // FIXME: we don't support the CSS "offset" property
     88    if (cssPropertyId == CSSPropertyOffset)
     89        return "cssOffset";
    8990
    9091    // 4. Otherwise, return the result of applying the CSS property to IDL attribute algorithm [CSSOM] to property.
    … …  
    103104
    104105    // 3. If attribute is the string "cssOffset", then return an animation property representing the CSS offset property.
    105     // FIXME: We don't support the CSS "offset" property.
     106    if (idlAttributeName == "cssOffset")
     107        return CSSPropertyOffset;
    106108
    107109    // 4. Otherwise, return the result of applying the IDL attribute to CSS property algorithm [CSSOM] to attribute.

  • trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp

    r289722 r289876  
    26622662
    26632663    return result;
     2664}
     2665
     2666static Ref<CSSValue> valueForOffsetShorthand(const RenderStyle& style)
     2667{
     2668    // offset is serialized as follow:
     2669    // [offset-position] [offset-path] [offset-distance] [offset-rotate] / [offset-anchor]
     2670    // The first four elements are serialized in a space separated CSSValueList.
     2671    // This is then combined with offset-anchor in a slash separated CSSValueList.
     2672
     2673    auto outerList = CSSValueList::createSlashSeparated();
     2674    auto innerList = CSSValueList::createSpaceSeparated();
     2675    innerList->append(valueForPositionOrAuto(style, style.offsetPosition()));
     2676    innerList->append(valueForPathOperation(style, style.offsetPath(), SVGPathConversion::ForceAbsolute));
     2677    innerList->append(CSSValuePool::singleton().createValue(style.offsetDistance(), style));
     2678    innerList->append(valueForOffsetRotate(style.offsetRotate()));
     2679    outerList->append(WTFMove(innerList));
     2680    outerList->append(valueForPositionOrAuto(style, style.offsetAnchor()));
     2681    return outerList;
    26642682}
    26652683
    … …  
    33683386        case CSSPropertyOffsetRotate:
    33693387            return valueForOffsetRotate(style.offsetRotate());
     3388        case CSSPropertyOffset:
     3389            return valueForOffsetShorthand(style);
    33703390        case CSSPropertyOpacity:
    33713391            return cssValuePool.createValue(style.opacity(), CSSUnitType::CSS_NUMBER);

  • trunk/Source/WebCore/css/CSSOffsetRotateValue.cpp

    r285822 r289876  
    2727#include "CSSOffsetRotateValue.h"
    2828
     29#include "CSSValuePool.h"
     30
    2931namespace WebCore {
    3032
    … …  
    4648}
    4749
     50Ref<CSSOffsetRotateValue> CSSOffsetRotateValue::initialValue()
     51{
     52    return CSSOffsetRotateValue::create(CSSValuePool::singleton().createIdentifierValue(CSSValueAuto), nullptr);
     53}
     54
     55bool CSSOffsetRotateValue::isInitialValue() const
     56{
     57    return m_modifier && m_modifier->valueID() == CSSValueAuto
     58        && (!m_angle || m_angle->computeDegrees() == 0.0);
     59}
     60
    4861bool CSSOffsetRotateValue::equals(const CSSOffsetRotateValue& o) const
    4962{

  • trunk/Source/WebCore/css/CSSOffsetRotateValue.h

    r285822 r289876  
    4343    CSSPrimitiveValue* angle() const { return m_angle.get(); }
    4444
     45    static Ref<CSSOffsetRotateValue> initialValue();
     46    bool isInitialValue() const;
     47
    4548    bool equals(const CSSOffsetRotateValue&) const;
    4649

  • trunk/Source/WebCore/css/CSSProperties.json

    r288869 r289876  
    37363736            }
    37373737        },
     3738        "offset": {
     3739            "codegen-properties": {
     3740                "longhands": [
     3741                    "offset-path",
     3742                    "offset-distance",
     3743                    "offset-position",
     3744                    "offset-anchor",
     3745                    "offset-rotate"
     3746                ]
     3747            },
     3748            "specification": {
     3749                "category": "css-motion-path",
     3750                "url": "https://drafts.fxtf.org/motion-1/#offset-shorthand"
     3751            }
     3752        },
    37383753        "opacity": {
    37393754            "codegen-properties": {

  • trunk/Source/WebCore/css/StyleProperties.cpp

    r288134 r289876  
    2727#include "CSSCustomPropertyValue.h"
    2828#include "CSSDeferredParser.h"
     29#include "CSSOffsetRotateValue.h"
    2930#include "CSSParser.h"
    3031#include "CSSPendingSubstitutionValue.h"
    … …  
    229230    case CSSPropertyBorderInlineEnd:
    230231        return getShorthandValue(borderInlineEndShorthand());
     232    case CSSPropertyOffset:
     233        return offsetValue();
    231234    case CSSPropertyOutline:
    232235        return getShorthandValue(outlineShorthand());
    … …  
    454457}
    455458
     459String StyleProperties::offsetValue() const
     460{
     461    StringBuilder result;
     462
     463    auto offsetPositionIndex = findPropertyIndex(CSSPropertyOffsetPosition);
     464    auto offsetPathIndex = findPropertyIndex(CSSPropertyOffsetPath);
     465
     466    // Either offset-position and offset-path must be specified.
     467    if (offsetPositionIndex == -1 && offsetPathIndex == -1)
     468        return String();
     469
     470    if (offsetPositionIndex != -1) {
     471        auto offsetPosition = propertyAt(offsetPositionIndex);
     472        if (!offsetPosition.isImplicit()) {
     473            if (!offsetPosition.value())
     474                return String();
     475
     476            result.append(offsetPosition.value()->cssText());
     477        }
     478    }
     479
     480    if (offsetPathIndex != -1) {
     481        auto offsetPath = propertyAt(offsetPathIndex);
     482        if (!offsetPath.isImplicit()) {
     483            if (!offsetPath.value())
     484                return String();
     485
     486            if (!result.isEmpty())
     487                result.append(' ');
     488            result.append(offsetPath.value()->cssText());
     489        }
     490    }
     491
     492    // At this point, result is not empty because either offset-position or offset-path
     493    // must be present.
     494
     495    auto offsetDistanceIndex = findPropertyIndex(CSSPropertyOffsetDistance);
     496    if (offsetDistanceIndex != -1) {
     497        auto offsetDistance = propertyAt(offsetDistanceIndex);
     498        if (!offsetDistance.isImplicit()) {
     499            auto offsetDistanceValue = offsetDistance.value();
     500            if (!offsetDistanceValue || !is<CSSPrimitiveValue>(offsetDistanceValue))
     501                return String();
     502            // Only include offset-distance if the distance is non-zero.
     503            // isZero() returns std::nullopt if offsetDistanceValue is a calculated value, in which case
     504            // we use value_or() to override to false.
     505            if (!(downcast<CSSPrimitiveValue>(offsetDistanceValue)->isZero().value_or(false))) {
     506                result.append(' ');
     507                result.append(downcast<CSSPrimitiveValue>(offsetDistanceValue)->cssText());
     508            }
     509        }
     510    }
     511
     512    auto offsetRotateIndex = findPropertyIndex(CSSPropertyOffsetRotate);
     513    if (offsetRotateIndex != -1) {
     514        auto offsetRotate = propertyAt(offsetRotateIndex);
     515        if (!offsetRotate.isImplicit()) {
     516            auto offsetRotateValue = offsetRotate.value();
     517            if (!offsetRotateValue || !is<CSSOffsetRotateValue>(offsetRotateValue))
     518                return String();
     519
     520            if (!(downcast<CSSOffsetRotateValue>(offsetRotateValue)->isInitialValue())) {
     521                result.append(' ');
     522                result.append(downcast<CSSOffsetRotateValue>(offsetRotateValue)->cssText());
     523            }
     524        }
     525    }
     526
     527    auto offsetAnchorIndex = findPropertyIndex(CSSPropertyOffsetAnchor);
     528    if (offsetAnchorIndex != -1) {
     529        auto offsetAnchor = propertyAt(offsetAnchorIndex);
     530        if (!offsetAnchor.isImplicit()) {
     531            auto offsetAnchorValue = offsetAnchor.value();
     532            if (!offsetAnchorValue)
     533                return String();
     534
     535            if (!is<CSSPrimitiveValue>(offsetAnchorValue) || !downcast<CSSPrimitiveValue>(offsetAnchorValue)->isValueID()
     536                || downcast<CSSPrimitiveValue>(offsetAnchorValue)->valueID() != CSSValueAuto) {
     537                result.append(" / ");
     538                result.append(offsetAnchorValue->cssText());
     539            }
     540        }
     541    }
     542
     543    return result.toString();
     544}
     545
    456546String StyleProperties::textDecorationSkipValue() const
    457547{

  • trunk/Source/WebCore/css/StyleProperties.h

    r287609 r289876  
    175175    String fontVariantValue() const;
    176176    String textDecorationSkipValue() const;
     177    String offsetValue() const;
    177178    void appendFontLonghandValueIfExplicit(CSSPropertyID, StringBuilder& result, String& value) const;
    178179    bool shorthandHasVariableReference(CSSPropertyID, String&) const;

  • trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp

    r289838 r289876  
    27822782        }
    27832783        if (!componentValue)
    2784             return nullptr;
     2784            break;
    27852785        list->append(componentValue.releaseNonNull());
    27862786    }
    27872787   
    2788     if (!range.atEnd() || !list->length())
     2788    if (!list->length())
    27892789        return nullptr;
    27902790   
    … …  
    62086208}
    62096209
     6210bool CSSPropertyParser::consumeOffset(bool important)
     6211{
     6212    auto& valuePool = CSSValuePool::singleton();
     6213
     6214    // The offset shorthand is defined as:
     6215    // [ <'offset-position'>?
     6216    //   [ <'offset-path'>
     6217    //     [ <'offset-distance'> || <'offset-rotate'> ]?
     6218    //   ]?
     6219    // ]!
     6220    // [ / <'offset-anchor'> ]?
     6221
     6222    // Parse out offset-position.
     6223    auto offsetPosition = parseSingleValue(CSSPropertyOffsetPosition, CSSPropertyOffset);
     6224
     6225    // Parse out offset-path.
     6226    auto offsetPath = parseSingleValue(CSSPropertyOffsetPath, CSSPropertyOffset);
     6227
     6228    // Either one of offset-position and offset-path must be present.
     6229    if (!offsetPosition && !offsetPath)
     6230        return false;
     6231
     6232    // Only parse offset-distance and offset-rotate if offset-path is specified.
     6233    RefPtr<CSSValue> offsetDistance;
     6234    RefPtr<CSSValue> offsetRotate;
     6235    if (offsetPath) {
     6236        // Try to parse offset-distance first. If successful, parse the following offset-rotate.
     6237        // Otherwise, parse in the reverse order.
     6238        if ((offsetDistance = parseSingleValue(CSSPropertyOffsetDistance, CSSPropertyOffset)))
     6239            offsetRotate = parseSingleValue(CSSPropertyOffsetRotate, CSSPropertyOffset);
     6240        else {
     6241            offsetRotate = parseSingleValue(CSSPropertyOffsetRotate, CSSPropertyOffset);
     6242            offsetDistance = parseSingleValue(CSSPropertyOffsetDistance, CSSPropertyOffset);
     6243        }
     6244    }
     6245
     6246    // Parse out offset-anchor. Only parse if the prefix slash is present.
     6247    RefPtr<CSSValue> offsetAnchor;
     6248    if (consumeSlashIncludingWhitespace(m_range)) {
     6249        // offset-anchor must follow the slash.
     6250        if (!(offsetAnchor = parseSingleValue(CSSPropertyOffsetAnchor, CSSPropertyOffset)))
     6251            return false;
     6252    }
     6253
     6254    addPropertyWithImplicitDefault(CSSPropertyOffsetPath, CSSPropertyOffset, WTFMove(offsetPath), valuePool.createIdentifierValue(CSSValueNone), important);
     6255    addPropertyWithImplicitDefault(CSSPropertyOffsetDistance, CSSPropertyOffset, WTFMove(offsetDistance), valuePool.createValue(0.0, CSSUnitType::CSS_PX), important);
     6256    addPropertyWithImplicitDefault(CSSPropertyOffsetPosition, CSSPropertyOffset, WTFMove(offsetPosition), valuePool.createIdentifierValue(CSSValueAuto), important);
     6257    addPropertyWithImplicitDefault(CSSPropertyOffsetAnchor, CSSPropertyOffset, WTFMove(offsetAnchor), valuePool.createIdentifierValue(CSSValueAuto), important);
     6258    addPropertyWithImplicitDefault(CSSPropertyOffsetRotate, CSSPropertyOffset, WTFMove(offsetRotate), CSSOffsetRotateValue::initialValue(), important);
     6259
     6260    return m_range.atEnd();
     6261}
     6262
    62106263bool CSSPropertyParser::parseShorthand(CSSPropertyID property, bool important)
    62116264{
    … …  
    62706323    case CSSPropertyOutline:
    62716324        return consumeShorthandGreedily(outlineShorthand(), important);
     6325    case CSSPropertyOffset:
     6326        return consumeOffset(important);
    62726327    case CSSPropertyBorderInline: {
    62736328        RefPtr<CSSValue> width;

  • trunk/Source/WebCore/css/parser/CSSPropertyParser.h

    r288576 r289876  
    121121    bool consumeTransformOrigin(bool important);
    122122    bool consumePerspectiveOrigin(bool important);
     123    bool consumeOffset(bool important);
    123124
    124125    bool consumeOverscrollBehaviorShorthand(bool important);
Note: See TracChangeset for help on using the changeset viewer.