Changeset 217236 in webkit
- Timestamp:
- May 22, 2017 12:19:24 PM (7 years ago)
- Location:
- trunk
- Files:
-
- 4 added
- 22 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/LayoutTests/ChangeLog
r217227 r217236 1 2017-05-22 Simon Fraser <simon.fraser@apple.com> 2 3 Support transform-box to switch sizing box in SVG 4 https://bugs.webkit.org/show_bug.cgi?id=145783 5 6 Reviewed by Dean Jackson. 7 8 Modify tests that relied on the old "% values relative to the bounding box" behavior, 9 and new tests for parsing and rendering with transform-box. 10 11 * fast/css/transform-box-parsing.html: Added. 12 * svg/transforms/change-transform-origin-css.xhtml: 13 * svg/transforms/change-transform-origin-presentation-attribute.xhtml: 14 * svg/transforms/percent-transform-values.xhtml: 15 * svg/transforms/svg-transform-box-expected.html: Added. 16 * svg/transforms/svg-transform-box.html: Added. 17 * svg/transforms/transform-origin-css-property.xhtml: 18 * transforms/svg-vs-css.xhtml: 19 1 20 2017-05-22 Antti Koivisto <antti@apple.com> 2 21 -
trunk/LayoutTests/svg/transforms/change-transform-origin-css.xhtml
r110532 r217236 10 10 <body> 11 11 <svg xmlns="http://www.w3.org/2000/svg" style="position: absolute; top: 0px; left: 0px;"> 12 <rect id="rect" width="50px" height="50px" x="50" y="50" fill="green" style=" -webkit-transform: scale(2, 2);"/>12 <rect id="rect" width="50px" height="50px" x="50" y="50" fill="green" style="transform: scale(2, 2); transform-box: fill-box;"/> 13 13 </svg> 14 14 15 15 <script><![CDATA[ 16 document.getElementById('rect').style. webkitTransformOrigin = "50% 50%";16 document.getElementById('rect').style.transformOrigin = "50% 50%"; 17 17 ]]></script> 18 18 </body> -
trunk/LayoutTests/svg/transforms/change-transform-origin-presentation-attribute.xhtml
r110532 r217236 9 9 <body> 10 10 <svg xmlns="http://www.w3.org/2000/svg" style="position: absolute; top: 0px; left: 0px;"> 11 <rect id="rect" width="50px" height="50px" x="50" y="50" fill="green" transform-origin="0 0" style=" -webkit-transform: scale(2, 2);"/>11 <rect id="rect" width="50px" height="50px" x="50" y="50" fill="green" transform-origin="0 0" style="transform: scale(2, 2); transform-box: fill-box;"/> 12 12 </svg> 13 13 -
trunk/LayoutTests/svg/transforms/percent-transform-values.xhtml
r124380 r217236 1 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 2 <body> 3 <p>Test for bug <a href=" ">79068</a> - SVG should support transform-origin and relative values3 <p>Test for bug <a href="http://webkit.org/b/79068">79068</a> - SVG should support transform-origin and relative values 4 4 Verify that CSS transform translate values can be specified with percentages. 5 5 </p> … … 9 9 </p> 10 10 <svg style="position:absolute; left:0px; top:0px;" xmlns="http://www.w3.org/2000/svg"> 11 <rect id="r1" x="10" y="200" width="80" height="60" fill="red" style=" -webkit-transform: translate(50%)"/>12 <rect id="r2" x="90" y="260" width="80" height="60" fill="red" style=" -webkit-transform: translate(-50%, -100%)"/>13 <rect id="r3" x="10" y="200" width="80" height="60" fill="green" style=" -webkit-transform: translate(50%, 0%)"/>11 <rect id="r1" x="10" y="200" width="80" height="60" fill="red" style="transform-box: fill-box; transform: translate(50%)"/> 12 <rect id="r2" x="90" y="260" width="80" height="60" fill="red" style="transform-box: fill-box; transform: translate(-50%, -100%)"/> 13 <rect id="r3" x="10" y="200" width="80" height="60" fill="green" style="transform-box: fill-box; transform: translate(50%, 0%)"/> 14 14 </svg> 15 15 <pre id="log"></pre> -
trunk/LayoutTests/svg/transforms/transform-origin-css-property.xhtml
r168350 r217236 11 11 #transformOriginRect { 12 12 fill: green; 13 -webkit-transform: rotate(90deg);13 transform: rotate(90deg); 14 14 } 15 15 </style> … … 31 31 { 32 32 var rect = document.createElementNS(svgNS, "rect"); 33 var transformOrigin = (typeof(s) == "string") ? s : (x + s[0]) + " " + (y + s[1]);33 var transformOrigin = (typeof(s) == "string") ? s : (x + s[0]) + "px " + (y + s[1]) + "px"; 34 34 rect.setAttribute("id", "transformOriginRect"); 35 35 rect.setAttribute("x", x); … … 37 37 rect.setAttribute("width", 30); 38 38 rect.setAttribute("height", 30); 39 rect.setAttribute("style", " -webkit-transform-origin: " + transformOrigin + ";");39 rect.setAttribute("style", "transform-box: view-box; transform-origin: " + transformOrigin + ";"); 40 40 document.getElementById("svgRoot").appendChild(rect); 41 41 } -
trunk/LayoutTests/transforms/svg-vs-css.xhtml
r58584 r217236 98 98 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" 99 99 viewBox="0 0 200 200" style="width:200px; height:200px;"> 100 <g id="group1" x="0" y="0" width="60" height="60"transform="translate(75, 25)">100 <g id="group1" transform="translate(75, 25)"> 101 101 <rect x="0" y="0" width="60" height="60" stroke="black" stroke-width="1px" stroke-dasharray="1 1" fill="none" /> 102 <g id="group2" x="0" y="0" width="60" height="60" transform="scale(2)">102 <g id="group2" transform="scale(2)"> 103 103 <rect x="0" y="0" width="60" height="60" stroke="black" stroke-dasharray="1 1" stroke-width="1px" fill="none" /> 104 104 <rect id="group3" x="0" y="0" width="60" height="60" stroke="blue" fill="none" transform="rotate(45)" /> -
trunk/Source/WebCore/ChangeLog
r217235 r217236 1 2017-05-22 Simon Fraser <simon.fraser@apple.com> 2 3 Support transform-box to switch sizing box in SVG 4 https://bugs.webkit.org/show_bug.cgi?id=145783 5 6 Reviewed by Dean Jackson. 7 8 Add support for the CSS "transform-box" property, as described at 9 <https://drafts.csswg.org/css-transforms/#transform-box>. 10 11 This changes the behavior of percentage values in transform-origin in SVG. 12 When these were added in r110532, percentage values in transform-origin were made 13 relative to the bounding box, but absolute values relative to the view box. 14 <https://github.com/w3c/csswg-drafts/issues/895> has concluded that this behavior 15 is confusing. The new behavior is that, for SVG elements, both absolute and 16 percentage values are relative to the reference box, which is specified by the 17 new transform-box property. 18 19 The initial value for transform-box is border-box, with the svg.css UA stylesheet 20 supplying a default of view-box for the relevant SVG elements per 21 <https://www.w3.org/TR/SVG2/styling.html#UAStyleSheet>. 22 23 For non-SVG elements, the used value is always border-box, so there is no change 24 in behavior. 25 26 Tests: fast/css/transform-box-parsing.html 27 svg/transforms/svg-transform-box.html 28 29 * css/CSSComputedStyleDeclaration.cpp: 30 (WebCore::ComputedStyleExtractor::propertyValue): 31 * css/CSSPrimitiveValueMappings.h: 32 (WebCore::CSSPrimitiveValue::CSSPrimitiveValue): 33 (WebCore::CSSPrimitiveValue::operator TransformBox): 34 * css/CSSProperties.json: 35 * css/CSSValueKeywords.in: 36 * css/parser/CSSPropertyParser.cpp: 37 (WebCore::CSSPropertyParser::parseSingleValue): 38 * css/svg.css: 39 (*:not(svg),): 40 (*): Deleted. 41 (html|* > svg): Deleted. 42 * page/animation/AnimationBase.cpp: 43 (WebCore::AnimationBase::computeTransformedExtentViaTransformList): 44 * rendering/style/RenderStyle.cpp: 45 (WebCore::RenderStyle::applyTransform): The transformOriginX().isPercent() tests 46 were added to support the weird "% values are relative to bounding box" in SVG. Now 47 it's up to the caller to pass a non-zero origin when that matters, and 48 SVGGraphicsElement::animatedLocalTransform() is the only caller that does so. 49 * rendering/style/RenderStyle.h: 50 (WebCore::RenderStyle::hasTransform): 51 (WebCore::RenderStyle::transformBox): 52 (WebCore::RenderStyle::setTransformBox): 53 (WebCore::RenderStyle::initialTransformBox): 54 * rendering/style/RenderStyleConstants.h: 55 * rendering/style/StyleTransformData.cpp: 56 (WebCore::StyleTransformData::StyleTransformData): 57 (WebCore::StyleTransformData::operator==): 58 * rendering/style/StyleTransformData.h: 59 * svg/SVGGraphicsElement.cpp: 60 (WebCore::SVGGraphicsElement::animatedLocalTransform): Consult the transform-box 61 style to compute the reference box as the bounding box, or the view box. 62 1 63 2017-05-22 Chris Dumez <cdumez@apple.com> 2 64 -
trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp
r216829 r217236 232 232 CSSPropertyTop, 233 233 CSSPropertyTransform, 234 CSSPropertyTransformBox, 234 235 CSSPropertyTransformOrigin, 235 236 CSSPropertyTransformStyle, … … 3683 3684 case CSSPropertyTransform: 3684 3685 return computedTransform(renderer, *style); 3686 case CSSPropertyTransformBox: 3687 return CSSPrimitiveValue::create(style->transformBox()); 3685 3688 case CSSPropertyTransformOrigin: { 3686 3689 auto list = CSSValueList::createSpaceSeparated(); -
trunk/Source/WebCore/css/CSSPrimitiveValueMappings.h
r216418 r217236 4415 4415 } 4416 4416 4417 template<> inline CSSPrimitiveValue::CSSPrimitiveValue(TransformBox box) 4418 : CSSValue(PrimitiveClass) 4419 { 4420 m_primitiveUnitType = CSS_VALUE_ID; 4421 switch (box) { 4422 case TransformBox::BorderBox: 4423 m_value.valueID = CSSValueBorderBox; 4424 break; 4425 case TransformBox::FillBox: 4426 m_value.valueID = CSSValueFillBox; 4427 break; 4428 case TransformBox::ViewBox: 4429 m_value.valueID = CSSValueViewBox; 4430 break; 4431 } 4432 } 4433 4434 template<> inline CSSPrimitiveValue::operator TransformBox() const 4435 { 4436 ASSERT(isValueID()); 4437 4438 switch (m_value.valueID) { 4439 case CSSValueBorderBox: 4440 return TransformBox::BorderBox; 4441 case CSSValueFillBox: 4442 return TransformBox::FillBox; 4443 case CSSValueViewBox: 4444 return TransformBox::ViewBox; 4445 default: 4446 break; 4447 } 4448 4449 ASSERT_NOT_REACHED(); 4450 return TransformBox::BorderBox; 4451 } 4452 4417 4453 template<> inline CSSPrimitiveValue::CSSPrimitiveValue(ColumnAxis e) 4418 4454 : CSSValue(PrimitiveClass) -
trunk/Source/WebCore/css/CSSProperties.json
r216829 r217236 5954 5954 } 5955 5955 }, 5956 "transform-box": { 5957 "values" : [ 5958 "border-box", 5959 "fill-box", 5960 "view-box" 5961 ], 5962 "codegen-properties": { 5963 }, 5964 "specification": { 5965 "category": "css-transforms", 5966 "url": "https://www.w3.org/TR/css-transforms/#propdef-transform-box" 5967 } 5968 }, 5956 5969 "transform-origin": { 5957 5970 "codegen-properties": { -
trunk/Source/WebCore/css/CSSValueKeywords.in
r216418 r217236 1248 1248 translate3d 1249 1249 1250 // transform-box 1251 // border-box 1252 // view-box 1253 fill-box 1254 1250 1255 // motion path 1251 1256 path -
trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp
r216902 r217236 4072 4072 case CSSPropertyTransform: 4073 4073 return consumeTransform(m_range, m_context.mode); 4074 case CSSPropertyTransformBox: 4075 return consumeIdent<CSSValueBorderBox, CSSValueViewBox, CSSValueFillBox>(m_range); 4074 4076 case CSSPropertyTransformOriginX: 4075 4077 case CSSPropertyPerspectiveOriginX: -
trunk/Source/WebCore/css/svg.css
r168350 r217236 73 73 } 74 74 75 /* CSS transform specification: "transform-origin 0 0 for SVG elements without associated CSS layout box, 50% 50% for all other elements". */ 76 77 * { 78 -webkit-transform-origin: 0 0;75 *:not(svg), 76 *:not(foreignObject) > svg { 77 transform-origin: 0 0; 78 transform-box: view-box; 79 79 } 80 81 html|* > svg {82 -webkit-transform-origin: 50% 50%;83 } -
trunk/Source/WebCore/page/animation/AnimationBase.cpp
r215352 r217236 803 803 bool applyTransformOrigin = containsRotation(style.transform().operations()) || style.transform().affectedByTransformOrigin(); 804 804 if (applyTransformOrigin) { 805 float offsetX = style.transformOriginX().isPercent() ? rendererBox.x() : 0; 806 float offsetY = style.transformOriginY().isPercent() ? rendererBox.y() : 0; 807 808 transformOrigin.setX(floatValueForLength(style.transformOriginX(), rendererBox.width()) + offsetX); 809 transformOrigin.setY(floatValueForLength(style.transformOriginY(), rendererBox.height()) + offsetY); 805 transformOrigin.setX(rendererBox.x() + floatValueForLength(style.transformOriginX(), rendererBox.width())); 806 transformOrigin.setY(rendererBox.y() + floatValueForLength(style.transformOriginY(), rendererBox.height())); 810 807 // Ignore transformOriginZ because we'll bail if we encounter any 3D transforms. 811 808 812 809 floatBounds.moveBy(-transformOrigin); 813 810 } -
trunk/Source/WebCore/rendering/style/RenderStyle.cpp
r215507 r217236 1131 1131 auto& operations = m_rareNonInheritedData->transform->operations.operations(); 1132 1132 bool applyTransformOrigin = requireTransformOrigin(operations, applyOrigin); 1133 1134 float offsetX = transformOriginX().isPercent() ? boundingBox.x() : 0; 1135 float offsetY = transformOriginY().isPercent() ? boundingBox.y() : 0; 1136 1133 1134 FloatPoint3D originTranslate; 1137 1135 if (applyTransformOrigin) { 1138 transform.translate3d(floatValueForLength(transformOriginX(), boundingBox.width()) + offsetX, 1139 floatValueForLength(transformOriginY(), boundingBox.height()) + offsetY, 1140 transformOriginZ()); 1136 originTranslate.setX(boundingBox.x() + floatValueForLength(transformOriginX(), boundingBox.width())); 1137 originTranslate.setY(boundingBox.y() + floatValueForLength(transformOriginY(), boundingBox.height())); 1138 originTranslate.setZ(transformOriginZ()); 1139 transform.translate3d(originTranslate.x(), originTranslate.y(), originTranslate.z()); 1141 1140 } 1142 1141 … … 1144 1143 operation->apply(transform, boundingBox.size()); 1145 1144 1146 if (applyTransformOrigin) { 1147 transform.translate3d(-floatValueForLength(transformOriginX(), boundingBox.width()) - offsetX, 1148 -floatValueForLength(transformOriginY(), boundingBox.height()) - offsetY, 1149 -transformOriginZ()); 1150 } 1145 if (applyTransformOrigin) 1146 transform.translate3d(-originTranslate.x(), -originTranslate.y(), -originTranslate.z()); 1151 1147 } 1152 1148 -
trunk/Source/WebCore/rendering/style/RenderStyle.h
r215375 r217236 609 609 610 610 const TransformOperations& transform() const { return m_rareNonInheritedData->transform->operations; } 611 bool hasTransform() const { return !m_rareNonInheritedData->transform->operations.operations().isEmpty(); } 611 612 const Length& transformOriginX() const { return m_rareNonInheritedData->transform->x; } 612 613 const Length& transformOriginY() const { return m_rareNonInheritedData->transform->y; } 613 614 float transformOriginZ() const { return m_rareNonInheritedData->transform->z; } 614 bool hasTransform() const { return !m_rareNonInheritedData->transform->operations.operations().isEmpty(); }615 TransformBox transformBox() const { return m_rareNonInheritedData->transform->transformBox; } 615 616 616 617 TextEmphasisFill textEmphasisFill() const { return static_cast<TextEmphasisFill>(m_rareInheritedData->textEmphasisFill); } … … 1136 1137 void setColumnSpan(ColumnSpan columnSpan) { SET_NESTED_VAR(m_rareNonInheritedData, multiCol, columnSpan, columnSpan); } 1137 1138 void inheritColumnPropertiesFrom(const RenderStyle& parent) { m_rareNonInheritedData.access().multiCol = parent.m_rareNonInheritedData->multiCol; } 1139 1138 1140 void setTransform(const TransformOperations& ops) { SET_NESTED_VAR(m_rareNonInheritedData, transform, operations, ops); } 1139 1141 void setTransformOriginX(Length&& length) { SET_NESTED_VAR(m_rareNonInheritedData, transform, x, WTFMove(length)); } 1140 1142 void setTransformOriginY(Length&& length) { SET_NESTED_VAR(m_rareNonInheritedData, transform, y, WTFMove(length)); } 1141 1143 void setTransformOriginZ(float f) { SET_NESTED_VAR(m_rareNonInheritedData, transform, z, f); } 1144 void setTransformBox(TransformBox box) { SET_NESTED_VAR(m_rareNonInheritedData, transform, transformBox, box); } 1145 1142 1146 void setSpeak(ESpeak s) { SET_VAR(m_rareInheritedData, speak, s); } 1143 1147 void setTextCombine(TextCombine v) { SET_VAR(m_rareNonInheritedData, textCombine, v); } … … 1533 1537 static Length initialTransformOriginX() { return Length(50.0f, Percent); } 1534 1538 static Length initialTransformOriginY() { return Length(50.0f, Percent); } 1539 static TransformBox initialTransformBox() { return TransformBox::BorderBox; } 1535 1540 static EPointerEvents initialPointerEvents() { return PE_AUTO; } 1536 1541 static float initialTransformOriginZ() { return 0; } -
trunk/Source/WebCore/rendering/style/RenderStyleConstants.h
r215146 r217236 584 584 BackfaceVisibilityVisible, BackfaceVisibilityHidden 585 585 }; 586 586 587 enum class TransformBox { 588 BorderBox, 589 FillBox, 590 ViewBox 591 }; 592 587 593 enum ELineClampType { LineClampLineCount, LineClampPercentage }; 588 594 -
trunk/Source/WebCore/rendering/style/StyleTransformData.cpp
r210758 r217236 32 32 , y(RenderStyle::initialTransformOriginY()) 33 33 , z(RenderStyle::initialTransformOriginZ()) 34 , transformBox(RenderStyle::initialTransformBox()) 34 35 { 35 36 } … … 41 42 , y(other.y) 42 43 , z(other.z) 44 , transformBox(other.transformBox) 43 45 { 44 46 } … … 51 53 bool StyleTransformData::operator==(const StyleTransformData& other) const 52 54 { 53 return x == other.x && y == other.y && z == other.z && operations == other.operations;55 return x == other.x && y == other.y && z == other.z && transformBox == other.transformBox && operations == other.operations; 54 56 } 55 57 -
trunk/Source/WebCore/rendering/style/StyleTransformData.h
r210758 r217236 26 26 27 27 #include "Length.h" 28 #include "RenderStyleConstants.h" 28 29 #include "TransformOperations.h" 29 30 #include <wtf/Ref.h> … … 49 50 Length y; 50 51 float z; 52 TransformBox transformBox; 51 53 52 54 private: -
trunk/Source/WebCore/svg/SVGGraphicsElement.cpp
r208863 r217236 28 28 #include "SVGPathData.h" 29 29 #include "SVGRect.h" 30 #include "SVGSVGElement.h" 30 31 #include "SVGStringList.h" 31 32 #include <wtf/NeverDestroyed.h> … … 80 81 // If CSS property was set, use that, otherwise fallback to attribute (if set). 81 82 if (style && style->hasTransform()) { 83 84 FloatRect boundingBox; 85 switch (style->transformBox()) { 86 case TransformBox::FillBox: 87 boundingBox = renderer()->objectBoundingBox(); 88 break; 89 case TransformBox::BorderBox: 90 // For SVG elements without an associated CSS layout box, the used value for border-box is view-box. 91 case TransformBox::ViewBox: 92 if (auto *viewportElement = nearestViewportElement()) { 93 if (is<SVGSVGElement>(*viewportElement)) 94 boundingBox = downcast<SVGSVGElement>(*viewportElement).viewBox(); 95 } 96 break; 97 } 98 82 99 // Note: objectBoundingBox is an emptyRect for elements like pattern or clipPath. 83 100 // See the "Object bounding box units" section of http://dev.w3.org/csswg/css3-transforms/ 84 101 TransformationMatrix transform; 85 style->applyTransform(transform, renderer()->objectBoundingBox());102 style->applyTransform(transform, boundingBox); 86 103 87 104 // Flatten any 3D transform. -
trunk/Source/WebInspectorUI/ChangeLog
r217232 r217236 1 2017-05-22 Simon Fraser <simon.fraser@apple.com> 2 3 Support transform-box to switch sizing box in SVG 4 https://bugs.webkit.org/show_bug.cgi?id=145783 5 6 Reviewed by Dean Jackson. 7 8 Add transform-box to the list of autocompletions. 9 10 * UserInterface/External/CodeMirror/css.js: 11 1 12 2017-05-22 Brian Burg <bburg@apple.com> 2 13 -
trunk/Source/WebInspectorUI/UserInterface/External/CodeMirror/css.js
r210032 r217236 520 520 "text-indent", "text-justify", "text-outline", "text-overflow", "text-shadow", 521 521 "text-size-adjust", "text-space-collapse", "text-transform", "text-underline-position", 522 "text-wrap", "top", "transform", "transform- origin", "transform-style",522 "text-wrap", "top", "transform", "transform-box", "transform-origin", "transform-style", 523 523 "transition", "transition-delay", "transition-duration", 524 524 "transition-property", "transition-timing-function", "unicode-bidi",
Note: See TracChangeset
for help on using the changeset viewer.