third_party/WebKit/LayoutTests/fast/repaint/svg-layout-root-style-attr-update.html

   1 <!DOCTYPE html>
   2 <body style="overflow:hidden" onload="test()">
   3 <div id="other"> </div>
   4 <div>
   5   <div style="position:absolute; top: 0px; overflow:hidden; width:500px; height:500px;" id="grandparent">
   6     <div style="position:absolute; top: 0px; overflow:hidden; width:500px; height:500px;" id="root">
   7     </div>
   8   </div>
   9 </div>
  10 <script type="text/javascript">
  11 function test() {
  12     // create some SVG
  13     var svgroot = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  14     svgroot.setAttribute("width", "100%");
  15     svgroot.setAttribute("height", "100%");
  16     document.getElementById("root").appendChild(svgroot);
  17     // add a red rectangle that will be covered up by the green rectangle
  18     var redRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  19     redRect.setAttribute("fill", "red");
  20     redRect.setAttribute("x", "50%");
  21     redRect.setAttribute("y", "10");
  22     redRect.setAttribute("width", "50%");
  23     redRect.setAttribute("height", "50%");
  24     svgroot.style.position = "absolute";
  25     svgroot.style.top="0px";
  26     svgroot.appendChild(redRect);
  27     // add a green rectangle to the left of the red one
  28     var greenRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  29     greenRect.setAttribute("fill", "green");
  30     greenRect.setAttribute("x", "0%");
  31     greenRect.setAttribute("y", "10");
  32     greenRect.setAttribute("width", "50%");
  33     svgroot.appendChild(greenRect);
  34     document.body.offsetLeft;
  35     // dirty an SVG attribute
  36     greenRect.setAttribute("height", "50%");
  37     // make sure the svg root's .style attribute is out of date
  38     svgroot.style.position = "absolute";
  39     // force layout. this will be rooted at the LayoutSVGRoot and will set m_posChildNeedsLayout on its
  40     // containing LayoutBlockFlow (corresponding to DIV#root)
  41     document.body.offsetWidth;
  42     // dirty an SVG attribute, will set FrameView::m_layoutRoot to the LayoutSVGRoot
  43     greenRect.setAttribute("width", "50%");
  44     // dirty a normal DOM attribute in a separate part of the DOM.  this is where things go awry since
  45     // FrameView::scheduleRelayoutOfSubtree will clear out its m_layoutRoot and call
  46     // LayoutObject::markContainingBlocksForLayout() on the LayoutSVGRoot.  Since the LayoutSVGRoot's
  47     // container already has m_posChildNeedsLayout set, the LayoutSVGRoot's container's container
  48     // (corresponding to the DIV#grandparent) will not have any needs layout flags set on it.
  49     document.getElementById('other').style.width="500px";
  50     // Run a layout pass.  This will propagate the render tree up to the DIV#other's render object but
  51     // will not traverse into the svg subtree at all since the DIV#grandparent's render object is
  52     // not marked as needing layout.
  53     document.body.offsetWidth;
  54     // This goes into the void since the LayoutSVGRoot is already marked as needsLayout but there is no
  55     // layout pending.
  56     greenRect.setAttribute("x", "50%");
  57 }
  58 </script>
  59 </body>
  60