Changeset 154785 in webkit


Ignore:
Timestamp:
Aug 28, 2013, 3:52:53 PM (12 years ago)
Author:
Simon Fraser
Message:

Fix compositing layers in columns
​https://bugs.webkit.org/show_bug.cgi?id=120436

Source/WebCore:

Reviewed by Dave Hyatt.

Remove the old hack in RenderLayer::updateLayerPosition() for placing
layers in columns, which changed the layer position for composited
layers; this broke hit-testing.

Fix a better way by moving compositing layers to the correct
positions that take column offsets into account, by fixing
RenderLayer::convertToLayerCoords() to optionally apply column
adjustment, and using this in the code which positions compositing layers.

Tests: compositing/columns/ancestor-clipped-in-paginated.html

compositing/columns/clipped-in-paginated.html
compositing/columns/composited-columns-vertical-rl.html
compositing/columns/composited-columns.html
compositing/columns/composited-in-paginated-rl.html
compositing/columns/composited-in-paginated-writing-mode-rl.html
compositing/columns/composited-lr-paginated-repaint.html
compositing/columns/composited-rl-paginated-repaint.html
compositing/columns/hittest-composited-in-paginated.html
compositing/columns/rotated-in-paginated.html
compositing/columns/untransformed-composited-in-paginated.html

  • rendering/RenderLayer.cpp:

(WebCore::RenderLayer::updateLayerPosition):
(WebCore::RenderLayer::convertToPixelSnappedLayerCoords):
(WebCore::accumulateOffsetTowardsAncestor):
(WebCore::RenderLayer::convertToLayerCoords):

  • rendering/RenderLayer.h:
  • rendering/RenderLayerBacking.cpp:

(WebCore::RenderLayerBacking::updateCompositedBounds):
(WebCore::RenderLayerBacking::updateGraphicsLayerGeometry):

LayoutTests:

Reviewed by Dave Hyatt.

Various testcases for compositing in columns.

  • compositing/columns/ancestor-clipped-in-paginated-expected.txt: Added.
  • compositing/columns/ancestor-clipped-in-paginated.html: Copied from LayoutTests/compositing/columns/composited-in-paginated.html.
  • compositing/columns/clipped-in-paginated-expected.txt: Added.
  • compositing/columns/clipped-in-paginated.html: Copied from LayoutTests/compositing/columns/composited-in-paginated.html.
  • compositing/columns/composited-columns-expected.txt: Added.
  • compositing/columns/composited-columns-vertical-rl-expected.txt: Added.
  • compositing/columns/composited-columns-vertical-rl.html: Added.
  • compositing/columns/composited-columns.html: Added.
  • compositing/columns/composited-in-paginated-rl-expected.txt: Added.
  • compositing/columns/composited-in-paginated-rl.html: Copied from LayoutTests/compositing/columns/composited-in-paginated.html.
  • compositing/columns/composited-in-paginated-writing-mode-rl-expected.txt: Added.
  • compositing/columns/composited-in-paginated-writing-mode-rl.html: Copied from LayoutTests/compositing/columns/composited-in-paginated.html.
  • compositing/columns/composited-in-paginated.html:
  • compositing/columns/composited-lr-paginated-repaint-expected.txt: Added.
  • compositing/columns/composited-lr-paginated-repaint.html: Added.
  • compositing/columns/composited-nested-columns-expected.txt: Added.
  • compositing/columns/composited-nested-columns.html: Added.
  • compositing/columns/composited-rl-paginated-repaint-expected.txt: Added.
  • compositing/columns/composited-rl-paginated-repaint.html: Added.
  • compositing/columns/hittest-composited-in-paginated-expected.txt: Added.
  • compositing/columns/hittest-composited-in-paginated.html: Copied from LayoutTests/compositing/columns/composited-in-paginated.html.
  • compositing/columns/rotated-in-paginated-expected.txt: Added.
  • compositing/columns/rotated-in-paginated.html: Copied from LayoutTests/compositing/columns/composited-in-paginated.html.
  • compositing/columns/untransformed-composited-in-paginated-expected.txt: Added.
  • compositing/columns/untransformed-composited-in-paginated.html: Copied from LayoutTests/compositing/columns/composited-in-paginated.html.
Location:
trunk
Files:
17 added
6 edited
7 copied

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r154781 r154785  
     12013-08-28  Simon Fraser  <simon.fraser@apple.com>
     2
     3        Fix compositing layers in columns
     4        https://bugs.webkit.org/show_bug.cgi?id=120436
     5
     6        Reviewed by Dave Hyatt.
     7       
     8        Various testcases for compositing in columns.
     9
     10        * compositing/columns/ancestor-clipped-in-paginated-expected.txt: Added.
     11        * compositing/columns/ancestor-clipped-in-paginated.html: Copied from LayoutTests/compositing/columns/composited-in-paginated.html.
     12        * compositing/columns/clipped-in-paginated-expected.txt: Added.
     13        * compositing/columns/clipped-in-paginated.html: Copied from LayoutTests/compositing/columns/composited-in-paginated.html.
     14        * compositing/columns/composited-columns-expected.txt: Added.
     15        * compositing/columns/composited-columns-vertical-rl-expected.txt: Added.
     16        * compositing/columns/composited-columns-vertical-rl.html: Added.
     17        * compositing/columns/composited-columns.html: Added.
     18        * compositing/columns/composited-in-paginated-rl-expected.txt: Added.
     19        * compositing/columns/composited-in-paginated-rl.html: Copied from LayoutTests/compositing/columns/composited-in-paginated.html.
     20        * compositing/columns/composited-in-paginated-writing-mode-rl-expected.txt: Added.
     21        * compositing/columns/composited-in-paginated-writing-mode-rl.html: Copied from LayoutTests/compositing/columns/composited-in-paginated.html.
     22        * compositing/columns/composited-in-paginated.html:
     23        * compositing/columns/composited-lr-paginated-repaint-expected.txt: Added.
     24        * compositing/columns/composited-lr-paginated-repaint.html: Added.
     25        * compositing/columns/composited-nested-columns-expected.txt: Added.
     26        * compositing/columns/composited-nested-columns.html: Added.
     27        * compositing/columns/composited-rl-paginated-repaint-expected.txt: Added.
     28        * compositing/columns/composited-rl-paginated-repaint.html: Added.
     29        * compositing/columns/hittest-composited-in-paginated-expected.txt: Added.
     30        * compositing/columns/hittest-composited-in-paginated.html: Copied from LayoutTests/compositing/columns/composited-in-paginated.html.
     31        * compositing/columns/rotated-in-paginated-expected.txt: Added.
     32        * compositing/columns/rotated-in-paginated.html: Copied from LayoutTests/compositing/columns/composited-in-paginated.html.
     33        * compositing/columns/untransformed-composited-in-paginated-expected.txt: Added.
     34        * compositing/columns/untransformed-composited-in-paginated.html: Copied from LayoutTests/compositing/columns/composited-in-paginated.html.
     35
    1362013-08-28  Denis Nomiyama  <d.nomiyama@samsung.com>
    237

  • trunk/LayoutTests/compositing/columns/ancestor-clipped-in-paginated.html

    r154784 r154785  
    33    <script>
    44        if (window.testRunner)
    5           testRunner.dumpAsText();
     5            testRunner.dumpAsText();
    66
    77        if (window.internals)
    … …  
    2323    }
    2424   
     25    .clipping {
     26        height: 100px;
     27        width: 100px;
     28        border: 1px solid black;
     29        overflow: hidden;
     30        z-index: 0;
     31    }
    2532    .box {
    26       height: 100px;
    27       width: 100px;
    28       margin: 10px;
     33      height: 200px;
     34      width: 200px;
    2935      background-color: blue;
     36      border: 20px solid darkblue;
    3037    }
    3138    .composited {
    32       -webkit-transform: translateZ(0);
     39      -webkit-transform: translateZ(0)
    3340    }
    3441    </style>
    … …  
    3845  <div class="spacer"></div>
    3946  <div class="spacer"></div>
    40   <div class="composited box"></div>
     47  <div class="clipping">
     48      <div class="composited box"></div>
     49  </div>
    4150<pre id="layers">Layer tree goes here in DRT</pre>
    4251

  • trunk/LayoutTests/compositing/columns/clipped-in-paginated.html

    r154784 r154785  
    33    <script>
    44        if (window.testRunner)
    5           testRunner.dumpAsText();
     5            testRunner.dumpAsText();
    66
    77        if (window.internals)
    … …  
    1717    <style>
    1818    .spacer {
    19       height: 350px;
    20       width: 100%;
    21       margin: 10px;
    22       background-color: silver;
     19        height: 350px;
     20        width: 100%;
     21        margin: 10px;
     22        background-color: silver;
    2323    }
    2424   
     25    .clipping {
     26        height: 100px;
     27        width: 100px;
     28        border: 1px solid black;
     29        overflow: hidden;
     30    }
    2531    .box {
    26       height: 100px;
    27       width: 100px;
    28       margin: 10px;
    29       background-color: blue;
     32        height: 200px;
     33        width: 200px;
     34        background-color: blue;
     35        border: 20px solid darkblue;
    3036    }
    3137    .composited {
    32       -webkit-transform: translateZ(0);
     38        -webkit-transform: translateZ(0)
    3339    }
    3440    </style>
    … …  
    3844  <div class="spacer"></div>
    3945  <div class="spacer"></div>
    40   <div class="composited box"></div>
     46  <div class="clipping">
     47      <div class="composited box"></div>
     48  </div>
    4149<pre id="layers">Layer tree goes here in DRT</pre>
    4250

  • trunk/LayoutTests/compositing/columns/composited-in-paginated-rl.html

    r154784 r154785  
    66
    77        if (window.internals)
    8             internals.setPagination(document, "LeftToRightPaginated", 0);
     8            internals.setPagination(document, "RightToLeftPaginated", 0);
    99           
    1010        function dumpLayers()

  • trunk/LayoutTests/compositing/columns/composited-in-paginated-writing-mode-rl.html

    r154784 r154785  
    1818    .spacer {
    1919      height: 350px;
    20       width: 100%;
     20      width: 300px;
    2121      margin: 10px;
    2222      background-color: silver;
    … …  
    3434    </style>
    3535</head>
    36 <body>
     36<body style="-webkit-writing-mode: vertical-rl;">
    3737
     38  <div class="spacer"></div>
     39  <div class="spacer"></div>
    3840  <div class="spacer"></div>
    3941  <div class="spacer"></div>

  • trunk/LayoutTests/compositing/columns/composited-in-paginated.html

    r130689 r154785  
    2929      background-color: blue;
    3030    }
     31    .box:hover {
     32        background-color: orange;
     33    }
    3134    .composited {
    3235      -webkit-transform: translateZ(0);

  • trunk/LayoutTests/compositing/columns/hittest-composited-in-paginated.html

    r154784 r154785  
    33    <script>
    44        if (window.testRunner)
    5           testRunner.dumpAsText();
     5            testRunner.dumpAsText();
    66
    77        if (window.internals)
    8             internals.setPagination(document, "LeftToRightPaginated", 0);
     8            internals.setPagination(document, "LeftToRightPaginated", 10, 400);
    99           
    1010        function dumpLayers()
    1111        {
     12            var result = "Element at 500, 200: " + document.elementFromPoint(500, 200).classList + "\n";
     13
    1214            if (window.testRunner)
    13                 document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
     15                result += window.internals.layerTreeAsText(document);
     16               
     17            document.getElementById('layers').innerText = result;
    1418        }
     19       
    1520        window.addEventListener('load', dumpLayers, false);
    1621    </script>
    1722    <style>
    1823    .spacer {
    19       height: 350px;
    20       width: 100%;
    21       margin: 10px;
    22       background-color: silver;
     24        height: 350px;
     25        width: 100%;
     26        margin: 10px;
     27        background-color: silver;
    2328    }
    2429   
    2530    .box {
    26       height: 100px;
    27       width: 100px;
    28       margin: 10px;
    29       background-color: blue;
     31        height: 100px;
     32        width: 100px;
     33        margin: 10px;
     34        background-color: blue;
    3035    }
    3136    .composited {

  • trunk/LayoutTests/compositing/columns/rotated-in-paginated.html

    r154784 r154785  
    1717    <style>
    1818    .spacer {
    19       height: 350px;
    20       width: 100%;
    21       margin: 10px;
    22       background-color: silver;
     19        height: 350px;
     20        width: 100%;
     21        margin: 10px;
     22        background-color: silver;
    2323    }
    2424   
    2525    .box {
    26       height: 100px;
    27       width: 100px;
    28       margin: 10px;
    29       background-color: blue;
     26        height: 100px;
     27        width: 100px;
     28        margin: 10px;
     29        background-color: blue;
    3030    }
    3131    .composited {
    32       -webkit-transform: translateZ(0);
     32        -webkit-transform: rotate3d(0, 0, 1, 45deg);
    3333    }
    3434    </style>

  • trunk/LayoutTests/compositing/columns/untransformed-composited-in-paginated.html

    r154784 r154785  
    33    <script>
    44        if (window.testRunner)
    5           testRunner.dumpAsText();
     5            testRunner.dumpAsText();
    66
    77        if (window.internals)
    … …  
    1717    <style>
    1818    .spacer {
    19       height: 350px;
    20       width: 100%;
    21       margin: 10px;
    22       background-color: silver;
     19        height: 350px;
     20        width: 100%;
     21        margin: 10px;
     22        background-color: silver;
    2323    }
    2424   
    2525    .box {
    26       height: 100px;
    27       width: 100px;
    28       margin: 10px;
    29       background-color: blue;
     26        height: 100px;
     27        width: 100px;
     28        margin: 10px;
     29        background-color: blue;
    3030    }
     31
     32    .wrapper {
     33        position: relative;
     34        border: 1px solid black;
     35        padding: 10px;
     36    }
     37
     38    .second {
     39        position: relative;
     40        top: -10px;
     41        background-color: orange;
     42    }
     43
    3144    .composited {
    32       -webkit-transform: translateZ(0);
     45        -webkit-transform: rotate3d(0, 0, 1, 45deg);
    3346    }
    3447    </style>
    … …  
    3851  <div class="spacer"></div>
    3952  <div class="spacer"></div>
    40   <div class="composited box"></div>
     53
     54  <div class="wrapper">
     55      <div class="composited box"></div>
     56      <div class="second box"></div>
     57  </div>
     58
    4159<pre id="layers">Layer tree goes here in DRT</pre>
    4260

  • trunk/Source/WebCore/ChangeLog

    r154783 r154785  
     12013-08-28  Simon Fraser  <simon.fraser@apple.com>
     2
     3        Fix compositing layers in columns
     4        https://bugs.webkit.org/show_bug.cgi?id=120436
     5
     6        Reviewed by Dave Hyatt.
     7       
     8        Remove the old hack in RenderLayer::updateLayerPosition() for placing
     9        layers in columns, which changed the layer position for composited
     10        layers; this broke hit-testing.
     11       
     12        Fix a better way by moving compositing layers to the correct
     13        positions that take column offsets into account, by fixing
     14        RenderLayer::convertToLayerCoords() to optionally apply column
     15        adjustment, and using this in the code which positions compositing layers.
     16
     17        Tests: compositing/columns/ancestor-clipped-in-paginated.html
     18               compositing/columns/clipped-in-paginated.html
     19               compositing/columns/composited-columns-vertical-rl.html
     20               compositing/columns/composited-columns.html
     21               compositing/columns/composited-in-paginated-rl.html
     22               compositing/columns/composited-in-paginated-writing-mode-rl.html
     23               compositing/columns/composited-lr-paginated-repaint.html
     24               compositing/columns/composited-rl-paginated-repaint.html
     25               compositing/columns/hittest-composited-in-paginated.html
     26               compositing/columns/rotated-in-paginated.html
     27               compositing/columns/untransformed-composited-in-paginated.html
     28
     29        * rendering/RenderLayer.cpp:
     30        (WebCore::RenderLayer::updateLayerPosition):
     31        (WebCore::RenderLayer::convertToPixelSnappedLayerCoords):
     32        (WebCore::accumulateOffsetTowardsAncestor):
     33        (WebCore::RenderLayer::convertToLayerCoords):
     34        * rendering/RenderLayer.h:
     35        * rendering/RenderLayerBacking.cpp:
     36        (WebCore::RenderLayerBacking::updateCompositedBounds):
     37        (WebCore::RenderLayerBacking::updateGraphicsLayerGeometry):
     38
    1392013-08-28  Brent Fulgham  <bfulgham@webkit.org>
    240

  • trunk/Source/WebCore/rendering/RenderLayer.cpp

    r154583 r154785  
    12591259        }
    12601260    } else if (parent()) {
    1261         if (isComposited()) {
    1262             // FIXME: Composited layers ignore pagination, so about the best we can do is make sure they're offset into the appropriate column.
    1263             // They won't split across columns properly.
    1264             LayoutSize columnOffset;
    1265             if (!parent()->renderer().hasColumns() && parent()->renderer().isRoot() && renderer().view().hasColumns())
    1266                 renderer().view().adjustForColumns(columnOffset, localPoint);
    1267             else
    1268                 parent()->renderer().adjustForColumns(columnOffset, localPoint);
    1269 
    1270             localPoint += columnOffset;
    1271         }
    1272 
    12731261        if (parent()->renderer().hasOverflowClip()) {
    12741262            IntSize scrollOffset = parent()->scrolledContentOffset();
    … …  
    18921880}
    18931881
    1894 void RenderLayer::convertToPixelSnappedLayerCoords(const RenderLayer* ancestorLayer, IntPoint& roundedLocation) const
     1882void RenderLayer::convertToPixelSnappedLayerCoords(const RenderLayer* ancestorLayer, IntPoint& roundedLocation, ColumnOffsetAdjustment adjustForColumns) const
    18951883{
    18961884    LayoutPoint location = roundedLocation;
    1897     convertToLayerCoords(ancestorLayer, location);
     1885    convertToLayerCoords(ancestorLayer, location, adjustForColumns);
    18981886    roundedLocation = roundedIntPoint(location);
    18991887}
    19001888
    1901 void RenderLayer::convertToPixelSnappedLayerCoords(const RenderLayer* ancestorLayer, IntRect& roundedRect) const
     1889void RenderLayer::convertToPixelSnappedLayerCoords(const RenderLayer* ancestorLayer, IntRect& roundedRect, ColumnOffsetAdjustment adjustForColumns) const
    19021890{
    19031891    LayoutRect rect = roundedRect;
    1904     convertToLayerCoords(ancestorLayer, rect);
     1892    convertToLayerCoords(ancestorLayer, rect, adjustForColumns);
    19051893    roundedRect = pixelSnappedIntRect(rect);
    19061894}
    19071895
    19081896// Returns the layer reached on the walk up towards the ancestor.
    1909 static inline const RenderLayer* accumulateOffsetTowardsAncestor(const RenderLayer* layer, const RenderLayer* ancestorLayer, LayoutPoint& location)
     1897static inline const RenderLayer* accumulateOffsetTowardsAncestor(const RenderLayer* layer, const RenderLayer* ancestorLayer, LayoutPoint& location, RenderLayer::ColumnOffsetAdjustment adjustForColumns)
    19101898{
    19111899    ASSERT(ancestorLayer != layer);
    … …  
    20122000
    20132001    location += toSize(layer->location());
     2002
     2003    if (adjustForColumns == RenderLayer::AdjustForColumns) {
     2004        if (RenderLayer* parentLayer = layer->parent()) {
     2005            LayoutSize layerColumnOffset;
     2006            parentLayer->renderer().adjustForColumns(layerColumnOffset, location);
     2007            location += layerColumnOffset;
     2008        }
     2009    }
     2010
    20142011    return parentLayer;
    20152012}
    20162013
    2017 void RenderLayer::convertToLayerCoords(const RenderLayer* ancestorLayer, LayoutPoint& location) const
     2014void RenderLayer::convertToLayerCoords(const RenderLayer* ancestorLayer, LayoutPoint& location, ColumnOffsetAdjustment adjustForColumns) const
    20182015{
    20192016    if (ancestorLayer == this)
    … …  
    20222019    const RenderLayer* currLayer = this;
    20232020    while (currLayer && currLayer != ancestorLayer)
    2024         currLayer = accumulateOffsetTowardsAncestor(currLayer, ancestorLayer, location);
    2025 }
    2026 
    2027 void RenderLayer::convertToLayerCoords(const RenderLayer* ancestorLayer, LayoutRect& rect) const
     2021        currLayer = accumulateOffsetTowardsAncestor(currLayer, ancestorLayer, location, adjustForColumns);
     2022}
     2023
     2024void RenderLayer::convertToLayerCoords(const RenderLayer* ancestorLayer, LayoutRect& rect, ColumnOffsetAdjustment adjustForColumns) const
    20282025{
    20292026    LayoutPoint delta;
    2030     convertToLayerCoords(ancestorLayer, delta);
     2027    convertToLayerCoords(ancestorLayer, delta, adjustForColumns);
    20312028    rect.move(-delta.x(), -delta.y());
    20322029}

  • trunk/Source/WebCore/rendering/RenderLayer.h

    r154583 r154785  
    599599    }
    600600
    601     void convertToPixelSnappedLayerCoords(const RenderLayer* ancestorLayer, IntPoint& location) const;
    602     void convertToPixelSnappedLayerCoords(const RenderLayer* ancestorLayer, IntRect&) const;
    603     void convertToLayerCoords(const RenderLayer* ancestorLayer, LayoutPoint& location) const;
    604     void convertToLayerCoords(const RenderLayer* ancestorLayer, LayoutRect&) const;
     601    // FIXME: adjustForColumns allows us to position compositing layers in columns correctly, but eventually they need to be split across columns too.
     602    enum ColumnOffsetAdjustment { DontAdjustForColumns, AdjustForColumns };
     603    void convertToPixelSnappedLayerCoords(const RenderLayer* ancestorLayer, IntPoint& location, ColumnOffsetAdjustment adjustForColumns = DontAdjustForColumns) const;
     604    void convertToPixelSnappedLayerCoords(const RenderLayer* ancestorLayer, IntRect&, ColumnOffsetAdjustment adjustForColumns = DontAdjustForColumns) const;
     605    void convertToLayerCoords(const RenderLayer* ancestorLayer, LayoutPoint&, ColumnOffsetAdjustment adjustForColumns = DontAdjustForColumns) const;
     606    void convertToLayerCoords(const RenderLayer* ancestorLayer, LayoutRect&, ColumnOffsetAdjustment adjustForColumns = DontAdjustForColumns) const;
    605607
    606608    int zIndex() const { return renderer().style()->zIndex(); }

  • trunk/Source/WebCore/rendering/RenderLayerBacking.cpp

    r154715 r154785  
    437437
    438438        LayoutPoint delta;
    439         m_owningLayer->convertToLayerCoords(rootLayer, delta);
     439        m_owningLayer->convertToLayerCoords(rootLayer, delta, RenderLayer::AdjustForColumns);
    440440        clippingBounds.move(-delta.x(), -delta.y());
    441441
    … …  
    636636    LayoutRect localRawCompositingBounds = compositedBounds();
    637637    LayoutPoint rawDelta;
    638     m_owningLayer->convertToLayerCoords(compAncestor, rawDelta);
     638    m_owningLayer->convertToLayerCoords(compAncestor, rawDelta, RenderLayer::AdjustForColumns);
    639639    IntPoint delta = flooredIntPoint(rawDelta);
    640640    m_subpixelAccumulation = toLayoutSize(rawDelta.fraction());
Note: See TracChangeset for help on using the changeset viewer.