forked from WebKit/WebKit
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[CSS Shape function] Add parsing support and storage for shape()
https://bugs.webkit.org/show_bug.cgi?id=277347 rdar://132814728 Reviewed by NOBODY (OOPS!). Implement parsing, property value and computed style support for the `shape()` function[1]. We support the syntax as of the most recent edit[2] but without the flexible order of points and control points due to [3]. Added BasicShapesShapeSegmentConversion.h/cpp with helpers to convert between CSS values and the internal shapes. CSSShapeValue::customCSSText() is implemented. BasicShapeShape stores its segments as a vector of std::variant<>, much as we do for Paths, which avoids heap allocations per segment. Plumb Style::BuilderState deeper into BasicShapeConversion functions. This required passing an optional zoom override, used in some SVG cases (exercised by layout tests). Tentative WPT are included. Based on code by Noam Rosenthal. [1] https://drafts.csswg.org/css-shapes-2/#shape-function [2] w3c/csswg-drafts@9770805c4e53 [3] w3c/csswg-drafts#10666 * LayoutTests/imported/w3c/web-platform-tests/css/css-masking/animations/clip-path-interpolation-shape-expected.txt: Interpolation is not yet supported. * LayoutTests/imported/w3c/web-platform-tests/css/css-masking/parsing/clip-path-shape-parsing-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-shapes/shape-functions/shape-function-computed.tentative-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-shapes/shape-functions/shape-function-computed.tentative.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-shapes/shape-functions/shape-function-invalid.tentative-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-shapes/shape-functions/shape-function-invalid.tentative.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-shapes/shape-functions/shape-function-valid.tentative-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-shapes/shape-functions/shape-function-valid.tentative.html: Added. * Source/WTF/Scripts/Preferences/UnifiedWebPreferences.yaml: * Source/WebCore/Sources.txt: * Source/WebCore/WebCore.xcodeproj/project.pbxproj: * Source/WebCore/css/BasicShapeConversion.cpp: (WebCore::valueForBasicShape): (WebCore::convertToLengthPoint): (WebCore::basicShapeForValue): (WebCore::basicShapePathForValue): (WebCore::basicShapeShapeForValue): * Source/WebCore/css/BasicShapeConversion.h: * Source/WebCore/css/BasicShapesShapeSegmentConversion.cpp: Added. (WebCore::lengthToCSSValue): (WebCore::lengthPointToCSSValue): (WebCore::lengthSizeToCSSValue): (WebCore::toCSSShapeSegmentValue): (WebCore::fromCSSShapeSegmentValue): * Source/WebCore/css/BasicShapesShapeSegmentConversion.h: Copied from Source/WebCore/css/BasicShapeConversion.h. * Source/WebCore/css/CSSBasicShapes.cpp: (WebCore::CSSShapeValue::CSSShapeValue): (WebCore::CSSShapeValue::customCSSText const): (WebCore::CSSShapeValue::equals const): * Source/WebCore/css/CSSShapeSegmentValue.cpp: (WebCore::CSSShapeSegmentValue::customCSSText const): (WebCore::CSSShapeSegmentValue::toShapeSegment const): * Source/WebCore/css/CSSShapeSegmentValue.h: * Source/WebCore/css/CSSToStyleMap.cpp: (WebCore::convertToLengthSize): * Source/WebCore/css/CSSValueKeywords.in: * Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp: (WebCore::CSSPropertyParserHelpers::consumeBasicShapePolygon): (WebCore::CSSPropertyParserHelpers::consumeBasicShapePath): (WebCore::CSSPropertyParserHelpers::consumeCoordinatePair): (WebCore::CSSPropertyParserHelpers::consumeShapeCommand): (WebCore::CSSPropertyParserHelpers::consumeBasicShapeShape): (WebCore::CSSPropertyParserHelpers::consumeBasicShape): * Source/WebCore/rendering/style/BasicShapes.cpp: (WebCore::operator<<): * Source/WebCore/rendering/style/BasicShapes.h: * Source/WebCore/rendering/style/BasicShapesShape.cpp: Added. (WebCore::BasicShapeShape::create): (WebCore::BasicShapeShape::BasicShapeShape): (WebCore::BasicShapeShape::clone const): (WebCore::BasicShapeShape::path const): (WebCore::BasicShapeShape::canBlend const): (WebCore::BasicShapeShape::blend const): (WebCore::BasicShapeShape::operator== const): (WebCore::BasicShapeShape::dump const): (WebCore::operator<<): * Source/WebCore/rendering/style/BasicShapesShape.h: Added. (WebCore::ShapeSegmentBase::ShapeSegmentBase): (WebCore::ShapeSegmentBase::affinity const): * Source/WebCore/style/StyleBuilderConverter.h: (WebCore::Style::BuilderConverter::convertSVGPath): (WebCore::Style::BuilderConverter::convertPathOperation): (WebCore::Style::BuilderConverter::convertShapeValue): * Source/WebCore/style/StyleBuilderState.h: (WebCore::Style::BuilderState::style const):
- Loading branch information
Showing
27 changed files
with
1,723 additions
and
560 deletions.
There are no files selected for viewing
1,016 changes: 508 additions & 508 deletions
1,016
.../web-platform-tests/css/css-masking/animations/clip-path-interpolation-shape-expected.txt
Large diffs are not rendered by default.
Oops, something went wrong.
32 changes: 16 additions & 16 deletions
32
...orted/w3c/web-platform-tests/css/css-masking/parsing/clip-path-shape-parsing-expected.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
29 changes: 29 additions & 0 deletions
29
...tform-tests/css/css-shapes/shape-functions/shape-function-computed.tentative-expected.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
|
|
||
| PASS Property clip-path value 'shape(from 20px 40px, line to 20px 30px)' | ||
| PASS Property clip-path value 'shape(from 20px 40px, line to 20px 30px )' | ||
| PASS Property clip-path value 'shape(from 0 0, line to 100% 100%)' | ||
| PASS Property clip-path value 'shape(from 20px 40px, move to 20px 30px, line by 20px 30px)' | ||
| PASS Property clip-path value 'shape(from 20px 40px, move to 20px 30px, hline to 100px)' | ||
| PASS Property clip-path value 'shape(from 20px 40px, move to 20px 30px, hline by 100%)' | ||
| PASS Property clip-path value 'shape(from 20px 40px, move to 20px 30px, vline to 100px)' | ||
| PASS Property clip-path value 'shape(from 20px 40px, move to 20px 30px, vline by 100%)' | ||
| PASS Property clip-path value 'shape(from 20px 40px, curve by 20px 20px using 10px 30px)' | ||
| PASS Property clip-path value 'shape(from 20px 40px, curve by 20px 20px using 10px 30px 12px 32px)' | ||
| PASS Property clip-path value 'shape(from 20px 40px, smooth by 20px 20px)' | ||
| PASS Property clip-path value 'shape(from 20px 40px, smooth by 20px 20px using 12px 32px)' | ||
| PASS Property clip-path value 'shape(from 20px 40px, arc by 20px 20px of 10%)' | ||
| PASS Property clip-path value 'shape(from 20px 40px, arc by 20px 20px of 0)' | ||
| PASS Property clip-path value 'shape(from 20px 40px, arc by 20px 20px of 10% 0)' | ||
| PASS Property clip-path value 'shape(from 20px 40px, arc by 20px 20px of 10% rotate 0deg)' | ||
| PASS Property clip-path value 'shape(from 20px 40px, arc by 20px 20px of 10% 20%)' | ||
| PASS Property clip-path value 'shape(from 20px 40px, arc by 20px 20px of 10% 20% cw)' | ||
| PASS Property clip-path value 'shape(from 20px 40px, arc by 20px 20px of 10% 20% large)' | ||
| PASS Property clip-path value 'shape(from 20px 40px, arc by 20px 20px of -10% -20% large)' | ||
| PASS Property clip-path value 'shape(from 20px 40px, arc by 20px 20px of 10% rotate 1deg)' | ||
| PASS Property clip-path value 'shape(from 20px 40px, arc by 20px 20px of 10% 20% cw rotate 12deg)' | ||
| PASS Property clip-path value 'shape(from 20px 40px, arc by 20px 20px of 10% 20% cw rotate 3.14159265rad)' | ||
| PASS Property clip-path value 'shape(from 20px 40px, arc by 20px 20px of 10% 20% large rotate 12deg)' | ||
| PASS Property clip-path value 'shape(from 20px 40px, arc by 20px 20px of 10% 20% cw large)' | ||
| PASS Property clip-path value 'shape(from 20px 40px, arc by 20px 20px of 10% 20% large cw)' | ||
| PASS Property clip-path value 'shape(from 20px 40px, arc by 20px 20px of 10% 20% rotate 12deg large)' | ||
|
|
53 changes: 53 additions & 0 deletions
53
.../web-platform-tests/css/css-shapes/shape-functions/shape-function-computed.tentative.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Shapes Module Level 2: computed values for the shape() function</title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#shape-function"> | ||
| <meta name="assert" content="Tests parsing of the circle() function"> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <script src="/css/support/computed-testcommon.js"></script> | ||
| </head> | ||
| <body> | ||
| <div id="target"></div> | ||
| <script> | ||
| test_computed_value("clip-path", "shape(from 20px 40px, line to 20px 30px)"); | ||
| test_computed_value("clip-path", "shape(from 20px 40px, line to 20px 30px )", "shape(from 20px 40px, line to 20px 30px)"); | ||
| test_computed_value("clip-path", "shape(from 0 0, line to 100% 100%)", "shape(from 0px 0px, line to 100% 100%)"); | ||
|
|
||
| test_computed_value("clip-path", "shape(from 20px 40px, move to 20px 30px, line by 20px 30px)"); | ||
| test_computed_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline to 100px)"); | ||
| test_computed_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline by 100%)"); | ||
| test_computed_value("clip-path", "shape(from 20px 40px, move to 20px 30px, vline to 100px)"); | ||
| test_computed_value("clip-path", "shape(from 20px 40px, move to 20px 30px, vline by 100%)"); | ||
|
|
||
| test_computed_value("clip-path", "shape(from 20px 40px, curve by 20px 20px using 10px 30px)"); | ||
| test_computed_value("clip-path", "shape(from 20px 40px, curve by 20px 20px using 10px 30px 12px 32px)"); | ||
|
|
||
| test_computed_value("clip-path", "shape(from 20px 40px, smooth by 20px 20px)"); | ||
| test_computed_value("clip-path", "shape(from 20px 40px, smooth by 20px 20px using 12px 32px)"); | ||
|
|
||
| test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10%)"); | ||
| test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 0)", "shape(from 20px 40px, arc by 20px 20px of 0px)"); | ||
| test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 0)", "shape(from 20px 40px, arc by 20px 20px of 10% 0px)"); | ||
| test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% rotate 0deg)", "shape(from 20px 40px, arc by 20px 20px of 10%)"); | ||
| test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20%)"); | ||
|
|
||
| test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw)"); | ||
| test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% large)"); | ||
|
|
||
| test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of -10% -20% large)"); | ||
|
|
||
| test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% rotate 1deg)"); | ||
| test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw rotate 12deg)"); | ||
| test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw rotate 3.14159265rad)", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw rotate 180deg)"); | ||
| test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% large rotate 12deg)"); | ||
| test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw large)"); | ||
| test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% large cw)", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw large)"); | ||
| test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% rotate 12deg large)", "shape(from 20px 40px, arc by 20px 20px of 10% 20% large rotate 12deg)"); | ||
|
|
||
| document.getElementById('target').remove(); | ||
| </script> | ||
| </body> | ||
| </html> |
14 changes: 14 additions & 0 deletions
14
...atform-tests/css/css-shapes/shape-functions/shape-function-invalid.tentative-expected.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
|
|
||
| PASS e.style['clip-path'] = "shape(from 20px 40px line to 20px 30px)" should not set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px line to 20px 30px,)" should not set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px, 40px, line to 20px, 30px)" should not set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, curve by 20px 20px, using 10px 30px 12px 32px)" should not set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, curve by 20px 20px using 10px 30px, 12px 32px)" should not set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, smooth by 20px 20px using 10px 30px 12px 32px)" should not set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, curve by 20px 20px via 10px 30px 12px 32px)" should not set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, arc by 20px 20px of 10% 20% 12deg)" should not set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, arc by 20px 20px of 10% 20% rotate 12deg rotate 13deg)" should not set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw large 12deg)" should not set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, arc by 20px 20px of 10% 20% small large)" should not set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw ccw)" should not set the property value | ||
|
|
30 changes: 30 additions & 0 deletions
30
...c/web-platform-tests/css/css-shapes/shape-functions/shape-function-invalid.tentative.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Shapes Module Level 1: parsing the shape() function</title> | ||
| <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#shape-function"> | ||
| <meta name="assert" content="Tests parsing of the circle() function"> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <script src="/css/support/parsing-testcommon.js"></script> | ||
| </head> | ||
| <body> | ||
| <script> | ||
| test_invalid_value("clip-path", "shape(from 20px 40px line to 20px 30px)"); | ||
| test_invalid_value("clip-path", "shape(from 20px 40px line to 20px 30px,)"); | ||
| test_invalid_value("clip-path", "shape(from 20px, 40px, line to 20px, 30px)"); | ||
|
|
||
| test_invalid_value("clip-path", "shape(from 20px 40px, curve by 20px 20px, using 10px 30px 12px 32px)"); | ||
| test_invalid_value("clip-path", "shape(from 20px 40px, curve by 20px 20px using 10px 30px, 12px 32px)"); | ||
| test_invalid_value("clip-path", "shape(from 20px 40px, smooth by 20px 20px using 10px 30px 12px 32px)"); | ||
| test_invalid_value("clip-path", "shape(from 20px 40px, curve by 20px 20px via 10px 30px 12px 32px)"); | ||
|
|
||
| test_invalid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% 12deg)"); | ||
| test_invalid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% rotate 12deg rotate 13deg)"); | ||
| test_invalid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw large 12deg)"); | ||
| test_invalid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% small large)"); | ||
| test_invalid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw ccw)"); | ||
| </script> | ||
| </body> | ||
| </html> |
29 changes: 29 additions & 0 deletions
29
...platform-tests/css/css-shapes/shape-functions/shape-function-valid.tentative-expected.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
|
|
||
| PASS e.style['clip-path'] = "shape(from 20px 40px, line to 20px 30px)" should set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, line to 20px 30px )" should set the property value | ||
| PASS e.style['clip-path'] = "shape(from 0 0, line to 100% 100%)" should set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, move to 20px 30px, line by 20px 30px)" should set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, move to 20px 30px, hline to 100px)" should set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, move to 20px 30px, hline by 100%)" should set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, move to 20px 30px, vline to 100px)" should set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, move to 20px 30px, vline by 100%)" should set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, curve by 20px 20px using 10px 30px)" should set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, curve by 20px 20px using 10px 30px 12px 32px)" should set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, smooth by 20px 20px)" should set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, smooth by 20px 20px using 12px 32px)" should set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, arc by 20px 20px of 10%)" should set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, arc by 20px 20px of 0)" should set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, arc by 20px 20px of 10% 0)" should set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, arc by 20px 20px of 10% rotate 0deg)" should set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, arc by 20px 20px of 10% 20%)" should set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw)" should set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, arc by 20px 20px of 10% 20% large)" should set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, arc by 20px 20px of -10% -20% large)" should set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, arc by 20px 20px of 10% rotate 1deg)" should set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw rotate 12deg)" should set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw rotate 0.52rad)" should set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, arc by 20px 20px of 10% 20% large rotate 12deg)" should set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw large)" should set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, arc by 20px 20px of 10% 20% large cw)" should set the property value | ||
| PASS e.style['clip-path'] = "shape(from 20px 40px, arc by 20px 20px of 10% 20% rotate 12deg large)" should set the property value | ||
|
|
Oops, something went wrong.