- Revision
- 217776
- Author
- [email protected]
- Date
- 2017-06-04 23:09:01 -0700 (Sun, 04 Jun 2017)
Log Message
Percentages are calculated wrong in SVG transform CSS property
https://bugs.webkit.org/show_bug.cgi?id=172901
Reviewed by Zalan Bujtas.
Source/WebCore:
The code added in r217236 was just fetching viewBox(), but that can be empty.
SVGLengthContext::determineViewport() does the correct thing to get
the appropriate viewport.
Test: svg/transforms/percent-transform-values-viewbox.html
* svg/SVGGraphicsElement.cpp:
(WebCore::SVGGraphicsElement::animatedLocalTransform):
LayoutTests:
* svg/transforms/percent-transform-values-viewbox-expected.html: Added.
* svg/transforms/percent-transform-values-viewbox.html: Added.
* svg/transforms/transform-origin-css-property-expected.xhtml:
* svg/transforms/transform-origin-css-property.xhtml: Make this test a bit less
annoying to maintain by applying the transforms relative to the fill-box, which means all
the transform origins are no longer offset by the box position. Other tests exercise
view-box relative transform origins.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (217775 => 217776)
--- trunk/LayoutTests/ChangeLog 2017-06-04 20:56:58 UTC (rev 217775)
+++ trunk/LayoutTests/ChangeLog 2017-06-05 06:09:01 UTC (rev 217776)
@@ -1,3 +1,18 @@
+2017-06-04 Simon Fraser <[email protected]>
+
+ Percentages are calculated wrong in SVG transform CSS property
+ https://bugs.webkit.org/show_bug.cgi?id=172901
+
+ Reviewed by Zalan Bujtas.
+
+ * svg/transforms/percent-transform-values-viewbox-expected.html: Added.
+ * svg/transforms/percent-transform-values-viewbox.html: Added.
+ * svg/transforms/transform-origin-css-property-expected.xhtml:
+ * svg/transforms/transform-origin-css-property.xhtml: Make this test a bit less
+ annoying to maintain by applying the transforms relative to the fill-box, which means all
+ the transform origins are no longer offset by the box position. Other tests exercise
+ view-box relative transform origins.
+
2017-06-04 Eric Carlson <[email protected]>
[MediaStream] Page capture state not reported correctly
Added: trunk/LayoutTests/svg/transforms/percent-transform-values-viewbox-expected.html (0 => 217776)
--- trunk/LayoutTests/svg/transforms/percent-transform-values-viewbox-expected.html (rev 0)
+++ trunk/LayoutTests/svg/transforms/percent-transform-values-viewbox-expected.html 2017-06-05 06:09:01 UTC (rev 217776)
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+ <style>
+ svg {
+ border: 1px solid black;
+ display: block;
+ margin: 2px;
+ }
+ </style>
+</head>
+<body>
+ <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 780 80" style="width: 780px; height: 80px">
+ <rect width="120" height="30" fill="green" style="transform: translate(390px, 5px)"/>
+ <rect width="120" height="30" fill="green" style="transform: translate(330px, 40px)"/>
+ </svg>
+ <!-- No viewBox -->
+ <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" style="width: 780px; height: 80px">
+ <rect width="120" height="30" fill="green" style="transform: translate(390px, 5px)"/>
+ <rect width="120" height="30" fill="green" style="transform: translate(330px, 40px)"/>
+ </svg>
+
+ <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 100 400" style="width: 100px; height: 400px; display: inline-block;">
+ <rect width="30" height="120" fill="green" style="transform: translate(5px, 200px"/>
+ <rect width="30" height="120" fill="green" style="transform: translate(40px, 140px)"/>
+ </svg>
+ <!-- No viewBox -->
+ <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" style="width: 100px; height: 400px; display: inline-block;">
+ <rect width="30" height="120" fill="green" style="transform: translate(5px, 200px)"/>
+ <rect width="30" height="120" fill="green" style="transform: translate(40px, 140px)"/>
+ </svg>
+
+ <!-- viewBox with non-zero origin -->
+ <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="-20 50 100 400" style="width: 100px; height: 400px; display: inline-block;">
+ <rect width="30" height="120" fill="green" style="transform: translate(5px, 200px"/>
+ <rect width="30" height="120" fill="green" style="transform: translate(40px, 140px)"/>
+ </svg>
+
+ <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" style="width: 400px; height: 400px; display: inline-block;">
+ <rect width="80" height="80" fill="green" style="transform: translate(200px, 200px); transform-box: view-box;"/>
+ <rect width="80" height="80" fill="blue" style="transform: translate(40px, 40px); transform-box: fill-box;"/>
+ </svg>
+
+</body>
+</html>
Added: trunk/LayoutTests/svg/transforms/percent-transform-values-viewbox.html (0 => 217776)
--- trunk/LayoutTests/svg/transforms/percent-transform-values-viewbox.html (rev 0)
+++ trunk/LayoutTests/svg/transforms/percent-transform-values-viewbox.html 2017-06-05 06:09:01 UTC (rev 217776)
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+ <style>
+ svg {
+ border: 1px solid black;
+ display: block;
+ margin: 2px;
+ }
+ </style>
+</head>
+<body>
+ <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 780 80" style="width: 780px; height: 80px">
+ <rect width="120" height="30" fill="green" style="transform: translate(50%, 5px)"/>
+ <rect width="120" height="30" fill="green" style="transform: translate(calc(50% - 60px), 40px)"/>
+ </svg>
+ <!-- No viewBox -->
+ <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" style="width: 780px; height: 80px">
+ <rect width="120" height="30" fill="green" style="transform: translate(50%, 5px)"/>
+ <rect width="120" height="30" fill="green" style="transform: translate(calc(50% - 60px), 40px)"/>
+ </svg>
+
+ <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 100 400" style="width: 100px; height: 400px; display: inline-block;">
+ <rect width="30" height="120" fill="green" style="transform: translate(5px, 50%)"/>
+ <rect width="30" height="120" fill="green" style="transform: translate(40px, calc(50% - 60px))"/>
+ </svg>
+ <!-- No viewBox -->
+ <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" style="width: 100px; height: 400px; display: inline-block;">
+ <rect width="30" height="120" fill="green" style="transform: translate(5px, 50%)"/>
+ <rect width="30" height="120" fill="green" style="transform: translate(40px, calc(50% - 60px))"/>
+ </svg>
+
+ <!-- viewBox with non-zero origin -->
+ <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="-20 50 100 400" style="width: 100px; height: 400px; display: inline-block;">
+ <rect width="30" height="120" fill="green" style="transform: translate(5px, 200px"/>
+ <rect width="30" height="120" fill="green" style="transform: translate(40px, 140px)"/>
+ </svg>
+
+ <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" style="width: 400px; height: 400px; display: inline-block;">
+ <rect width="80" height="80" fill="green" style="transform: translate(50%, 50%); transform-box: view-box;"/>
+ <rect width="80" height="80" fill="blue" style="transform: translate(50%, 50%); transform-box: fill-box;"/>
+ </svg>
+
+</body>
+</html>
Modified: trunk/LayoutTests/svg/transforms/transform-origin-css-property-expected.xhtml (217775 => 217776)
--- trunk/LayoutTests/svg/transforms/transform-origin-css-property-expected.xhtml 2017-06-04 20:56:58 UTC (rev 217775)
+++ trunk/LayoutTests/svg/transforms/transform-origin-css-property-expected.xhtml 2017-06-05 06:09:01 UTC (rev 217776)
@@ -5,7 +5,7 @@
width: 30px;
height: 30px;
background: green;
- -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
}
</style>
@@ -18,7 +18,7 @@
{
var div = document.createElement("div");
div.setAttribute("id", "transformOriginDiv");
- div.setAttribute("style", "top: " + y + "px; left: "+ x + "px; -webkit-transform-origin: " + transformOrigin + ";");
+ div.setAttribute("style", "top: " + y + "px; left: "+ x + "px; transform-origin: " + transformOrigin + ";");
document.getElementById("divRoot").appendChild(div);
}
Modified: trunk/LayoutTests/svg/transforms/transform-origin-css-property.xhtml (217775 => 217776)
--- trunk/LayoutTests/svg/transforms/transform-origin-css-property.xhtml 2017-06-04 20:56:58 UTC (rev 217775)
+++ trunk/LayoutTests/svg/transforms/transform-origin-css-property.xhtml 2017-06-05 06:09:01 UTC (rev 217776)
@@ -30,13 +30,13 @@
function addTransformOriginRect(x, y, s)
{
var rect = document.createElementNS(svgNS, "rect");
- var transformOrigin = (typeof(s) == "string") ? s : (x + s[0]) + "px " + (y + s[1]) + "px";
+ var transformOrigin = (typeof(s) == "string") ? s : s[0] + "px " + s[1] + "px";
rect.setAttribute("id", "transformOriginRect");
rect.setAttribute("x", x);
rect.setAttribute("y", y);
rect.setAttribute("width", 30);
rect.setAttribute("height", 30);
- rect.setAttribute("style", "transform-box: view-box; transform-origin: " + transformOrigin + ";");
+ rect.setAttribute("style", "transform-box: fill-box; transform-origin: " + transformOrigin + ";");
document.getElementById("svgRoot").appendChild(rect);
}
Modified: trunk/Source/WebCore/ChangeLog (217775 => 217776)
--- trunk/Source/WebCore/ChangeLog 2017-06-04 20:56:58 UTC (rev 217775)
+++ trunk/Source/WebCore/ChangeLog 2017-06-05 06:09:01 UTC (rev 217776)
@@ -1,3 +1,19 @@
+2017-06-04 Simon Fraser <[email protected]>
+
+ Percentages are calculated wrong in SVG transform CSS property
+ https://bugs.webkit.org/show_bug.cgi?id=172901
+
+ Reviewed by Zalan Bujtas.
+
+ The code added in r217236 was just fetching viewBox(), but that can be empty.
+ SVGLengthContext::determineViewport() does the correct thing to get
+ the appropriate viewport.
+
+ Test: svg/transforms/percent-transform-values-viewbox.html
+
+ * svg/SVGGraphicsElement.cpp:
+ (WebCore::SVGGraphicsElement::animatedLocalTransform):
+
2017-06-04 Eric Carlson <[email protected]>
[MediaStream] Page capture state not reported correctly
Modified: trunk/Source/WebCore/svg/SVGGraphicsElement.cpp (217775 => 217776)
--- trunk/Source/WebCore/svg/SVGGraphicsElement.cpp 2017-06-04 20:56:58 UTC (rev 217775)
+++ trunk/Source/WebCore/svg/SVGGraphicsElement.cpp 2017-06-05 06:09:01 UTC (rev 217776)
@@ -88,12 +88,12 @@
break;
case TransformBox::BorderBox:
// For SVG elements without an associated CSS layout box, the used value for border-box is view-box.
- case TransformBox::ViewBox:
- if (auto *viewportElement = nearestViewportElement()) {
- if (is<SVGSVGElement>(*viewportElement))
- boundingBox = downcast<SVGSVGElement>(*viewportElement).viewBox();
+ case TransformBox::ViewBox: {
+ FloatSize viewportSize;
+ SVGLengthContext(this).determineViewport(viewportSize);
+ boundingBox.setSize(viewportSize);
+ break;
}
- break;
}
// Note: objectBoundingBox is an emptyRect for elements like pattern or clipPath.
