Changeset 282315 in webkit


Ignore:
Timestamp:
Sep 11, 2021, 6:41:08 PM (4 years ago)
Author:
Simon Fraser
Message:

css/css-transforms/translate-getComputedStyle.html fails
​https://bugs.webkit.org/show_bug.cgi?id=230178

Reviewed by Antti Koivisto.

LayoutTests/imported/w3c:

The interpolation test appears to regress, but do so because we now correctly output calc()
in computed style (we just serialize the calc incorrectly).

  • web-platform-tests/css/css-transforms/animation/translate-composition-expected.txt:
  • web-platform-tests/css/css-transforms/animation/translate-interpolation-expected.txt:
  • web-platform-tests/css/css-transforms/transforms-support-calc-expected.txt:
  • web-platform-tests/css/css-transforms/translate-getComputedStyle-expected.txt:
  • web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-002-expected.txt:

Source/WebCore:

​https://drafts.csswg.org/css-transforms-2/#propdef-translate says that the computed value of
the translate property is "the keyword none or a pair of computed <length-percentage> values
and an absolute length" and has a note saying "Note: The resolved value of the translate
property is the computed value, and thus getComputedStyle() includes percentage values in
its results." so implement that.

Tested by imported/w3c/web-platform-tests/css/css-transforms/translate-getComputedStyle.html

  • css/CSSComputedStyleDeclaration.cpp:

(WebCore::computedTranslate):

Location:
trunk
Files:
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/imported/w3c/ChangeLog

    r282305 r282315  
     12021-09-11  Simon Fraser  <[email protected]>
     2
     3        css/css-transforms/translate-getComputedStyle.html fails
     4        https://bugs.webkit.org/show_bug.cgi?id=230178
     5
     6        Reviewed by Antti Koivisto.
     7       
     8        The interpolation test appears to regress, but do so because we now correctly output calc()
     9        in computed style (we just serialize the calc incorrectly).
     10
     11        * web-platform-tests/css/css-transforms/animation/translate-composition-expected.txt:
     12        * web-platform-tests/css/css-transforms/animation/translate-interpolation-expected.txt:
     13        * web-platform-tests/css/css-transforms/transforms-support-calc-expected.txt:
     14        * web-platform-tests/css/css-transforms/translate-getComputedStyle-expected.txt:
     15        * web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-002-expected.txt:
     16
    1172021-09-10  Chris Dumez  <[email protected]>
    218

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/animation/translate-composition-expected.txt

    r276551 r282315  
    11
    2 FAIL Compositing: property <translate> underlying [100px 200px 300px] from add [-50px 50%] to add [100%] at (-1) should be [-100% calc(200px + 100%) 300px] assert_equals: expected "0px 200px 300px " but got "- 100px "
    3 FAIL Compositing: property <translate> underlying [100px 200px 300px] from add [-50px 50%] to add [100%] at (0) should be [calc(50px + 0%) calc(200px + 50%) 300px] assert_equals: expected "50px 200px 300px " but got "- 50px "
    4 FAIL Compositing: property <translate> underlying [100px 200px 300px] from add [-50px 50%] to add [100%] at (0.25) should be [calc(62.5px + 25%) calc(200px + 37.5%) 300px] assert_equals: expected "62.5px 200px 300px " but got "- 37.5px "
    5 FAIL Compositing: property <translate> underlying [100px 200px 300px] from add [-50px 50%] to add [100%] at (0.75) should be [calc(87.5px + 75%) calc(200px + 12.5%) 300px] assert_equals: expected "87.5px 200px 300px " but got "- 12.5px "
    6 FAIL Compositing: property <translate> underlying [100px 200px 300px] from add [-50px 50%] to add [100%] at (1) should be [calc(100px + 100%) calc(200px + 0%) 300px] assert_equals: expected "100px 200px 300px " but got "0px "
    7 FAIL Compositing: property <translate> underlying [100px 200px 300px] from add [-50px 50%] to add [100%] at (2) should be [calc(150px + 200%) calc(200px - 50%) 300px] assert_equals: expected "150px 200px 300px " but got "50px "
    8 FAIL Compositing: property <translate> underlying [100px 200px 300px] from add [50% 100px] to replace [200px 50% 100px] at (-1) should be [100% calc(600px - 50%) 500px] assert_equals: expected "0px 600px 500px " but got "- 200px 200px - 100px "
    9 FAIL Compositing: property <translate> underlying [100px 200px 300px] from add [50% 100px] to replace [200px 50% 100px] at (0) should be [calc(100px + 50%) calc(300px + 0%) 300px] assert_equals: expected "100px 300px 300px " but got "0px 100px "
    10 FAIL Compositing: property <translate> underlying [100px 200px 300px] from add [50% 100px] to replace [200px 50% 100px] at (0.25) should be [calc(125px + 37.5%) calc(225px + 12.5%) 250px] assert_equals: expected "125px 225px 250px " but got "50px 75px 25px "
    11 FAIL Compositing: property <translate> underlying [100px 200px 300px] from add [50% 100px] to replace [200px 50% 100px] at (0.75) should be [calc(175px + 12.5%) calc(75px + 37.5%) 150px] assert_equals: expected "175px 75px 150px " but got "150px 25px 75px "
     2FAIL Compositing: property <translate> underlying [100px 200px 300px] from add [-50px 50%] to add [100%] at (-1) should be [-100% calc(200px + 100%) 300px] assert_equals: expected "- 100 % calc ( 100 % + 200px ) 300px " but got "calc ( - 100 % - 100px ) 100 % "
     3FAIL Compositing: property <translate> underlying [100px 200px 300px] from add [-50px 50%] to add [100%] at (0) should be [calc(50px + 0%) calc(200px + 50%) 300px] assert_equals: expected "calc ( 0 % + 50px ) calc ( 50 % + 200px ) 300px " but got "calc ( 0 % - 50px ) 50 % "
     4FAIL Compositing: property <translate> underlying [100px 200px 300px] from add [-50px 50%] to add [100%] at (0.25) should be [calc(62.5px + 25%) calc(200px + 37.5%) 300px] assert_equals: expected "calc ( 25 % + 62.5px ) calc ( 37.5 % + 200px ) 300px " but got "calc ( 25 % - 37.5px ) 37.5 % "
     5FAIL Compositing: property <translate> underlying [100px 200px 300px] from add [-50px 50%] to add [100%] at (0.75) should be [calc(87.5px + 75%) calc(200px + 12.5%) 300px] assert_equals: expected "calc ( 75 % + 87.5px ) calc ( 12.5 % + 200px ) 300px " but got "calc ( 75 % - 12.5px ) 12.5 % "
     6FAIL Compositing: property <translate> underlying [100px 200px 300px] from add [-50px 50%] to add [100%] at (1) should be [calc(100px + 100%) calc(200px + 0%) 300px] assert_equals: expected "calc ( 100 % + 100px ) calc ( 0 % + 200px ) 300px " but got "100 % "
     7FAIL Compositing: property <translate> underlying [100px 200px 300px] from add [-50px 50%] to add [100%] at (2) should be [calc(150px + 200%) calc(200px - 50%) 300px] assert_equals: expected "calc ( 200 % + 150px ) calc ( - 50 % + 200px ) 300px " but got "calc ( 200 % + 50px ) - 50 % "
     8FAIL Compositing: property <translate> underlying [100px 200px 300px] from add [50% 100px] to replace [200px 50% 100px] at (-1) should be [100% calc(600px - 50%) 500px] assert_equals: expected "100 % calc ( - 50 % + 600px ) 500px " but got "calc ( 100 % - 200px ) calc ( - 50 % + 200px ) - 100px "
     9FAIL Compositing: property <translate> underlying [100px 200px 300px] from add [50% 100px] to replace [200px 50% 100px] at (0) should be [calc(100px + 50%) calc(300px + 0%) 300px] assert_equals: expected "calc ( 50 % + 100px ) calc ( 0 % + 300px ) 300px " but got "50 % calc ( 0 % + 100px ) "
     10FAIL Compositing: property <translate> underlying [100px 200px 300px] from add [50% 100px] to replace [200px 50% 100px] at (0.25) should be [calc(125px + 37.5%) calc(225px + 12.5%) 250px] assert_equals: expected "calc ( 37.5 % + 125px ) calc ( 12.5 % + 225px ) 250px " but got "calc ( 37.5 % + 50px ) calc ( 12.5 % + 75px ) 25px "
     11FAIL Compositing: property <translate> underlying [100px 200px 300px] from add [50% 100px] to replace [200px 50% 100px] at (0.75) should be [calc(175px + 12.5%) calc(75px + 37.5%) 150px] assert_equals: expected "calc ( 12.5 % + 175px ) calc ( 37.5 % + 75px ) 150px " but got "calc ( 12.5 % + 150px ) calc ( 37.5 % + 25px ) 75px "
    1212PASS Compositing: property <translate> underlying [100px 200px 300px] from add [50% 100px] to replace [200px 50% 100px] at (1) should be [calc(200px + 0%) 50% 100px]
    13 FAIL Compositing: property <translate> underlying [100px 200px 300px] from add [50% 100px] to replace [200px 50% 100px] at (2) should be [calc(300px - 50%) calc(-300px + 100%) -100px] assert_equals: expected "300px - 300px - 100px " but got "400px - 100px 200px "
    14 FAIL Compositing: property <translate> underlying [100px 200px 300px] from replace [50% 100px] to add [200px 50% 100px] at (-1) should be [calc(-300px + 100%) -50% -400px] assert_equals: expected "- 300px 0px - 400px " but got "- 200px 200px - 100px "
     13FAIL Compositing: property <translate> underlying [100px 200px 300px] from add [50% 100px] to replace [200px 50% 100px] at (2) should be [calc(300px - 50%) calc(-300px + 100%) -100px] assert_equals: expected "calc ( - 50 % + 300px ) calc ( 100 % - 300px ) - 100px " but got "calc ( - 50 % + 400px ) calc ( 100 % - 100px ) 200px "
     14FAIL Compositing: property <translate> underlying [100px 200px 300px] from replace [50% 100px] to add [200px 50% 100px] at (-1) should be [calc(-300px + 100%) -50% -400px] assert_equals: expected "calc ( 100 % - 300px ) - 50 % - 400px " but got "calc ( 100 % - 200px ) calc ( - 50 % + 200px ) - 100px "
    1515PASS Compositing: property <translate> underlying [100px 200px 300px] from replace [50% 100px] to add [200px 50% 100px] at (0) should be [50%  calc(100px + 0%)]
    16 FAIL Compositing: property <translate> underlying [100px 200px 300px] from replace [50% 100px] to add [200px 50% 100px] at (0.25) should be [calc(75px + 37.5%) calc(125px + 12.5%) 100px] assert_equals: expected "75px 125px 100px " but got "50px 75px 25px "
    17 FAIL Compositing: property <translate> underlying [100px 200px 300px] from replace [50% 100px] to add [200px 50% 100px] at (0.75) should be [calc(225px + 12.5%) calc(175px + 37.5%) 300px] assert_equals: expected "225px 175px 300px " but got "150px 25px 75px "
    18 FAIL Compositing: property <translate> underlying [100px 200px 300px] from replace [50% 100px] to add [200px 50% 100px] at (1) should be [calc(300px + 0%) calc(200px + 50%) 400px] assert_equals: expected "300px 200px 400px " but got "200px 0px 100px "
    19 FAIL Compositing: property <translate> underlying [100px 200px 300px] from replace [50% 100px] to add [200px 50% 100px] at (2) should be [calc(600px - 50%) calc(300px + 100%) 800px] assert_equals: expected "600px 300px 800px " but got "400px - 100px 200px "
     16FAIL Compositing: property <translate> underlying [100px 200px 300px] from replace [50% 100px] to add [200px 50% 100px] at (0.25) should be [calc(75px + 37.5%) calc(125px + 12.5%) 100px] assert_equals: expected "calc ( 37.5 % + 75px ) calc ( 12.5 % + 125px ) 100px " but got "calc ( 37.5 % + 50px ) calc ( 12.5 % + 75px ) 25px "
     17FAIL Compositing: property <translate> underlying [100px 200px 300px] from replace [50% 100px] to add [200px 50% 100px] at (0.75) should be [calc(225px + 12.5%) calc(175px + 37.5%) 300px] assert_equals: expected "calc ( 12.5 % + 225px ) calc ( 37.5 % + 175px ) 300px " but got "calc ( 12.5 % + 150px ) calc ( 37.5 % + 25px ) 75px "
     18FAIL Compositing: property <translate> underlying [100px 200px 300px] from replace [50% 100px] to add [200px 50% 100px] at (1) should be [calc(300px + 0%) calc(200px + 50%) 400px] assert_equals: expected "calc ( 0 % + 300px ) calc ( 50 % + 200px ) 400px " but got "calc ( 0 % + 200px ) 50 % 100px "
     19FAIL Compositing: property <translate> underlying [100px 200px 300px] from replace [50% 100px] to add [200px 50% 100px] at (2) should be [calc(600px - 50%) calc(300px + 100%) 800px] assert_equals: expected "calc ( - 50 % + 600px ) calc ( 100 % + 300px ) 800px " but got "calc ( - 50 % + 400px ) calc ( 100 % - 100px ) 200px "
    2020PASS Compositing: property <translate> underlying [none] from replace [none] to add [100px] at (-1) should be [-100px]
    2121PASS Compositing: property <translate> underlying [none] from replace [none] to add [100px] at (0) should be [none]

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

    r274353 r282315  
    145145PASS Web Animations: property <translate> from [-100px -50px 100px] to [0px] at (2) should be [100px 50px -100px]
    146146PASS CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (-1) should be [calc(960px - 240%) calc(800px - 160%) 640px]
    147 PASS CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (0) should be [480px 400px 320px]
     147FAIL CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (0) should be [480px 400px 320px] assert_equals: expected "480px 400px 320px " but got "calc ( 0 % + 480px ) calc ( 0 % + 400px ) 320px "
    148148PASS CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (0.125) should be [calc(420px + 30%) calc(350px + 20%) 280px]
    149149PASS CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (0.875) should be [calc(210% + 60px) calc(140% + 50px) 40px]
    … …  
    151151PASS CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (2) should be [calc(480% - 480px) calc(320% - 400px) -320px]
    152152PASS CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (-1) should be [calc(960px - 240%) calc(800px - 160%) 640px]
    153 PASS CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (0) should be [480px 400px 320px]
     153FAIL CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (0) should be [480px 400px 320px] assert_equals: expected "480px 400px 320px " but got "calc ( 0 % + 480px ) calc ( 0 % + 400px ) 320px "
    154154PASS CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (0.125) should be [calc(420px + 30%) calc(350px + 20%) 280px]
    155155PASS CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (0.875) should be [calc(210% + 60px) calc(140% + 50px) 40px]
    … …  
    157157PASS CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (2) should be [calc(480% - 480px) calc(320% - 400px) -320px]
    158158PASS CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (-1) should be [calc(960px - 240%) calc(800px - 160%) 640px]
    159 PASS CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0) should be [480px 400px 320px]
     159FAIL CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0) should be [480px 400px 320px] assert_equals: expected "480px 400px 320px " but got "calc ( 0 % + 480px ) calc ( 0 % + 400px ) 320px "
    160160PASS CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0.125) should be [calc(420px + 30%) calc(350px + 20%) 280px]
    161161PASS CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0.875) should be [calc(210% + 60px) calc(140% + 50px) 40px]
    … …  
    163163PASS CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (2) should be [calc(480% - 480px) calc(320% - 400px) -320px]
    164164PASS Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (-1) should be [calc(960px - 240%) calc(800px - 160%) 640px]
    165 PASS Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0) should be [480px 400px 320px]
     165FAIL Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0) should be [480px 400px 320px] assert_equals: expected "480px 400px 320px " but got "calc ( 0 % + 480px ) calc ( 0 % + 400px ) 320px "
    166166PASS Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0.125) should be [calc(420px + 30%) calc(350px + 20%) 280px]
    167167PASS Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0.875) should be [calc(210% + 60px) calc(140% + 50px) 40px]

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/transforms-support-calc-expected.txt

    r282287 r282315  
    11
    2 FAIL translate supports calc assert_equals: expected "calc(20% + 30px) calc(100% - 200px)" but got "30px -200px"
     2PASS translate supports calc
    33PASS rotate supports calc
    44PASS scale supports calc

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/translate-getComputedStyle-expected.txt

    r282287 r282315  
    11
    2 FAIL computed style for translate assert_equals: expected "30% 40% 50px" but got "0px 0px 50px"
     2PASS computed style for translate
    33

  • trunk/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-002-expected.txt

    r276643 r282315  
    218218PASS translate with one unspecified value
    219219PASS translate with all three values specified
    220 FAIL translate with combination of percentages and lengths assert_equals: The value should be calc(0% + 200px) calc(25% - 50.5px) 200px at 500ms expected "calc(0% + 200px) calc(25% - 50.5px) 200px" but got "200px -50.5px 200px"
     220PASS translate with combination of percentages and lengths
    221221PASS scale (type: scaleList) has testInterpolation function
    222222PASS scale with two unspecified values

  • trunk/Source/WebCore/ChangeLog

    r282311 r282315  
     12021-09-11  Simon Fraser  <[email protected]>
     2
     3        css/css-transforms/translate-getComputedStyle.html fails
     4        https://bugs.webkit.org/show_bug.cgi?id=230178
     5
     6        Reviewed by Antti Koivisto.
     7       
     8        https://drafts.csswg.org/css-transforms-2/#propdef-translate says that the computed value of
     9        the translate property is "the keyword none or a pair of computed <length-percentage> values
     10        and an absolute length" and has a note saying "Note: The resolved value of the translate
     11        property is the computed value, and thus getComputedStyle() includes percentage values in
     12        its results." so implement that.
     13
     14        Tested by imported/w3c/web-platform-tests/css/css-transforms/translate-getComputedStyle.html
     15
     16        * css/CSSComputedStyleDeclaration.cpp:
     17        (WebCore::computedTranslate):
     18
    1192021-09-11  Antti Koivisto  <[email protected]>
    220

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

    r282234 r282315  
    624624}
    625625
     626// https://drafts.csswg.org/css-transforms-2/#propdef-translate
     627// Computed value: the keyword none or a pair of computed <length-percentage> values and an absolute length
    626628static Ref<CSSValue> computedTranslate(RenderObject* renderer, const RenderStyle& style)
    627629{
    … …  
    630632        return CSSValuePool::singleton().createIdentifierValue(CSSValueNone);
    631633
    632     FloatRect pixelSnappedRect;
    633     if (is<RenderBox>(*renderer))
    634         pixelSnappedRect = snapRectToDevicePixels(downcast<RenderBox>(*renderer).borderBoxRect(), renderer->document().deviceScaleFactor());
    635 
    636     TransformationMatrix transform;
    637     translate->apply(transform, pixelSnappedRect.size());
    638 
    639634    auto list = CSSValueList::createSpaceSeparated();
    640     if (transform.isAffine()) {
    641         list->append(zoomAdjustedPixelValue(transform.e(), style));
    642         if (transform.f())
    643             list->append(zoomAdjustedPixelValue(transform.f(), style));
    644     } else {
    645         list->append(zoomAdjustedPixelValue(transform.m41(), style));
    646         list->append(zoomAdjustedPixelValue(transform.m42(), style));
    647         list->append(zoomAdjustedPixelValue(transform.m43(), style));
    648     }
     635    list->append(zoomAdjustedPixelValueForLength(translate->x(), style));
     636
     637    if (!translate->y().isZero() || !translate->z().isZero())
     638        list->append(zoomAdjustedPixelValueForLength(translate->y(), style));
     639
     640    if (!translate->z().isZero())
     641        list->append(zoomAdjustedPixelValueForLength(translate->z(), style));
    649642
    650643    return list;
Note: See TracChangeset for help on using the changeset viewer.