Implement SVG's transform and effect paint property nodes

third_party/WebKit/Source/core/paint/PaintPropertyTreeBuilderTest.cpp

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 #include "config.h"
 
 #include "core/layout/LayoutTestHelper.h"
 #include "core/layout/LayoutTreeAsText.h"
 #include "core/layout/LayoutView.h"
 #include "core/paint/ObjectPaintProperties.h"
@@ skipping 174 matching lines @@
 }
 
 TEST_F(PaintPropertyTreeBuilderTest, NestedOpacityEffect)
 {
     setBodyInnerHTML(
         "<div id='nodeWithoutOpacity'>"
         "  <div id='childWithOpacity' style='opacity: 0.5'>"
         "    <div id='grandChildWithoutOpacity'>"
         "      <div id='greatGrandChildWithOpacity' style='opacity: 0.2'/>"
         "    </div>"
-        "  </div"
+        "  </div>"
         "</div>");
 
     LayoutObject& nodeWithoutOpacity = *document().getElementById("nodeWithoutOpacity")->layoutObject();
     ObjectPaintProperties* nodeWithoutOpacityProperties = nodeWithoutOpacity.objectPaintProperties();
     EXPECT_EQ(nullptr, nodeWithoutOpacityProperties);
 
     LayoutObject& childWithOpacity = *document().getElementById("childWithOpacity")->layoutObject();
     ObjectPaintProperties* childWithOpacityProperties = childWithOpacity.objectPaintProperties();
     EXPECT_EQ(0.5f, childWithOpacityProperties->effect()->opacity());
     // childWithOpacity is the root effect node.
     EXPECT_EQ(nullptr, childWithOpacityProperties->effect()->parent());
 
     LayoutObject& grandChildWithoutOpacity = *document().getElementById("grandChildWithoutOpacity")->layoutObject();
     EXPECT_EQ(nullptr, grandChildWithoutOpacity.objectPaintProperties());
 
     LayoutObject& greatGrandChildWithOpacity = *document().getElementById("greatGrandChildWithOpacity")->layoutObject();
     ObjectPaintProperties* greatGrandChildWithOpacityProperties = greatGrandChildWithOpacity.objectPaintProperties();
     EXPECT_EQ(0.2f, greatGrandChildWithOpacityProperties->effect()->opacity());
     EXPECT_EQ(childWithOpacityProperties->effect(), greatGrandChildWithOpacityProperties->effect()->parent());
 }
 
 TEST_F(PaintPropertyTreeBuilderTest, TransformNodeDoesNotAffectEffectNodes)
 {
     setBodyInnerHTML(
         "<div id='nodeWithOpacity' style='opacity: 0.6'>"
         "  <div id='childWithTransform' style='transform: translate3d(10px, 10px, 0px);'>"
         "    <div id='grandChildWithOpacity' style='opacity: 0.4'/>"
-        "  </div"
+        "  </div>"
         "</div>");
 
     LayoutObject& nodeWithOpacity = *document().getElementById("nodeWithOpacity")->layoutObject();
     ObjectPaintProperties* nodeWithOpacityProperties = nodeWithOpacity.objectPaintProperties();
     EXPECT_EQ(0.6f, nodeWithOpacityProperties->effect()->opacity());
     EXPECT_EQ(nullptr, nodeWithOpacityProperties->effect()->parent());
     EXPECT_EQ(nullptr, nodeWithOpacityProperties->transform());
 
     LayoutObject& childWithTransform = *document().getElementById("childWithTransform")->layoutObject();
     ObjectPaintProperties* childWithTransformProperties = childWithTransform.objectPaintProperties();
     EXPECT_EQ(nullptr, childWithTransformProperties->effect());
     EXPECT_EQ(TransformationMatrix().translate(10, 10), childWithTransformProperties->transform()->matrix());
 
     LayoutObject& grandChildWithOpacity = *document().getElementById("grandChildWithOpacity")->layoutObject();
     ObjectPaintProperties* grandChildWithOpacityProperties = grandChildWithOpacity.objectPaintProperties();
     EXPECT_EQ(0.4f, grandChildWithOpacityProperties->effect()->opacity());
     EXPECT_EQ(nodeWithOpacityProperties->effect(), grandChildWithOpacityProperties->effect()->parent());
     EXPECT_EQ(nullptr, grandChildWithOpacityProperties->transform());
 }
 
 TEST_F(PaintPropertyTreeBuilderTest, EffectNodesAcrossStackingContext)
 {
     setBodyInnerHTML(
         "<div id='nodeWithOpacity' style='opacity: 0.6'>"
         "  <div id='childWithStackingContext' style='position:absolute;'>"
         "    <div id='grandChildWithOpacity' style='opacity: 0.4'/>"
-        "  </div"
+        "  </div>"
         "</div>");
 
     LayoutObject& nodeWithOpacity = *document().getElementById("nodeWithOpacity")->layoutObject();
     ObjectPaintProperties* nodeWithOpacityProperties = nodeWithOpacity.objectPaintProperties();
     EXPECT_EQ(0.6f, nodeWithOpacityProperties->effect()->opacity());
     EXPECT_EQ(nullptr, nodeWithOpacityProperties->effect()->parent());
     EXPECT_EQ(nullptr, nodeWithOpacityProperties->transform());
 
     LayoutObject& childWithStackingContext = *document().getElementById("childWithStackingContext")->layoutObject();
     EXPECT_EQ(nullptr, childWithStackingContext.objectPaintProperties());
 
     LayoutObject& grandChildWithOpacity = *document().getElementById("grandChildWithOpacity")->layoutObject();
     ObjectPaintProperties* grandChildWithOpacityProperties = grandChildWithOpacity.objectPaintProperties();
     EXPECT_EQ(0.4f, grandChildWithOpacityProperties->effect()->opacity());
     EXPECT_EQ(nodeWithOpacityProperties->effect(), grandChildWithOpacityProperties->effect()->parent());
     EXPECT_EQ(nullptr, grandChildWithOpacityProperties->transform());
 }
 
+TEST_F(PaintPropertyTreeBuilderTest, EffectNodesInSVG)
+{
+    setBodyInnerHTML(
+        "<svg id='svgRoot'>"
+        "  <g id='groupWithOpacity' opacity='0.6'>"
+        "    <rect id='rectWithoutOpacity' />"
+        "    <rect id='rectWithOpacity' opacity='0.4' />"
+        "    <text id='textWithOpacity' opacity='0.2'>"
+        "      <tspan id='tspanWithOpacity' opacity='0.1' />"
+        "    </text>"
+        "  </g>"
+        "</svg>");
+
+    LayoutObject& groupWithOpacity = *document().getElementById("groupWithOpacity")->layoutObject();
+    ObjectPaintProperties* groupWithOpacityProperties = groupWithOpacity.objectPaintProperties();
+    EXPECT_EQ(0.6f, groupWithOpacityProperties->effect()->opacity());
+    EXPECT_EQ(nullptr, groupWithOpacityProperties->effect()->parent());
+
+    LayoutObject& rectWithoutOpacity = *document().getElementById("rectWithoutOpacity")->layoutObject();
+    ObjectPaintProperties* rectWithoutOpacityProperties = rectWithoutOpacity.objectPaintProperties();
+    EXPECT_EQ(nullptr, rectWithoutOpacityProperties);
+
+    LayoutObject& rectWithOpacity = *document().getElementById("rectWithOpacity")->layoutObject();
+    ObjectPaintProperties* rectWithOpacityProperties = rectWithOpacity.objectPaintProperties();
+    EXPECT_EQ(0.4f, rectWithOpacityProperties->effect()->opacity());
+    EXPECT_EQ(groupWithOpacityProperties->effect(), rectWithOpacityProperties->effect()->parent());
+
+    // Ensure that opacity nodes are created for LayoutSVGText which inherits from LayoutSVGBlock instead of LayoutSVGModelObject.
+    LayoutObject& textWithOpacity = *document().getElementById("textWithOpacity")->layoutObject();
+    ObjectPaintProperties* textWithOpacityProperties = textWithOpacity.objectPaintProperties();
+    EXPECT_EQ(0.2f, textWithOpacityProperties->effect()->opacity());
+    EXPECT_EQ(groupWithOpacityProperties->effect(), textWithOpacityProperties->effect()->parent());
+
+    // Ensure that opacity nodes are created for LayoutSVGTSpan which inherits from LayoutSVGInline instead of LayoutSVGModelObject.
+    LayoutObject& tspanWithOpacity = *document().getElementById("tspanWithOpacity")->layoutObject();
+    ObjectPaintProperties* tspanWithOpacityProperties = tspanWithOpacity.objectPaintProperties();
+    EXPECT_EQ(0.1f, tspanWithOpacityProperties->effect()->opacity());
+    EXPECT_EQ(textWithOpacityProperties->effect(), tspanWithOpacityProperties->effect()->parent());
+}
+
+TEST_F(PaintPropertyTreeBuilderTest, EffectNodesAcrossHTMLSVGBoundary)
+{
+    setBodyInnerHTML(
+        "<div id='divWithOpacity' style='opacity: 0.2;'>"
+        "  <svg id='svgRootWithOpacity' style='opacity: 0.3;'>"
+        "    <rect id='rectWithOpacity' opacity='0.4' />"
+        "  </svg>"
+        "</div>");
+
+    LayoutObject& divWithOpacity = *document().getElementById("divWithOpacity")->layoutObject();
+    ObjectPaintProperties* divWithOpacityProperties = divWithOpacity.objectPaintProperties();
+    EXPECT_EQ(0.2f, divWithOpacityProperties->effect()->opacity());
+    EXPECT_EQ(nullptr, divWithOpacityProperties->effect()->parent());
+
+    LayoutObject& svgRootWithOpacity = *document().getElementById("svgRootWithOpacity")->layoutObject();
+    ObjectPaintProperties* svgRootWithOpacityProperties = svgRootWithOpacity.objectPaintProperties();
+    EXPECT_EQ(0.3f, svgRootWithOpacityProperties->effect()->opacity());
+    EXPECT_EQ(divWithOpacityProperties->effect(), svgRootWithOpacityProperties->effect()->parent());
+
+    LayoutObject& rectWithOpacity = *document().getElementById("rectWithOpacity")->layoutObject();
+    ObjectPaintProperties* rectWithOpacityProperties = rectWithOpacity.objectPaintProperties();
+    EXPECT_EQ(0.4f, rectWithOpacityProperties->effect()->opacity());
+    EXPECT_EQ(svgRootWithOpacityProperties->effect(), rectWithOpacityProperties->effect()->parent());
+}
+
+TEST_F(PaintPropertyTreeBuilderTest, EffectNodesAcrossSVGHTMLBoundary)
+{
+    setBodyInnerHTML(
+        "<svg id='svgRootWithOpacity' style='opacity: 0.3;'>"
+        "  <foreignObject id='foreignObjectWithOpacity' opacity='0.4'>"
+        "    <body>"
+        "      <span id='spanWithOpacity' style='opacity: 0.5'/>"
+        "    </body>"
+        "  </foreignObject>"
+        "</svg>");
+
+    LayoutObject& svgRootWithOpacity = *document().getElementById("svgRootWithOpacity")->layoutObject();
+    ObjectPaintProperties* svgRootWithOpacityProperties = svgRootWithOpacity.objectPaintProperties();
+    EXPECT_EQ(0.3f, svgRootWithOpacityProperties->effect()->opacity());
+    EXPECT_EQ(nullptr, svgRootWithOpacityProperties->effect()->parent());
+
+    LayoutObject& foreignObjectWithOpacity = *document().getElementById("foreignObjectWithOpacity")->layoutObject();
+    ObjectPaintProperties* foreignObjectWithOpacityProperties = foreignObjectWithOpacity.objectPaintProperties();
+    EXPECT_EQ(0.4f, foreignObjectWithOpacityProperties->effect()->opacity());
+    EXPECT_EQ(svgRootWithOpacityProperties->effect(), foreignObjectWithOpacityProperties->effect()->parent());
+
+    LayoutObject& spanWithOpacity = *document().getElementById("spanWithOpacity")->layoutObject();
+    ObjectPaintProperties* spanWithOpacityProperties = spanWithOpacity.objectPaintProperties();
+    EXPECT_EQ(0.5f, spanWithOpacityProperties->effect()->opacity());
+    EXPECT_EQ(foreignObjectWithOpacityProperties->effect(), spanWithOpacityProperties->effect()->parent());
+}
+
+TEST_F(PaintPropertyTreeBuilderTest, TransformNodesInSVG)
+{
+    setBodyInnerHTML(
+        "<style>"
+        "  body {"
+        "    margin: 0px;"
+        "  }"
+        "  svg {"
+        "    margin-left: 50px;"
+        "    transform: translate3D(1px, 2px, 3px);"

[jbroman, 2015/11/20 19:09:20]

super-nit: technically, "translate3d" (with a lowercase d)

[pdr., 2015/11/20 19:33:41]

3done.

+        "    position: absolute;"
+        "    left: 20px;"
+        "    top: 25px;"
+        "  }"
+        "  rect {"
+        "    transform: translate(100px, 100px) rotate(45deg);"
+        "    transform-origin: 50px 25px;"
+        "  }"
+        "</style>"
+        "<svg id='svgRootWith3dTransform' width='100px' height='100px'>"
+        "  <rect id='rectWith2dTransform' width='100px' height='100px' />"
+        "</svg>");
+
+    LayoutObject& svgRootWith3dTransform = *document().getElementById("svgRootWith3dTransform")->layoutObject();
+    ObjectPaintProperties* svgRootWith3dTransformProperties = svgRootWith3dTransform.objectPaintProperties();
+    EXPECT_EQ(TransformationMatrix().translate3d(1, 2, 3), svgRootWith3dTransformProperties->transform()->matrix());
+    EXPECT_EQ(FloatPoint3D(50, 50, 0), svgRootWith3dTransformProperties->transform()->origin());
+    EXPECT_EQ(svgRootWith3dTransformProperties->paintOffsetTranslation(), svgRootWith3dTransformProperties->transform()->parent());
+    EXPECT_EQ(TransformationMatrix().translate(70, 25), svgRootWith3dTransformProperties->paintOffsetTranslation()->matrix());
+    EXPECT_EQ(document().view()->scrollTranslation(), svgRootWith3dTransformProperties->paintOffsetTranslation()->parent());
+
+    LayoutObject& rectWith2dTransform = *document().getElementById("rectWith2dTransform")->layoutObject();
+    ObjectPaintProperties* rectWith2dTransformProperties = rectWith2dTransform.objectPaintProperties();
+    TransformationMatrix matrix;
+    matrix.translate(100, 100);
+    matrix.rotate(45);
+    // SVG's transform origin is baked into the transform.
+    matrix.applyTransformOrigin(50, 25, 0);
+    EXPECT_EQ(matrix, rectWith2dTransformProperties->transform()->matrix());
+    EXPECT_EQ(FloatPoint3D(0, 0, 0), rectWith2dTransformProperties->transform()->origin());
+    // SVG does not use paint offset.
+    EXPECT_EQ(nullptr, rectWith2dTransformProperties->paintOffsetTranslation());
+}
+
+TEST_F(PaintPropertyTreeBuilderTest, SVGRootPaintOffsetTransformNode)
+{
+    setBodyInnerHTML(
+        "<style>body { margin: 0px; }</style>"
+        "<svg id='svg' style='margin-left: 50px; margin-top: 25px; width: 100px; height: 100px;' />");
+
+    LayoutObject& svg = *document().getElementById("svg")->layoutObject();
+    ObjectPaintProperties* svgProperties = svg.objectPaintProperties();
+    // Ensure that a paint offset transform is emitted for SVG, even without a CSS transform.
+    EXPECT_EQ(nullptr, svgProperties->transform());
+    EXPECT_EQ(TransformationMatrix().translate(50, 25), svgProperties->paintOffsetTranslation()->matrix());
+    EXPECT_EQ(document().view()->scrollTranslation(), svgProperties->paintOffsetTranslation()->parent());
+}
+
+// TODO(pdr): Create a test for transform nodes crossing the svg->foreignObject boundary.

[pdr., 2015/11/20 19:33:41]

I'd like to do this (crbug.com/87072 will finally be fixed!) as a followup, but
there is a real bug remaining in getting this working.

+
 } // namespace blink