nephele
/
haikuwebkit
1
0
Fork 0
Code Issues Releases Activity
haikuwebkit/LayoutTests/svg/transforms/change-transform-origin-css...

20 lines
629 B
HTML
Raw Permalink Normal View History

SVG should support transform-origin and relative values https://bugs.webkit.org/show_bug.cgi?id=79068 Patch by Hans Muller <hmuller@adobe.com> on 2012-03-12 Reviewed by Dirk Schulze. Source/WebCore: Added SVG support for the CSS 'transform-origin' property and for percentage values in the transform translate function. The changes conform to http://dev.w3.org/csswg/css3-transforms/. Tests: svg/transforms/percent-transform-values.xhtml svg/transforms/transform-origin-css-property.xhtml * css/svg.css: (*): (html|* > svg): Default transform-origin for SVG elements is 0 0. * platform/Length.h: (WebCore::Length::calcFloatValue): Added a calcFloatValue overload whose max parameter (for percent lengths) is a float. The original version will be obsolete when the sub-pixel layout support is completed. * rendering/style/RenderStyle.cpp: * rendering/style/RenderStyle.h: (WebCore): (WebCore::requireTransformOrigin): Transforms that only include translations don't depend on the transform-origin. (WebCore::RenderStyle::applyTransform): SVG elements interpret non-percentage/keyword transform-origin values relative to their viewport, unlike HTML which interprets all transform-origin values relative to the element's origin. The new FloatRect applyTransform() function handles SVG semantics. Similarly, SVG elements interpret percentage/keyword transform-origin values relative to the origin of their objectBoundingBox(), HTML uses the borderBox. All this per http://dev.w3.org/csswg/css3-transforms/. * svg/SVGStyledTransformableElement.cpp: (WebCore::SVGStyledTransformableElement::animatedLocalTransform): LayoutTests: Added tests for SVG CSS transform-origin property support and for CSS translations specified with percentages and applied to an SVG element. * svg/transforms/change-transform-origin-css-expected.xhtml: Added. * svg/transforms/change-transform-origin-css.xhtml: Added. * svg/transforms/change-transform-origin-presentation-attribute-expected.xhtml: Added. * svg/transforms/change-transform-origin-presentation-attribute.xhtml: Added. * svg/transforms/percent-transform-values-expected.txt: Added. * svg/transforms/percent-transform-values.xhtml: Added. * svg/transforms/transform-origin-css-property-expected.xhtml: Added. * svg/transforms/transform-origin-css-property.xhtml: Added. Canonical link: https://commits.webkit.org/98109@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@110532 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2012-03-13 02:45:38 +00:00
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
Verify that changing the SVG transform-origin CSS property attribute works correctly. Note that
the default transform-origin for an SVG element is 0 0.
The green 100x100 rectangle should appear at 25,25.
-->
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="position: absolute; top: 0px; left: 0px;">
Support transform-box to switch sizing box in SVG https://bugs.webkit.org/show_bug.cgi?id=145783 Reviewed by Dean Jackson. Source/WebCore: Add support for the CSS "transform-box" property, as described at <https://drafts.csswg.org/css-transforms/#transform-box>. This changes the behavior of percentage values in transform-origin in SVG. When these were added in r110532, percentage values in transform-origin were made relative to the bounding box, but absolute values relative to the view box. <https://github.com/w3c/csswg-drafts/issues/895> has concluded that this behavior is confusing. The new behavior is that, for SVG elements, both absolute and percentage values are relative to the reference box, which is specified by the new transform-box property. The initial value for transform-box is border-box, with the svg.css UA stylesheet supplying a default of view-box for the relevant SVG elements per <https://www.w3.org/TR/SVG2/styling.html#UAStyleSheet>. For non-SVG elements, the used value is always border-box, so there is no change in behavior. Tests: fast/css/transform-box-parsing.html svg/transforms/svg-transform-box.html * css/CSSComputedStyleDeclaration.cpp: (WebCore::ComputedStyleExtractor::propertyValue): * css/CSSPrimitiveValueMappings.h: (WebCore::CSSPrimitiveValue::CSSPrimitiveValue): (WebCore::CSSPrimitiveValue::operator TransformBox): * css/CSSProperties.json: * css/CSSValueKeywords.in: * css/parser/CSSPropertyParser.cpp: (WebCore::CSSPropertyParser::parseSingleValue): * css/svg.css: (*:not(svg),): (*): Deleted. (html|* > svg): Deleted. * page/animation/AnimationBase.cpp: (WebCore::AnimationBase::computeTransformedExtentViaTransformList): * rendering/style/RenderStyle.cpp: (WebCore::RenderStyle::applyTransform): The transformOriginX().isPercent() tests were added to support the weird "% values are relative to bounding box" in SVG. Now it's up to the caller to pass a non-zero origin when that matters, and SVGGraphicsElement::animatedLocalTransform() is the only caller that does so. * rendering/style/RenderStyle.h: (WebCore::RenderStyle::hasTransform): (WebCore::RenderStyle::transformBox): (WebCore::RenderStyle::setTransformBox): (WebCore::RenderStyle::initialTransformBox): * rendering/style/RenderStyleConstants.h: * rendering/style/StyleTransformData.cpp: (WebCore::StyleTransformData::StyleTransformData): (WebCore::StyleTransformData::operator==): * rendering/style/StyleTransformData.h: * svg/SVGGraphicsElement.cpp: (WebCore::SVGGraphicsElement::animatedLocalTransform): Consult the transform-box style to compute the reference box as the bounding box, or the view box. Source/WebInspectorUI: Add transform-box to the list of autocompletions. * UserInterface/External/CodeMirror/css.js: LayoutTests: Modify tests that relied on the old "% values relative to the bounding box" behavior, and new tests for parsing and rendering with transform-box. * fast/css/transform-box-parsing.html: Added. * svg/transforms/change-transform-origin-css.xhtml: * svg/transforms/change-transform-origin-presentation-attribute.xhtml: * svg/transforms/percent-transform-values.xhtml: * svg/transforms/svg-transform-box-expected.html: Added. * svg/transforms/svg-transform-box.html: Added. * svg/transforms/transform-origin-css-property.xhtml: * transforms/svg-vs-css.xhtml: Canonical link: https://commits.webkit.org/189361@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@217236 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2017-05-22 19:19:24 +00:00
<rect id="rect" width="50px" height="50px" x="50" y="50" fill="green" style="transform: scale(2, 2); transform-box: fill-box;"/>
SVG should support transform-origin and relative values https://bugs.webkit.org/show_bug.cgi?id=79068 Patch by Hans Muller <hmuller@adobe.com> on 2012-03-12 Reviewed by Dirk Schulze. Source/WebCore: Added SVG support for the CSS 'transform-origin' property and for percentage values in the transform translate function. The changes conform to http://dev.w3.org/csswg/css3-transforms/. Tests: svg/transforms/percent-transform-values.xhtml svg/transforms/transform-origin-css-property.xhtml * css/svg.css: (*): (html|* > svg): Default transform-origin for SVG elements is 0 0. * platform/Length.h: (WebCore::Length::calcFloatValue): Added a calcFloatValue overload whose max parameter (for percent lengths) is a float. The original version will be obsolete when the sub-pixel layout support is completed. * rendering/style/RenderStyle.cpp: * rendering/style/RenderStyle.h: (WebCore): (WebCore::requireTransformOrigin): Transforms that only include translations don't depend on the transform-origin. (WebCore::RenderStyle::applyTransform): SVG elements interpret non-percentage/keyword transform-origin values relative to their viewport, unlike HTML which interprets all transform-origin values relative to the element's origin. The new FloatRect applyTransform() function handles SVG semantics. Similarly, SVG elements interpret percentage/keyword transform-origin values relative to the origin of their objectBoundingBox(), HTML uses the borderBox. All this per http://dev.w3.org/csswg/css3-transforms/. * svg/SVGStyledTransformableElement.cpp: (WebCore::SVGStyledTransformableElement::animatedLocalTransform): LayoutTests: Added tests for SVG CSS transform-origin property support and for CSS translations specified with percentages and applied to an SVG element. * svg/transforms/change-transform-origin-css-expected.xhtml: Added. * svg/transforms/change-transform-origin-css.xhtml: Added. * svg/transforms/change-transform-origin-presentation-attribute-expected.xhtml: Added. * svg/transforms/change-transform-origin-presentation-attribute.xhtml: Added. * svg/transforms/percent-transform-values-expected.txt: Added. * svg/transforms/percent-transform-values.xhtml: Added. * svg/transforms/transform-origin-css-property-expected.xhtml: Added. * svg/transforms/transform-origin-css-property.xhtml: Added. Canonical link: https://commits.webkit.org/98109@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@110532 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2012-03-13 02:45:38 +00:00
</svg>
<script><![CDATA[
Support transform-box to switch sizing box in SVG https://bugs.webkit.org/show_bug.cgi?id=145783 Reviewed by Dean Jackson. Source/WebCore: Add support for the CSS "transform-box" property, as described at <https://drafts.csswg.org/css-transforms/#transform-box>. This changes the behavior of percentage values in transform-origin in SVG. When these were added in r110532, percentage values in transform-origin were made relative to the bounding box, but absolute values relative to the view box. <https://github.com/w3c/csswg-drafts/issues/895> has concluded that this behavior is confusing. The new behavior is that, for SVG elements, both absolute and percentage values are relative to the reference box, which is specified by the new transform-box property. The initial value for transform-box is border-box, with the svg.css UA stylesheet supplying a default of view-box for the relevant SVG elements per <https://www.w3.org/TR/SVG2/styling.html#UAStyleSheet>. For non-SVG elements, the used value is always border-box, so there is no change in behavior. Tests: fast/css/transform-box-parsing.html svg/transforms/svg-transform-box.html * css/CSSComputedStyleDeclaration.cpp: (WebCore::ComputedStyleExtractor::propertyValue): * css/CSSPrimitiveValueMappings.h: (WebCore::CSSPrimitiveValue::CSSPrimitiveValue): (WebCore::CSSPrimitiveValue::operator TransformBox): * css/CSSProperties.json: * css/CSSValueKeywords.in: * css/parser/CSSPropertyParser.cpp: (WebCore::CSSPropertyParser::parseSingleValue): * css/svg.css: (*:not(svg),): (*): Deleted. (html|* > svg): Deleted. * page/animation/AnimationBase.cpp: (WebCore::AnimationBase::computeTransformedExtentViaTransformList): * rendering/style/RenderStyle.cpp: (WebCore::RenderStyle::applyTransform): The transformOriginX().isPercent() tests were added to support the weird "% values are relative to bounding box" in SVG. Now it's up to the caller to pass a non-zero origin when that matters, and SVGGraphicsElement::animatedLocalTransform() is the only caller that does so. * rendering/style/RenderStyle.h: (WebCore::RenderStyle::hasTransform): (WebCore::RenderStyle::transformBox): (WebCore::RenderStyle::setTransformBox): (WebCore::RenderStyle::initialTransformBox): * rendering/style/RenderStyleConstants.h: * rendering/style/StyleTransformData.cpp: (WebCore::StyleTransformData::StyleTransformData): (WebCore::StyleTransformData::operator==): * rendering/style/StyleTransformData.h: * svg/SVGGraphicsElement.cpp: (WebCore::SVGGraphicsElement::animatedLocalTransform): Consult the transform-box style to compute the reference box as the bounding box, or the view box. Source/WebInspectorUI: Add transform-box to the list of autocompletions. * UserInterface/External/CodeMirror/css.js: LayoutTests: Modify tests that relied on the old "% values relative to the bounding box" behavior, and new tests for parsing and rendering with transform-box. * fast/css/transform-box-parsing.html: Added. * svg/transforms/change-transform-origin-css.xhtml: * svg/transforms/change-transform-origin-presentation-attribute.xhtml: * svg/transforms/percent-transform-values.xhtml: * svg/transforms/svg-transform-box-expected.html: Added. * svg/transforms/svg-transform-box.html: Added. * svg/transforms/transform-origin-css-property.xhtml: * transforms/svg-vs-css.xhtml: Canonical link: https://commits.webkit.org/189361@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@217236 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2017-05-22 19:19:24 +00:00
document.getElementById('rect').style.transformOrigin = "50% 50%";
SVG should support transform-origin and relative values https://bugs.webkit.org/show_bug.cgi?id=79068 Patch by Hans Muller <hmuller@adobe.com> on 2012-03-12 Reviewed by Dirk Schulze. Source/WebCore: Added SVG support for the CSS 'transform-origin' property and for percentage values in the transform translate function. The changes conform to http://dev.w3.org/csswg/css3-transforms/. Tests: svg/transforms/percent-transform-values.xhtml svg/transforms/transform-origin-css-property.xhtml * css/svg.css: (*): (html|* > svg): Default transform-origin for SVG elements is 0 0. * platform/Length.h: (WebCore::Length::calcFloatValue): Added a calcFloatValue overload whose max parameter (for percent lengths) is a float. The original version will be obsolete when the sub-pixel layout support is completed. * rendering/style/RenderStyle.cpp: * rendering/style/RenderStyle.h: (WebCore): (WebCore::requireTransformOrigin): Transforms that only include translations don't depend on the transform-origin. (WebCore::RenderStyle::applyTransform): SVG elements interpret non-percentage/keyword transform-origin values relative to their viewport, unlike HTML which interprets all transform-origin values relative to the element's origin. The new FloatRect applyTransform() function handles SVG semantics. Similarly, SVG elements interpret percentage/keyword transform-origin values relative to the origin of their objectBoundingBox(), HTML uses the borderBox. All this per http://dev.w3.org/csswg/css3-transforms/. * svg/SVGStyledTransformableElement.cpp: (WebCore::SVGStyledTransformableElement::animatedLocalTransform): LayoutTests: Added tests for SVG CSS transform-origin property support and for CSS translations specified with percentages and applied to an SVG element. * svg/transforms/change-transform-origin-css-expected.xhtml: Added. * svg/transforms/change-transform-origin-css.xhtml: Added. * svg/transforms/change-transform-origin-presentation-attribute-expected.xhtml: Added. * svg/transforms/change-transform-origin-presentation-attribute.xhtml: Added. * svg/transforms/percent-transform-values-expected.txt: Added. * svg/transforms/percent-transform-values.xhtml: Added. * svg/transforms/transform-origin-css-property-expected.xhtml: Added. * svg/transforms/transform-origin-css-property.xhtml: Added. Canonical link: https://commits.webkit.org/98109@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@110532 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2012-03-13 02:45:38 +00:00
]]></script>
</body>
</html>