[CSS Regions] The layers from the flow thread should be collected under the regions...
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 26 Sep 2013 08:20:57 +0000 (08:20 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 26 Sep 2013 08:20:57 +0000 (08:20 +0000)
https://bugs.webkit.org/show_bug.cgi?id=120457

Patch by Mihai Maerean <mmaerean@adobe.com> on 2013-09-26
Reviewed by David Hyatt.

Source/WebCore:

This patch is based on the work of Alexandru Chiculita at https://bugs.webkit.org/attachment.cgi?id=203872&action=review

The composited layers inside the named flow threads are collected as part of the regions.
When a region displays a layer that needs accelerated compositing we activate the accelerated compositing for
that region too (inside RenderFlowThread::updateAllLayerToRegionMappings).

Tests: fast/regions/layers/accelerated-compositing/crash-transform-inside-region.html
       fast/regions/layers/accelerated-compositing/floated-region-with-transformed-child.html
       fast/regions/layers/accelerated-compositing/move-layer-from-one-region-to-another.html
       fast/regions/layers/accelerated-compositing/propagate-region-box-shadow-border-padding.html
       fast/regions/layers/accelerated-compositing/propagate-region-box-shadow-border-padding-for-video.html
       fast/regions/layers/accelerated-compositing/region-as-layer-in-another-flowthread.html
       fast/regions/layers/accelerated-compositing/transform-transparent-positioned-video-inside-region.html
       fast/regions/layers/accelerated-compositing/transformed-layer-inside-transformed-layer.html
       fast/regions/layers/accelerated-compositing/z-index.html: Added.
       fast/regions/layers/accelerated-compositing/z-index-update.html: Added.

* rendering/FlowThreadController.cpp:
(WebCore::FlowThreadController::updateRenderFlowThreadLayersIfNeeded):
* rendering/RenderFlowThread.cpp:
(WebCore::RenderFlowThread::layout): When the layout of the flow thread is over (including the 2 phase layout),
we update all the mappings between the layers inside the flow thread and the regions where those layers will be
painted.
(WebCore::RenderFlowThread::hasCompositingRegionDescendant): Whether any of the regions has a compositing descendant.
(WebCore::RenderFlowThread::getLayerListForRegion):
(WebCore::RenderFlowThread::regionForCompositedLayer):
(WebCore::RenderFlowThread::cachedRegionForCompositedLayer):
(WebCore::RenderFlowThread::updateLayerToRegionMappings): Triggers an update of the layers if a layer has moved
from a region to another since the last update.
(WebCore::RenderFlowThread::updateAllLayerToRegionMappings):
* rendering/RenderFlowThread.h:
* rendering/RenderGeometryMap.cpp:
(WebCore::RenderGeometryMap::pushRenderFlowThread):
* rendering/RenderGeometryMap.h:
* rendering/RenderLayer.cpp:
(WebCore::RenderLayer::calculateLayerBounds): The RenderNamedFlowThread is ignored when we calculate the bounds
of the RenderView.
* rendering/RenderLayer.h:
* rendering/RenderLayerBacking.cpp:
(WebCore::RenderLayerBacking::shouldClipCompositedBounds): Not if it's inside an out of flow Flow Thread.
(WebCore::RenderLayerBacking::updateGraphicsLayerGeometry): Now adjusts the ancestorCompositingBounds for the FlowThread.
(WebCore::enclosingFlowThreadAncestor):
(WebCore::RenderLayerBacking::adjustAncestorCompositingBoundsForFlowThread): Make sure that the region propagates
its borders, paddings, outlines or box-shadows to layers inside it.
* rendering/RenderLayerBacking.h:
* rendering/RenderLayerCompositor.cpp:
(WebCore::RenderLayerCompositor::computeCompositingRequirements): Now calls computeRegionCompositingRequirements.
(WebCore::RenderLayerCompositor::computeRegionCompositingRequirements):
(WebCore::RenderLayerCompositor::rebuildCompositingLayerTree): Do not iterate the RenderFlowThread directly. We
are going to collect composited layers as part of regions.
(WebCore::RenderLayerCompositor::rebuildRegionCompositingLayerTree):
(WebCore::RenderLayerCompositor::canBeComposited): CSS Regions flow threads do not need to be composited as we
use composited RenderRegions to render the background of the RenderFlowThread.
(WebCore::RenderLayerCompositor::requiresCompositingForIndirectReason): If it's a region.
* rendering/RenderLayerCompositor.h:
* rendering/RenderMultiColumnSet.cpp:
(WebCore::RenderMultiColumnSet::adjustRegionBoundsFromFlowThreadPortionRect):
* rendering/RenderMultiColumnSet.h:
* rendering/RenderElement.cpp:
(WebCore::RenderObject::propagateStyleToAnonymousChildren): Not for RenderFlowThreads, as they are updated
through the RenderView::styleDidChange function.
* rendering/RenderRegion.cpp:
(WebCore::RenderRegion::setRequiresLayerForCompositing):
(WebCore::RenderRegion::adjustRegionBoundsFromFlowThreadPortionRect):
* rendering/RenderRegion.h:
(WebCore::toRenderRegion):
* rendering/RenderRegionSet.h:
(WebCore::RenderRegionSet::requiresLayer): Never.
* rendering/RenderTreeAsText.cpp:
(WebCore::writeLayers):

LayoutTests:

* fast/regions/layers/accelerated-compositing/crash-transform-inside-region.html: Added.
* fast/regions/layers/accelerated-compositing/crash-transform-inside-region-expected.html: Added.
* fast/regions/layers/accelerated-compositing/floated-region-with-transformed-child.html: Added.
* fast/regions/layers/accelerated-compositing/floated-region-with-transformed-child-expected.html: Added.
* fast/regions/layers/accelerated-compositing/move-layer-from-one-region-to-another.html: Added.
* fast/regions/layers/accelerated-compositing/move-layer-from-one-region-to-another-expected.html: Added.
* fast/regions/layers/accelerated-compositing/propagate-region-box-shadow-border-padding.html: Added.
* fast/regions/layers/accelerated-compositing/propagate-region-box-shadow-border-padding-expected.html: Added.
* fast/regions/layers/accelerated-compositing/propagate-region-box-shadow-border-padding-for-video.html: Added.
* fast/regions/layers/accelerated-compositing/propagate-region-box-shadow-border-padding-for-video-expected.html: Added.
* fast/regions/layers/accelerated-compositing/region-as-layer-in-another-flowthread.html: Added.
* fast/regions/layers/accelerated-compositing/region-as-layer-in-another-flowthread-expected.html: Added.
* fast/regions/layers/accelerated-compositing/transformed-layer-inside-transformed-layer.html: Added.
* fast/regions/layers/accelerated-compositing/transformed-layer-inside-transformed-layer-expected.html: Added.
* fast/regions/layers/accelerated-compositing/transform-transparent-positioned-video-inside-region.html: Added.
* fast/regions/layers/accelerated-compositing/transform-transparent-positioned-video-inside-region-expected.html: Added.
* fast/regions/layers/accelerated-compositing/z-index.html: Added.
* fast/regions/layers/accelerated-compositing/z-index-expected.html: Added.
* fast/regions/layers/accelerated-compositing/z-index-update-expected.html: Added.
* fast/regions/layers/accelerated-compositing/z-index-update.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@156451 268f45cc-cd09-0410-ab3c-d52691b4dbfc

40 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/regions/layers/accelerated-compositing/crash-transform-inside-region-expected.html [new file with mode: 0644]
LayoutTests/fast/regions/layers/accelerated-compositing/crash-transform-inside-region.html [new file with mode: 0644]
LayoutTests/fast/regions/layers/accelerated-compositing/floated-region-with-transformed-child-expected.html [new file with mode: 0644]
LayoutTests/fast/regions/layers/accelerated-compositing/floated-region-with-transformed-child.html [new file with mode: 0644]
LayoutTests/fast/regions/layers/accelerated-compositing/move-layer-from-one-region-to-another-expected.html [new file with mode: 0644]
LayoutTests/fast/regions/layers/accelerated-compositing/move-layer-from-one-region-to-another.html [new file with mode: 0644]
LayoutTests/fast/regions/layers/accelerated-compositing/propagate-region-box-shadow-border-padding-expected.html [new file with mode: 0644]
LayoutTests/fast/regions/layers/accelerated-compositing/propagate-region-box-shadow-border-padding-for-video-expected.html [new file with mode: 0644]
LayoutTests/fast/regions/layers/accelerated-compositing/propagate-region-box-shadow-border-padding-for-video.html [new file with mode: 0644]
LayoutTests/fast/regions/layers/accelerated-compositing/propagate-region-box-shadow-border-padding.html [new file with mode: 0644]
LayoutTests/fast/regions/layers/accelerated-compositing/region-as-layer-in-another-flowthread-expected.html [new file with mode: 0644]
LayoutTests/fast/regions/layers/accelerated-compositing/region-as-layer-in-another-flowthread.html [new file with mode: 0644]
LayoutTests/fast/regions/layers/accelerated-compositing/transform-transparent-positioned-video-inside-region-expected.html [new file with mode: 0644]
LayoutTests/fast/regions/layers/accelerated-compositing/transform-transparent-positioned-video-inside-region.html [new file with mode: 0644]
LayoutTests/fast/regions/layers/accelerated-compositing/transformed-layer-inside-transformed-layer-expected.html [new file with mode: 0644]
LayoutTests/fast/regions/layers/accelerated-compositing/transformed-layer-inside-transformed-layer.html [new file with mode: 0644]
LayoutTests/fast/regions/layers/accelerated-compositing/z-index-expected.html [new file with mode: 0644]
LayoutTests/fast/regions/layers/accelerated-compositing/z-index-update-expected.html [new file with mode: 0644]
LayoutTests/fast/regions/layers/accelerated-compositing/z-index-update.html [new file with mode: 0644]
LayoutTests/fast/regions/layers/accelerated-compositing/z-index.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/FlowThreadController.cpp
Source/WebCore/rendering/RenderElement.cpp
Source/WebCore/rendering/RenderFlowThread.cpp
Source/WebCore/rendering/RenderFlowThread.h
Source/WebCore/rendering/RenderGeometryMap.cpp
Source/WebCore/rendering/RenderGeometryMap.h
Source/WebCore/rendering/RenderLayer.cpp
Source/WebCore/rendering/RenderLayer.h
Source/WebCore/rendering/RenderLayerBacking.cpp
Source/WebCore/rendering/RenderLayerBacking.h
Source/WebCore/rendering/RenderLayerCompositor.cpp
Source/WebCore/rendering/RenderLayerCompositor.h
Source/WebCore/rendering/RenderMultiColumnSet.cpp
Source/WebCore/rendering/RenderMultiColumnSet.h
Source/WebCore/rendering/RenderRegion.cpp
Source/WebCore/rendering/RenderRegion.h
Source/WebCore/rendering/RenderRegionSet.h
Source/WebCore/rendering/RenderTreeAsText.cpp

index 341c97d..e557dce 100644 (file)
@@ -1,3 +1,31 @@
+2013-09-26  Mihai Maerean  <mmaerean@adobe.com>
+
+        [CSS Regions] The layers from the flow thread should be collected under the regions' layers.
+        https://bugs.webkit.org/show_bug.cgi?id=120457
+
+        Reviewed by David Hyatt.
+
+        * fast/regions/layers/accelerated-compositing/crash-transform-inside-region.html: Added.
+        * fast/regions/layers/accelerated-compositing/crash-transform-inside-region-expected.html: Added.
+        * fast/regions/layers/accelerated-compositing/floated-region-with-transformed-child.html: Added.
+        * fast/regions/layers/accelerated-compositing/floated-region-with-transformed-child-expected.html: Added.
+        * fast/regions/layers/accelerated-compositing/move-layer-from-one-region-to-another.html: Added.
+        * fast/regions/layers/accelerated-compositing/move-layer-from-one-region-to-another-expected.html: Added.
+        * fast/regions/layers/accelerated-compositing/propagate-region-box-shadow-border-padding.html: Added.
+        * fast/regions/layers/accelerated-compositing/propagate-region-box-shadow-border-padding-expected.html: Added.
+        * fast/regions/layers/accelerated-compositing/propagate-region-box-shadow-border-padding-for-video.html: Added.
+        * fast/regions/layers/accelerated-compositing/propagate-region-box-shadow-border-padding-for-video-expected.html: Added.
+        * fast/regions/layers/accelerated-compositing/region-as-layer-in-another-flowthread.html: Added.
+        * fast/regions/layers/accelerated-compositing/region-as-layer-in-another-flowthread-expected.html: Added.
+        * fast/regions/layers/accelerated-compositing/transformed-layer-inside-transformed-layer.html: Added.
+        * fast/regions/layers/accelerated-compositing/transformed-layer-inside-transformed-layer-expected.html: Added.
+        * fast/regions/layers/accelerated-compositing/transform-transparent-positioned-video-inside-region.html: Added.
+        * fast/regions/layers/accelerated-compositing/transform-transparent-positioned-video-inside-region-expected.html: Added.
+        * fast/regions/layers/accelerated-compositing/z-index.html: Added.
+        * fast/regions/layers/accelerated-compositing/z-index-expected.html: Added.
+        * fast/regions/layers/accelerated-compositing/z-index-update-expected.html: Added.
+        * fast/regions/layers/accelerated-compositing/z-index-update.html: Added.
+
 2013-09-26  Mihnea Ovidenie  <mihnea@adobe.com>
 
         [CSSRegions] Unable to collect html element in a named flow
diff --git a/LayoutTests/fast/regions/layers/accelerated-compositing/crash-transform-inside-region-expected.html b/LayoutTests/fast/regions/layers/accelerated-compositing/crash-transform-inside-region-expected.html
new file mode 100644 (file)
index 0000000..5697747
--- /dev/null
@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+       <head>
+               <title>Bug 120457: [CSS Regions] The layers from the flow thread should be collected under the regions' layers.</title>
+               <style>
+                       html {
+                               -webkit-font-smoothing: none;
+                       }
+                       .transformed {
+                               -webkit-transform:rotateX(15deg) rotateZ(15deg);
+                       }
+                       .content {
+                       }
+                       .region {
+                               -webkit-transform:rotateZ(0deg); /*so the div is composited, just like the region*/
+                       }
+               </style>
+               <script>
+                       window.addEventListener( "load", function () {
+                               var div = document.querySelector("#transformed");
+                               for(var i = 0; i < 10; ++i ) {
+                                       div.className = "transformed content";
+                                       document.body.offsetTop;
+                                       div.className = "content";
+                                       document.body.offsetTop;
+                               }
+                       }, false);
+               </script>
+       </head>
+       <body>
+               <div id="transformed" class="transformed content">transformed content</div>
+               <div id="transformed" class="transformed content">transformed content</div>
+               <div class="content">not transformed content</div>
+               <div class="region"></div>
+               <div>Test PASSES if it doesn't crash or assert</div>
+       </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/regions/layers/accelerated-compositing/crash-transform-inside-region.html b/LayoutTests/fast/regions/layers/accelerated-compositing/crash-transform-inside-region.html
new file mode 100644 (file)
index 0000000..111e3f5
--- /dev/null
@@ -0,0 +1,38 @@
+<!doctype html>
+<html>
+       <head>
+               <title>Bug 120457: [CSS Regions] The layers from the flow thread should be collected under the regions' layers.</title>
+               <style>
+                       html {
+                               -webkit-font-smoothing: none;
+                       }
+                       .transformed {
+                               -webkit-transform:rotateX(15deg) rotateZ(15deg);
+                       }
+                       .content {
+                               -webkit-flow-into:theFlow;
+                       }
+                       .region {
+                               -webkit-flow-from:theFlow;
+                       }
+               </style>
+               <script>
+                       window.addEventListener( "load", function () {
+                               var div = document.querySelector("#transformed");
+                               for(var i = 0; i < 10; ++i ) {
+                                       div.className = "transformed content";
+                                       document.body.offsetTop;
+                                       div.className = "content";
+                                       document.body.offsetTop;
+                               }
+                       }, false);
+               </script>
+       </head>
+       <body>
+               <div id="transformed" class="transformed content">transformed content</div>
+               <div id="transformed" class="transformed content">transformed content</div>
+               <div class="content">not transformed content</div>
+               <div class="region"></div>
+               <div>Test PASSES if it doesn't crash or assert</div>
+       </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/regions/layers/accelerated-compositing/floated-region-with-transformed-child-expected.html b/LayoutTests/fast/regions/layers/accelerated-compositing/floated-region-with-transformed-child-expected.html
new file mode 100644 (file)
index 0000000..73637a4
--- /dev/null
@@ -0,0 +1,57 @@
+<html>
+       <head>
+               <title>Bug #</title>
+               <style>
+                       html {
+                               -webkit-font-smoothing: none;
+                       }
+
+                       .content {
+                       }
+                       .transformed {
+                               -webkit-transform:rotateX(15deg) rotateZ(15deg);
+                       }
+                       .region {
+                               display: inline-block;
+                               float: right;
+                               width: 210px;
+                               height: 110px;
+                               background-color: #eee;
+                               -webkit-transform:rotateZ(0deg); /*so the div is composited, just like the region*/
+                       }
+                       .text {
+                               width: 600px;
+                       }
+                       * {
+                               border:solid 1px #888;
+                               padding: 2px;
+                               margin: 3px;
+                       }
+               </style>
+               <script src="../../../../compositing/resources/media-testing.js"></script>
+               <script src="../../../../media/media-file.js"></script>
+
+               <script type="text/javascript" charset="utf-8">
+                       function testDone() {
+                               if (window.testRunner)
+                                       testRunner.notifyDone();
+                       }
+
+                       window.onload = function() {
+                               var video = document.getElementsByTagName('video')[0];
+                               setupVideo(video, '../../../../media/content/counting', null, testDone);
+                       };
+               </script>
+       </head>
+       <body>
+               <div class="text">
+                       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, cupiditate, porro, dignissimos fuga impedit corrupti suscipit tempora earum odit asperiores quia nam soluta repellat perspiciatis iste et voluptatem molestiae magni a voluptas maxime officiis iusto dolor ut dicta. 
+                       <div class="region">
+                               <div class="content">Long text inside the region</div>
+                               <video class="content transformed" height="100" width="96" id="video" controls></video>
+                               <div class="content transformed">Long text inside the region</div>
+                       </div>
+                        Et, ad sit praesentium recusandae omnis reiciendis ipsa eveniet accusantium vero reprehenderit enim minus perferendis sapiente maxime fugiat iure soluta minima suscipit.</div>
+               <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, cupiditate, porro, dignissimos fuga impedit corrupti suscipit tempora earum odit asperiores quia nam soluta repellat perspiciatis iste et voluptatem molestiae magni a voluptas maxime officiis iusto dolor ut dicta. Et, ad sit praesentium recusandae omnis reiciendis ipsa eveniet accusantium vero reprehenderit enim minus perferendis sapiente maxime fugiat iure soluta minima suscipit.</div>
+       </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/regions/layers/accelerated-compositing/floated-region-with-transformed-child.html b/LayoutTests/fast/regions/layers/accelerated-compositing/floated-region-with-transformed-child.html
new file mode 100644 (file)
index 0000000..7bef885
--- /dev/null
@@ -0,0 +1,58 @@
+<html>
+       <head>
+               <title>Bug #</title>
+               <style>
+                       html {
+                               -webkit-font-smoothing: none;
+                       }
+
+                       .content {
+                               -webkit-flow-into: theFlow;
+                       }
+                       .transformed {
+                               -webkit-transform:rotateX(15deg) rotateZ(15deg);
+                       }
+                       .region {
+                               -webkit-flow-from: theFlow;
+                               display: inline-block;
+                               float: right;
+                               width: 210px;
+                               height: 110px;
+                               background-color: #eee;
+                       }
+                       .text {
+                               width: 600px;
+                       }
+                       * {
+                               border:solid 1px #888;
+                               padding: 2px;
+                               margin: 3px;
+                       }
+               </style>
+               <script src="../../../../compositing/resources/media-testing.js"></script>
+               <script src="../../../../media/media-file.js"></script>
+
+               <script type="text/javascript" charset="utf-8">
+                       function testDone() {
+                               if (window.testRunner)
+                                       testRunner.notifyDone();
+                       }
+
+                       window.onload = function() {
+                               var video = document.getElementsByTagName('video')[0];
+                               setupVideo(video, '../../../../media/content/counting', null, testDone);
+                       };
+               </script>
+       </head>
+       <body>
+               <div class="text">
+                       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, cupiditate, porro, dignissimos fuga impedit corrupti suscipit tempora earum odit asperiores quia nam soluta repellat perspiciatis iste et voluptatem molestiae magni a voluptas maxime officiis iusto dolor ut dicta. 
+                       <div class="region"></div>
+                       Et, ad sit praesentium recusandae omnis reiciendis ipsa eveniet accusantium vero reprehenderit enim minus perferendis sapiente maxime fugiat iure soluta minima suscipit.
+               </div>
+               <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, cupiditate, porro, dignissimos fuga impedit corrupti suscipit tempora earum odit asperiores quia nam soluta repellat perspiciatis iste et voluptatem molestiae magni a voluptas maxime officiis iusto dolor ut dicta. Et, ad sit praesentium recusandae omnis reiciendis ipsa eveniet accusantium vero reprehenderit enim minus perferendis sapiente maxime fugiat iure soluta minima suscipit.</div>
+               <div class="content">Long text inside the region</div>
+               <video class="content transformed" height="100" width="96" id="video" controls></video>
+               <div class="content transformed">Long text inside the region</div>
+       </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/regions/layers/accelerated-compositing/move-layer-from-one-region-to-another-expected.html b/LayoutTests/fast/regions/layers/accelerated-compositing/move-layer-from-one-region-to-another-expected.html
new file mode 100644 (file)
index 0000000..c7ae41d
--- /dev/null
@@ -0,0 +1,64 @@
+<html>
+       <head>
+               <title>Bug 120457: [CSS Regions] The layers from the flow thread should be collected under the regions' layers.</title>
+               <style>
+                       html {
+                               -webkit-font-smoothing: none;
+                       }
+
+                       .content {
+                               width: 150px;
+                               height: 100px;
+                               background-color: Yellow;
+                       }
+
+                       body .region:nth-child(2) .content {
+                               margin-top: 0px; /*margins are collapsed when fragmented*/
+                       }
+
+                       .movesTheLayerToNextRegion {
+                               height: 225px;
+                       }
+
+                       #causesTheRegionToBeComposited {
+                               -webkit-transform:translateZ(1px); /*so the div is composited*/
+                               width: 100px;
+                               height: 40px;
+                               background-color: Lime;
+                       }
+
+                       .region {
+                               -webkit-transform:translateZ(1px); /*so the div is composited, just like the region*/
+                               height: 230px;
+                               border:solid 1px #888;
+                       }
+               </style>
+       </head>
+       <body>
+               some text 1.
+
+               <div class="region">
+                       <div id="willBeAddedToTheFlow" class="content movesTheLayerToNextRegion">goes in the 1st region.</div>
+               </div>
+
+               some text.
+
+               <div class="region">
+                       <div class="content">
+                               some text 2.
+                               <div id="causesTheRegionToBeComposited">
+                                       some text 3.
+                               </div>
+                               some text 4.
+                               <div>some text.</div>
+                               <div>some text.</div>
+                               <div>some text.</div>
+                               <div>some text.</div>
+                       </div>
+               </div>
+
+               some text 5.
+
+               <p>If we have layers that moved from one region to another, we trigger a composited layers rebuild to make sure that the regions will collect the right layers.</p>
+       </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/regions/layers/accelerated-compositing/move-layer-from-one-region-to-another.html b/LayoutTests/fast/regions/layers/accelerated-compositing/move-layer-from-one-region-to-another.html
new file mode 100644 (file)
index 0000000..1d6b480
--- /dev/null
@@ -0,0 +1,65 @@
+<html>
+       <head>
+               <title>Bug 120457: [CSS Regions] The layers from the flow thread should be collected under the regions' layers.</title>
+               <style>
+                       html {
+                               -webkit-font-smoothing: none;
+                       }
+
+                       .content {
+                               -webkit-flow-into: flow;
+                               width: 150px;
+                               height: 100px;
+                               background-color: Yellow;
+                       }
+
+                       #causesTheRegionToBeComposited {
+                               -webkit-transform: translateZ(1px);
+                               width: 100px;
+                               height: 40px;
+                               background-color: Lime;
+                       }
+
+                       .movesTheLayerToNextRegion {
+                               height: 225px;
+                       }
+
+                       .region {
+                               -webkit-flow-from: flow;
+                               height: 230px;
+                               border:solid 1px #888;
+                       }
+               </style>
+       </head>
+       <body>
+               some text 1.
+
+               <div class="content">goes in the 1st region.</div>
+
+               <div class="content">
+                       some text 2.
+                       <div id="causesTheRegionToBeComposited">
+                               some text 3.
+                       </div>
+                       some text 4.
+                       <div>some text.</div>
+                       <div>some text.</div>
+                       <div>some text.</div>
+                       <div>some text.</div>
+               </div>
+
+               <div class="region" id="r1"></div>
+
+               some text.
+
+               <div class="region" id="r2"></div>
+               some text 5.
+
+               <p>If we have layers that moved from one region to another, we trigger a composited layers rebuild to make sure that the regions will collect the right layers.</p>
+
+               <script>
+                       document.body.offsetTop; // do the layout.
+                       document.querySelector("body .content:first-child").className = "content movesTheLayerToNextRegion";
+               </script>
+       </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/regions/layers/accelerated-compositing/propagate-region-box-shadow-border-padding-expected.html b/LayoutTests/fast/regions/layers/accelerated-compositing/propagate-region-box-shadow-border-padding-expected.html
new file mode 100644 (file)
index 0000000..d390fb4
--- /dev/null
@@ -0,0 +1,50 @@
+<html>
+       <head>
+               <title>Bug 120457: [CSS Regions] The layers from the flow thread should be collected under the regions' layers.</title>
+               <style>
+                       html {
+                               -webkit-font-smoothing: none;
+                       }
+
+                       #content {
+                               width: 150px;
+                               height: 100px;
+                               background-color: Yellow;
+                               padding: 2px 3px 4px 5px;
+                               margin: 3px 4px 5px 6px;
+                       }
+
+                       #causesTheRegionToBeComposited {
+                               -webkit-transform: translateZ(-30px) translateX(-35px);
+                               width: 100px;
+                               height: 40px;
+                               background-color: Lime;
+                               padding: 4px 5px 6px 7px;
+                               margin: 5px 6px 7px 8px;
+                       }
+
+                       #region {
+                               box-shadow: 2px 2px 15px Black;
+                               border: double 3px Green;
+                               border-width: 3px 4px 5px 6px;
+                               outline: double 5px Blue;
+                               padding: 6px 7px 8px 9px;
+                               margin: 7px 8px 9px 10px;
+                       }
+               </style>
+       </head>
+       <body>
+               some text 1.
+               <div id="region">
+                       <div id="content">
+                               some text 2.
+                               <div id="causesTheRegionToBeComposited">
+                                       some text 3.
+                               </div>
+                               some text 4.
+                       </div>
+               </div>
+               some text 5.
+               <p>Make sure that the region propagates its borders, paddings, outlines or box-shadows to layers inside it.</p>
+       </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/regions/layers/accelerated-compositing/propagate-region-box-shadow-border-padding-for-video-expected.html b/LayoutTests/fast/regions/layers/accelerated-compositing/propagate-region-box-shadow-border-padding-for-video-expected.html
new file mode 100644 (file)
index 0000000..a689bb4
--- /dev/null
@@ -0,0 +1,53 @@
+<html>
+       <head>
+               <title>Bug 120457: [CSS Regions] The layers from the flow thread should be collected under the regions' layers.</title>
+               <style>
+                       html {
+                               -webkit-font-smoothing: none;
+                               background-color: #f8f8f8;
+                       }
+
+                       #content {
+                               width: 150px;
+                               background-color: Yellow;
+                               padding: 2px 3px 4px 5px;
+                               margin: 3px 4px 5px 6px;
+                       }
+
+                       #region {
+                               width: 90%;
+                               border: double 3px Green;
+                               border-width: 3px 4px 5px 6px;
+                               outline: double 5px Blue;
+                               padding: 6px 7px 8px 9px;
+                               margin: 7px 8px 9px 10px;
+                       }
+               </style>
+               <script src="../../../../compositing/resources/media-testing.js"></script>
+               <script src="../../../../media/media-file.js"></script>
+
+               <script type="text/javascript" charset="utf-8">
+                       function testDone() {
+                               if (window.testRunner)
+                                       testRunner.notifyDone();
+                       }
+
+                       window.onload = function() {
+                               var video = document.getElementsByTagName('video')[0];
+                               setupVideo(video, '../../../../media/content/counting', null, testDone);
+                       };
+               </script>
+       </head>
+       <body>
+               some text 1.
+               <div id="region">
+                       <div id="content">
+                               some text 2.
+                               <video height="270" width="480" id="video" controls></video>
+                               some text 4.
+                       </div>
+               </div>
+               some text 5.
+               <p>Make sure that the region propagates its borders, paddings, outlines or box-shadows to video layers inside it.</p>
+       </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/regions/layers/accelerated-compositing/propagate-region-box-shadow-border-padding-for-video.html b/LayoutTests/fast/regions/layers/accelerated-compositing/propagate-region-box-shadow-border-padding-for-video.html
new file mode 100644 (file)
index 0000000..63f3d3a
--- /dev/null
@@ -0,0 +1,54 @@
+<html>
+       <head>
+               <title>Bug 120457: [CSS Regions] The layers from the flow thread should be collected under the regions' layers.</title>
+               <style>
+                       html {
+                               -webkit-font-smoothing: none;
+                               background-color: #f8f8f8;
+                       }
+
+                       #content {
+                               -webkit-flow-into: flow;
+                               width: 150px;
+                               background-color: Yellow;
+                               padding: 2px 3px 4px 5px;
+                               margin: 3px 4px 5px 6px;
+                       }
+
+                       #region {
+                               -webkit-flow-from: flow;
+                               width: 90%;
+                               border: double 3px Green;
+                               border-width: 3px 4px 5px 6px;
+                               outline: double 5px Blue;
+                               padding: 6px 7px 8px 9px;
+                               margin: 7px 8px 9px 10px;
+                       }
+               </style>
+               <script src="../../../../compositing/resources/media-testing.js"></script>
+               <script src="../../../../media/media-file.js"></script>
+
+               <script type="text/javascript" charset="utf-8">
+                       function testDone() {
+                               if (window.testRunner)
+                                       testRunner.notifyDone();
+                       }
+
+                       window.onload = function() {
+                               var video = document.getElementsByTagName('video')[0];
+                               setupVideo(video, '../../../../media/content/counting', null, testDone);
+                       };
+               </script>
+       </head>
+       <body>
+               some text 1.
+               <div id="content">
+                       some text 2.
+                       <video height="270" width="480" id="video" controls></video>
+                       some text 4.
+               </div>
+               <div id="region"></div>
+               some text 5.
+               <p>Make sure that the region propagates its borders, paddings, outlines or box-shadows to video layers inside it.</p>
+       </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/regions/layers/accelerated-compositing/propagate-region-box-shadow-border-padding.html b/LayoutTests/fast/regions/layers/accelerated-compositing/propagate-region-box-shadow-border-padding.html
new file mode 100644 (file)
index 0000000..08c33c8
--- /dev/null
@@ -0,0 +1,51 @@
+<html>
+       <head>
+               <title>Bug 120457: [CSS Regions] The layers from the flow thread should be collected under the regions' layers.</title>
+               <style>
+                       html {
+                               -webkit-font-smoothing: none;
+                       }
+
+                       #content {
+                               -webkit-flow-into: flow;
+                               width: 150px;
+                               height: 100px;
+                               background-color: Yellow;
+                               padding: 2px 3px 4px 5px;
+                               margin: 3px 4px 5px 6px;
+                       }
+
+                       #causesTheRegionToBeComposited {
+                               -webkit-transform: translateZ(-30px) translateX(-35px);
+                               width: 100px;
+                               height: 40px;
+                               background-color: Lime;
+                               padding: 4px 5px 6px 7px;
+                               margin: 5px 6px 7px 8px;
+                       }
+
+                       #region {
+                               -webkit-flow-from: flow;
+                               box-shadow: 2px 2px 15px Black;
+                               border: double 3px Green;
+                               border-width: 3px 4px 5px 6px;
+                               outline: double 5px Blue;
+                               padding: 6px 7px 8px 9px;
+                               margin: 7px 8px 9px 10px;
+                       }
+               </style>
+       </head>
+       <body>
+               some text 1.
+               <div id="content">
+                       some text 2.
+                       <div id="causesTheRegionToBeComposited">
+                               some text 3.
+                       </div>
+                       some text 4.
+               </div>
+               <div id="region"></div>
+               some text 5.
+               <p>Make sure that the region propagates its borders, paddings, outlines or box-shadows to layers inside it.</p>
+       </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/regions/layers/accelerated-compositing/region-as-layer-in-another-flowthread-expected.html b/LayoutTests/fast/regions/layers/accelerated-compositing/region-as-layer-in-another-flowthread-expected.html
new file mode 100644 (file)
index 0000000..d29ee98
--- /dev/null
@@ -0,0 +1,59 @@
+<html>
+       <head>
+               <title>Bug 120457: [CSS Regions] The layers from the flow thread should be collected under the regions' layers.</title>
+               <style>
+                       html {
+                               -webkit-font-smoothing: none;
+                       }
+
+                       #content {
+                               width: 150px;
+                               height: 100px;
+                               background-color: Yellow;
+                               padding: 2px 3px 4px 5px;
+                               margin: 3px 4px 5px 6px;
+                       }
+
+                       #causesTheRegionToBeComposited {
+                               -webkit-transform: translateZ(-30px) translateX(-35px);
+                               width: 100px;
+                               height: 40px;
+                               background-color: Lime;
+                               padding: 4px 5px 6px 7px;
+                               margin: 5px 6px 7px 8px;
+                       }
+
+                       #region {
+                               box-shadow: 2px 2px 15px Black;
+                               border: double 3px Green;
+                               outline: double 5px Blue;
+                               padding: 6px 7px 8px 9px;
+                               margin: 7px 8px 9px 10px;
+                       }
+
+                       #outterRegion {
+                               box-shadow: 2px 2px 15px Black;
+                               border: double 3px Green;
+                               outline: double 5px Blue;
+                               padding: 7px 8px 9px 10px;
+                               margin: 8px 9px 10px 11px;
+                       }
+               </style>
+       </head>
+       <body>
+               some text 1.
+               <div id="outterRegion">
+                       <div id="region">
+                               <div id="content">
+                                       some text 2.
+                                       <div id="causesTheRegionToBeComposited">
+                                               some text 3.
+                                       </div>
+                                       some text 4.
+                               </div>
+                       </div>
+               </div>
+               some text 5.
+               <p>RenderRegions might become RenderLayers for the following flow threads.</p>
+       </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/regions/layers/accelerated-compositing/region-as-layer-in-another-flowthread.html b/LayoutTests/fast/regions/layers/accelerated-compositing/region-as-layer-in-another-flowthread.html
new file mode 100644 (file)
index 0000000..483bff9
--- /dev/null
@@ -0,0 +1,73 @@
+<html>
+       <head>
+               <title>Bug 120457: [CSS Regions] The layers from the flow thread should be collected under the regions' layers.</title>
+               <style>
+                       html {
+                               -webkit-font-smoothing: none;
+                       }
+
+                       #content {
+                               -webkit-flow-into: innerFlow;
+                               width: 150px;
+                               height: 100px;
+                               background-color: Yellow;
+                               padding: 2px 3px 4px 5px;
+                               margin: 3px 4px 5px 6px;
+                       }
+
+                       #causesTheRegionToBeComposited {
+                               width: 100px;
+                               height: 40px;
+                               background-color: Lime;
+                               padding: 4px 5px 6px 7px;
+                               margin: 5px 6px 7px 8px;
+                       }
+
+                       .transformed {
+                               -webkit-transform: translateZ(-30px) translateX(-35px);
+                       }
+
+                       #region {
+                               -webkit-flow-from: innerFlow;
+                               -webkit-flow-into: outterFlow;
+                               box-shadow: 2px 2px 15px Black;
+                               border: double 3px Green;
+                               outline: double 5px Blue;
+                               padding: 6px 7px 8px 9px;
+                               margin: 7px 8px 9px 10px;
+                       }
+
+                       #outterRegion {
+                               -webkit-flow-from: outterFlow;
+                               box-shadow: 2px 2px 15px Black;
+                               border: double 3px Green;
+                               outline: double 5px Blue;
+                               padding: 7px 8px 9px 10px;
+                               margin: 8px 9px 10px 11px;
+                       }
+               </style>
+       </head>
+       <body>
+               some text 1.
+
+               <div id="outterRegion"></div>
+
+               <div id="content">
+                       some text 2.
+                       <div id="causesTheRegionToBeComposited">
+                               some text 3.
+                       </div>
+                       some text 4.
+               </div>
+               <div id="region"></div>
+
+               some text 5.
+
+               <p>RenderRegions might become RenderLayers for the following flow threads.</p>
+
+               <script>
+                       document.body.offsetTop;
+                       document.querySelector("#causesTheRegionToBeComposited").className = "transformed";
+               </script>
+       </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/regions/layers/accelerated-compositing/transform-transparent-positioned-video-inside-region-expected.html b/LayoutTests/fast/regions/layers/accelerated-compositing/transform-transparent-positioned-video-inside-region-expected.html
new file mode 100644 (file)
index 0000000..d754f8a
--- /dev/null
@@ -0,0 +1,56 @@
+<html>
+       <head>
+               <title>Bug #</title>
+               <style>
+                       .transformed {
+                               -webkit-transform:rotateX(15deg) rotateZ(15deg);
+                       }
+                       .transparent {
+                               opacity: 0.5;
+                       }
+                       .positioned {
+                               position: relative;
+                       }
+                       .content {
+                               white-space: nowrap;
+                       }
+                       .region {
+                               width:200px;
+                               border-left-width: 5px;
+                               border-top-width: 1em;
+                               padding-left: 4%;
+                               padding-top: 3pt;
+                               margin: 20px;
+                               -webkit-transform:rotateZ(0deg); /*so the div is composited, just like the region*/
+                       }
+                       * {
+                               border:solid 1px #888;
+                               padding: 2px;
+                               margin: 3px;
+                       }
+               </style>
+               <script src="../../../../compositing/resources/media-testing.js"></script>
+               <script src="../../../../media/media-file.js"></script>
+
+               <script type="text/javascript" charset="utf-8">
+                       function testDone() {
+                               if (window.testRunner)
+                                       testRunner.notifyDone();
+                       }
+
+                       window.onload = function() {
+                               var video = document.getElementsByTagName('video')[0];
+                               setupVideo(video, '../../../../media/content/counting', null, testDone);
+                       };
+               </script>
+       </head>
+       <body>
+               <div class="region">
+                       <div class="transformed content">transformed content</div>
+                       <div class="transparent content">transparent content</div>
+                       <div class="positioned content">positioned content</div>
+                       <video class="content" height="270" width="480" id="video" controls></video>
+                       <div class="content">not transformed content</div>
+               </div>
+       </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/regions/layers/accelerated-compositing/transform-transparent-positioned-video-inside-region.html b/LayoutTests/fast/regions/layers/accelerated-compositing/transform-transparent-positioned-video-inside-region.html
new file mode 100644 (file)
index 0000000..f47860a
--- /dev/null
@@ -0,0 +1,56 @@
+<html>
+       <head>
+               <title>Bug #</title>
+               <style>
+                       .transformed {
+                               -webkit-transform:rotateX(15deg) rotateZ(15deg);
+                       }
+                       .transparent {
+                               opacity: 0.5;
+                       }
+                       .positioned {
+                               position: relative;
+                       }
+                       .content {
+                               -webkit-flow-into:theFlow;
+                               white-space: nowrap;
+                       }
+                       .region {
+                               -webkit-flow-from:theFlow;
+                               width:200px;
+                               border-left-width: 5px;
+                               border-top-width: 1em;
+                               padding-left: 4%;
+                               padding-top: 3pt;
+                               margin: 20px;
+                       }
+                       * {
+                               border:solid 1px #888;
+                               padding: 2px;
+                               margin: 3px;
+                       }
+               </style>
+               <script src="../../../../compositing/resources/media-testing.js"></script>
+               <script src="../../../../media/media-file.js"></script>
+
+               <script type="text/javascript" charset="utf-8">
+                       function testDone() {
+                               if (window.testRunner)
+                                       testRunner.notifyDone();
+                       }
+
+                       window.onload = function() {
+                               var video = document.getElementsByTagName('video')[0];
+                               setupVideo(video, '../../../../media/content/counting', null, testDone);
+                       };
+               </script>
+       </head>
+       <body>
+               <div class="transformed content">transformed content</div>
+               <div class="transparent content">transparent content</div>
+               <div class="positioned content">positioned content</div>
+               <video class="content" height="270" width="480" id="video" controls></video>
+               <div class="content">not transformed content</div>
+               <div class="region"></div>
+       </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/regions/layers/accelerated-compositing/transformed-layer-inside-transformed-layer-expected.html b/LayoutTests/fast/regions/layers/accelerated-compositing/transformed-layer-inside-transformed-layer-expected.html
new file mode 100644 (file)
index 0000000..a12ebb6
--- /dev/null
@@ -0,0 +1,59 @@
+<html>
+       <head>
+               <title>Bug 120457: [CSS Regions] The layers from the flow thread should be collected under the regions' layers.</title>
+               <style>
+                       html {
+                               -webkit-font-smoothing: none;
+                       }
+
+                       #content {
+                               width: 150px;
+                               height: 100px;
+                               background-color: Yellow;
+                               padding: 2px 3px 4px 5px;
+                               margin: 3px 4px 5px 6px;
+                       }
+
+                       .transformed {
+                               -webkit-transform: translateZ(-30px) translateX(-35px);
+                               width: 100px;
+                               height: 40px;
+                               background-color: Lime;
+                               padding: 4px 5px 6px 7px;
+                               margin: 5px 6px 7px 8px;
+                       }
+
+                       .inner {
+                               background-color: Cyan;
+                       }
+
+                       #region {
+                               -webkit-transform: translateZ(1px); /*so the div is composited, just like the region*/
+                               box-shadow: 2px 2px 15px Black;
+                               border: double 3px Green;
+                               border-width: 3px 4px 5px 6px;
+                               outline: double 5px Blue;
+                               padding: 6px 7px 8px 9px;
+                               margin: 7px 8px 9px 10px;
+                       }
+               </style>
+       </head>
+       <body>
+               some text 1.
+               <div id="region">
+                       <div id="content">
+                               some text 2.
+                               <div class="transformed">
+                                       some text 3.
+                                       <div class="transformed inner">
+                                               some text 4.
+                                       </div>
+                                       some text 5.
+                               </div>
+                               some text 6.
+                       </div>
+               </div>
+               some text 7.
+               <p>Rendering a transformed layer inside another transformed layer.</p>
+       </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/regions/layers/accelerated-compositing/transformed-layer-inside-transformed-layer.html b/LayoutTests/fast/regions/layers/accelerated-compositing/transformed-layer-inside-transformed-layer.html
new file mode 100644 (file)
index 0000000..0158772
--- /dev/null
@@ -0,0 +1,59 @@
+<html>
+       <head>
+               <title>Bug 120457: [CSS Regions] The layers from the flow thread should be collected under the regions' layers.</title>
+               <style>
+                       html {
+                               -webkit-font-smoothing: none;
+                       }
+
+                       #content {
+                               -webkit-flow-into: flow;
+                               width: 150px;
+                               height: 100px;
+                               background-color: Yellow;
+                               padding: 2px 3px 4px 5px;
+                               margin: 3px 4px 5px 6px;
+                       }
+
+                       .transformed {
+                               -webkit-transform: translateZ(-30px) translateX(-35px);
+                               width: 100px;
+                               height: 40px;
+                               background-color: Lime;
+                               padding: 4px 5px 6px 7px;
+                               margin: 5px 6px 7px 8px;
+                       }
+
+                       .inner {
+                               background-color: Cyan;
+                       }
+
+                       #region {
+                               -webkit-flow-from: flow;
+                               box-shadow: 2px 2px 15px Black;
+                               border: double 3px Green;
+                               border-width: 3px 4px 5px 6px;
+                               outline: double 5px Blue;
+                               padding: 6px 7px 8px 9px;
+                               margin: 7px 8px 9px 10px;
+                       }
+               </style>
+       </head>
+       <body>
+               some text 1.
+               <div id="content">
+                       some text 2.
+                       <div class="transformed">
+                               some text 3.
+                               <div class="transformed inner">
+                                       some text 4.
+                               </div>
+                               some text 5.
+                       </div>
+                       some text 6.
+               </div>
+               <div id="region"></div>
+               some text 7.
+               <p>Rendering a transformed layer inside another transformed layer.</p>
+       </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/regions/layers/accelerated-compositing/z-index-expected.html b/LayoutTests/fast/regions/layers/accelerated-compositing/z-index-expected.html
new file mode 100644 (file)
index 0000000..0ecf76a
--- /dev/null
@@ -0,0 +1,64 @@
+<html>
+       <head>
+               <title>Bug 120457: [CSS Regions] The layers from the flow thread should be collected under the regions' layers.</title>
+               <style>
+                       html {
+                               -webkit-font-smoothing: none;
+                       }
+
+                       #content {
+                               background-color: Yellow;
+                               padding: 2px 3px 4px 5px;
+                               margin: 3px 4px 5px 6px;
+                       }
+
+                       .causesTheRegionToBeComposited {
+                               -webkit-transform: translateZ(-30px) translateX(-35px);
+                               background-color: Lime;
+                               padding: 4px 5px 6px 7px;
+                               margin: 5px 6px 7px 8px;
+                               border: solid 1px Black;
+                       }
+
+                       .second {
+                               -webkit-transform: translateZ(-30px) translateX(-25px);
+                               background-color:Cyan;
+                               margin-top:-1em;
+                       }
+
+                       .z1, .z2 {
+                               position: relative;
+                       }
+
+                       .z1 {
+                               z-index: 1;
+                       }
+
+                       .z2 {
+                               z-index: 2;
+                       }
+
+                       #region {
+                               box-shadow: 2px 2px 15px Black;
+                               border: double 3px Green;
+                               border-width: 3px 4px 5px 6px;
+                               outline: double 5px Blue;
+                               padding: 6px 7px 8px 9px;
+                               margin: 7px 8px 9px 10px;
+                       }
+               </style>
+       </head>
+       <body>
+               some text 1.
+               <div id="region">
+                       <div id="content">
+                               some text 2.
+                               <div class="causesTheRegionToBeComposited z1">some text 3.</div>
+                               <div class="causesTheRegionToBeComposited second z2">some text 4.</div>
+                               some text 5.
+                       </div>
+               </div>
+               some text 6.
+               <p>z-index should work as expected.</p>
+       </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/regions/layers/accelerated-compositing/z-index-update-expected.html b/LayoutTests/fast/regions/layers/accelerated-compositing/z-index-update-expected.html
new file mode 100644 (file)
index 0000000..8ff91fc
--- /dev/null
@@ -0,0 +1,64 @@
+<html>
+       <head>
+               <title>Bug 120457: [CSS Regions] The layers from the flow thread should be collected under the regions' layers.</title>
+               <style>
+                       html {
+                               -webkit-font-smoothing: none;
+                       }
+
+                       #content {
+                               background-color: Yellow;
+                               padding: 2px 3px 4px 5px;
+                               margin: 3px 4px 5px 6px;
+                       }
+
+                       .causesTheRegionToBeComposited {
+                               -webkit-transform: translateZ(-30px) translateX(-35px);
+                               background-color: Lime;
+                               padding: 4px 5px 6px 7px;
+                               margin: 5px 6px 7px 8px;
+                               border: solid 1px Black;
+                       }
+
+                       .second {
+                               -webkit-transform: translateZ(-30px) translateX(-25px);
+                               background-color:Cyan;
+                               margin-top:-1em;
+                       }
+
+                       .z1, .z2 {
+                               position: relative;
+                       }
+
+                       .z1 {
+                               z-index: 1;
+                       }
+
+                       .z2 {
+                               z-index: 2;
+                       }
+
+                       #region {
+                               box-shadow: 2px 2px 15px Black;
+                               border: double 3px Green;
+                               border-width: 3px 4px 5px 6px;
+                               outline: double 5px Blue;
+                               padding: 6px 7px 8px 9px;
+                               margin: 7px 8px 9px 10px;
+                       }
+               </style>
+       </head>
+       <body>
+               some text 1.
+               <div id="region">
+                       <div id="content">
+                               some text 2.
+                               <div class="causesTheRegionToBeComposited z2">some text 3.</div>
+                               <div class="causesTheRegionToBeComposited second z1">some text 4.</div>
+                               some text 5.
+                       </div>
+               </div>
+               some text 6.
+               <p>z-index should work as expected.</p>
+       </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/regions/layers/accelerated-compositing/z-index-update.html b/LayoutTests/fast/regions/layers/accelerated-compositing/z-index-update.html
new file mode 100644 (file)
index 0000000..a3835ea
--- /dev/null
@@ -0,0 +1,70 @@
+<html>
+       <head>
+               <title>Bug 120457: [CSS Regions] The layers from the flow thread should be collected under the regions' layers.</title>
+               <style>
+                       html {
+                               -webkit-font-smoothing: none;
+                       }
+
+                       #content {
+                               -webkit-flow-into: flow;
+                               background-color: Yellow;
+                               padding: 2px 3px 4px 5px;
+                               margin: 3px 4px 5px 6px;
+                       }
+
+                       .causesTheRegionToBeComposited {
+                               -webkit-transform: translateZ(-30px) translateX(-35px);
+                               background-color: Lime;
+                               padding: 4px 5px 6px 7px;
+                               margin: 5px 6px 7px 8px;
+                               border: solid 1px Black;
+                       }
+
+                       .second {
+                               -webkit-transform: translateZ(-30px) translateX(-25px);
+                               background-color:Cyan;
+                               margin-top:-1em;
+                       }
+
+                       .z1, .z2 {
+                               position: relative;
+                       }
+
+                       .z1 {
+                               z-index: 1;
+                       }
+
+                       .z2 {
+                               z-index: 2;
+                       }
+
+                       #region {
+                               -webkit-flow-from: flow;
+                               box-shadow: 2px 2px 15px Black;
+                               border: double 3px Green;
+                               border-width: 3px 4px 5px 6px;
+                               outline: double 5px Blue;
+                               padding: 6px 7px 8px 9px;
+                               margin: 7px 8px 9px 10px;
+                       }
+               </style>
+       </head>
+       <body>
+               some text 1.
+               <div id="content">
+                       some text 2.
+                       <div class="causesTheRegionToBeComposited z1">some text 3.</div>
+                       <div class="causesTheRegionToBeComposited second z2">some text 4.</div>
+                       some text 5.
+               </div>
+               <div id="region"></div>
+               some text 6.
+               <p>z-index should work as expected.</p>
+               <script>
+                       document.offsetTop;
+                       document.querySelector(".causesTheRegionToBeComposited").className = "causesTheRegionToBeComposited z2";
+                       document.querySelector(".second").className = "causesTheRegionToBeComposited second z1";
+               </script>
+       </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/regions/layers/accelerated-compositing/z-index.html b/LayoutTests/fast/regions/layers/accelerated-compositing/z-index.html
new file mode 100644 (file)
index 0000000..a0c8b41
--- /dev/null
@@ -0,0 +1,65 @@
+<html>
+       <head>
+               <title>Bug 120457: [CSS Regions] The layers from the flow thread should be collected under the regions' layers.</title>
+               <style>
+                       html {
+                               -webkit-font-smoothing: none;
+                       }
+
+                       #content {
+                               -webkit-flow-into: flow;
+                               background-color: Yellow;
+                               padding: 2px 3px 4px 5px;
+                               margin: 3px 4px 5px 6px;
+                       }
+
+                       .causesTheRegionToBeComposited {
+                               -webkit-transform: translateZ(-30px) translateX(-35px);
+                               background-color: Lime;
+                               padding: 4px 5px 6px 7px;
+                               margin: 5px 6px 7px 8px;
+                               border: solid 1px Black;
+                       }
+
+                       .second {
+                               -webkit-transform: translateZ(-30px) translateX(-25px);
+                               background-color:Cyan;
+                               margin-top:-1em;
+                       }
+
+                       .z1, .z2 {
+                               position: relative;
+                       }
+
+                       .z1 {
+                               z-index: 1;
+                       }
+
+                       .z2 {
+                               z-index: 2;
+                       }
+
+                       #region {
+                               -webkit-flow-from: flow;
+                               box-shadow: 2px 2px 15px Black;
+                               border: double 3px Green;
+                               border-width: 3px 4px 5px 6px;
+                               outline: double 5px Blue;
+                               padding: 6px 7px 8px 9px;
+                               margin: 7px 8px 9px 10px;
+                       }
+               </style>
+       </head>
+       <body>
+               some text 1.
+               <div id="content">
+                       some text 2.
+                       <div class="causesTheRegionToBeComposited z1">some text 3.</div>
+                       <div class="causesTheRegionToBeComposited second z2">some text 4.</div>
+                       some text 5.
+               </div>
+               <div id="region"></div>
+               some text 6.
+               <p>z-index should work as expected.</p>
+       </body>
+</html>
\ No newline at end of file
index 8ea4b66..88816c5 100644 (file)
@@ -1,3 +1,81 @@
+2013-09-26  Mihai Maerean  <mmaerean@adobe.com>
+
+        [CSS Regions] The layers from the flow thread should be collected under the regions' layers.
+        https://bugs.webkit.org/show_bug.cgi?id=120457
+
+        Reviewed by David Hyatt.
+
+        This patch is based on the work of Alexandru Chiculita at https://bugs.webkit.org/attachment.cgi?id=203872&action=review
+
+        The composited layers inside the named flow threads are collected as part of the regions.
+        When a region displays a layer that needs accelerated compositing we activate the accelerated compositing for
+        that region too (inside RenderFlowThread::updateAllLayerToRegionMappings).
+
+        Tests: fast/regions/layers/accelerated-compositing/crash-transform-inside-region.html
+               fast/regions/layers/accelerated-compositing/floated-region-with-transformed-child.html
+               fast/regions/layers/accelerated-compositing/move-layer-from-one-region-to-another.html
+               fast/regions/layers/accelerated-compositing/propagate-region-box-shadow-border-padding.html
+               fast/regions/layers/accelerated-compositing/propagate-region-box-shadow-border-padding-for-video.html
+               fast/regions/layers/accelerated-compositing/region-as-layer-in-another-flowthread.html
+               fast/regions/layers/accelerated-compositing/transform-transparent-positioned-video-inside-region.html
+               fast/regions/layers/accelerated-compositing/transformed-layer-inside-transformed-layer.html
+               fast/regions/layers/accelerated-compositing/z-index.html: Added.
+               fast/regions/layers/accelerated-compositing/z-index-update.html: Added.
+
+        * rendering/FlowThreadController.cpp:
+        (WebCore::FlowThreadController::updateRenderFlowThreadLayersIfNeeded):
+        * rendering/RenderFlowThread.cpp:
+        (WebCore::RenderFlowThread::layout): When the layout of the flow thread is over (including the 2 phase layout),
+        we update all the mappings between the layers inside the flow thread and the regions where those layers will be
+        painted.
+        (WebCore::RenderFlowThread::hasCompositingRegionDescendant): Whether any of the regions has a compositing descendant.
+        (WebCore::RenderFlowThread::getLayerListForRegion):
+        (WebCore::RenderFlowThread::regionForCompositedLayer):
+        (WebCore::RenderFlowThread::cachedRegionForCompositedLayer):
+        (WebCore::RenderFlowThread::updateLayerToRegionMappings): Triggers an update of the layers if a layer has moved
+        from a region to another since the last update.
+        (WebCore::RenderFlowThread::updateAllLayerToRegionMappings):
+        * rendering/RenderFlowThread.h:
+        * rendering/RenderGeometryMap.cpp:
+        (WebCore::RenderGeometryMap::pushRenderFlowThread):
+        * rendering/RenderGeometryMap.h:
+        * rendering/RenderLayer.cpp:
+        (WebCore::RenderLayer::calculateLayerBounds): The RenderNamedFlowThread is ignored when we calculate the bounds
+        of the RenderView.
+        * rendering/RenderLayer.h:
+        * rendering/RenderLayerBacking.cpp:
+        (WebCore::RenderLayerBacking::shouldClipCompositedBounds): Not if it's inside an out of flow Flow Thread.
+        (WebCore::RenderLayerBacking::updateGraphicsLayerGeometry): Now adjusts the ancestorCompositingBounds for the FlowThread.
+        (WebCore::enclosingFlowThreadAncestor):
+        (WebCore::RenderLayerBacking::adjustAncestorCompositingBoundsForFlowThread): Make sure that the region propagates
+        its borders, paddings, outlines or box-shadows to layers inside it.
+        * rendering/RenderLayerBacking.h:
+        * rendering/RenderLayerCompositor.cpp:
+        (WebCore::RenderLayerCompositor::computeCompositingRequirements): Now calls computeRegionCompositingRequirements.
+        (WebCore::RenderLayerCompositor::computeRegionCompositingRequirements):
+        (WebCore::RenderLayerCompositor::rebuildCompositingLayerTree): Do not iterate the RenderFlowThread directly. We
+        are going to collect composited layers as part of regions.
+        (WebCore::RenderLayerCompositor::rebuildRegionCompositingLayerTree):
+        (WebCore::RenderLayerCompositor::canBeComposited): CSS Regions flow threads do not need to be composited as we
+        use composited RenderRegions to render the background of the RenderFlowThread.
+        (WebCore::RenderLayerCompositor::requiresCompositingForIndirectReason): If it's a region.
+        * rendering/RenderLayerCompositor.h:
+        * rendering/RenderMultiColumnSet.cpp:
+        (WebCore::RenderMultiColumnSet::adjustRegionBoundsFromFlowThreadPortionRect):
+        * rendering/RenderMultiColumnSet.h:
+        * rendering/RenderElement.cpp:
+        (WebCore::RenderObject::propagateStyleToAnonymousChildren): Not for RenderFlowThreads, as they are updated
+        through the RenderView::styleDidChange function.
+        * rendering/RenderRegion.cpp:
+        (WebCore::RenderRegion::setRequiresLayerForCompositing):
+        (WebCore::RenderRegion::adjustRegionBoundsFromFlowThreadPortionRect):
+        * rendering/RenderRegion.h:
+        (WebCore::toRenderRegion):
+        * rendering/RenderRegionSet.h:
+        (WebCore::RenderRegionSet::requiresLayer): Never.
+        * rendering/RenderTreeAsText.cpp:
+        (WebCore::writeLayers):
+
 2013-09-26  Mihnea Ovidenie  <mihnea@adobe.com>
 
         [CSSRegions] Unable to collect html element in a named flow
index 698d150..94e12ac 100644 (file)
@@ -270,7 +270,7 @@ void FlowThreadController::updateRenderFlowThreadLayersIfNeeded()
     // Walk the flow chain in reverse order because RenderRegions might become RenderLayers for the following flow threads.
     for (RenderNamedFlowThreadList::reverse_iterator iter = m_renderNamedFlowThreadList->rbegin(); iter != m_renderNamedFlowThreadList->rend(); ++iter) {
         RenderNamedFlowThread* flowRenderer = *iter;
-        flowRenderer->updateLayerToRegionMappingsIfNeeded();
+        flowRenderer->updateAllLayerToRegionMappingsIfNeeded();
     }
 }
 #endif
index 4afcea1..8b87f72 100644 (file)
@@ -670,6 +670,10 @@ void RenderElement::propagateStyleToAnonymousChildren(StylePropagationType propa
             continue;
 #endif
 
+        // RenderFlowThreads are updated through the RenderView::styleDidChange function.
+        if (child->isRenderFlowThread())
+            continue;
+
         RefPtr<RenderStyle> newStyle = RenderStyle::createAnonymousStyleWithDisplay(style(), child->style()->display());
         if (style()->specifiesColumns()) {
             if (child->style()->specifiesColumns())
index f148166..0269b10 100644 (file)
@@ -236,9 +236,10 @@ void RenderFlowThread::layout()
     // Note that there's no need to do so for the inline multi-column as we are not moving layers into different
     // containers, but just adjusting the position of the RenderLayerBacking.
     if (!m_needsTwoPhasesLayout) {
-        updateLayerToRegionMappings();
-        // FIXME: If we have layers that moved from one region to another, we should trigger
+        // If we have layers that moved from one region to another, we trigger
         // a composited layers rebuild in here to make sure that the regions will collect the right layers.
+        if (isOutOfFlowRenderFlowThread() && updateAllLayerToRegionMappings())
+            layer()->compositor().setCompositingLayersNeedRebuild();
     }
 #endif
 
@@ -250,32 +251,73 @@ void RenderFlowThread::layout()
 }
 
 #if USE(ACCELERATED_COMPOSITING)
+bool RenderFlowThread::hasCompositingRegionDescendant() const
+{
+    for (RenderRegionList::const_iterator iter = m_regionList.begin(); iter != m_regionList.end(); ++iter) {
+        RenderRegion* region = *iter;
+        if (region->hasLayer() && region->layer()->hasCompositingDescendant())
+            return true;
+    }
+    return false;
+}
+
+const RenderLayerList* RenderFlowThread::getLayerListForRegion(RenderRegion* region) const
+{
+    if (!m_regionToLayerListMap)
+        return 0;
+    ASSERT(!m_layersToRegionMappingsDirty);
+    RegionToLayerListMap::const_iterator iterator = m_regionToLayerListMap->find(region);
+    return iterator == m_regionToLayerListMap->end() ? 0 : &iterator->value;
+}
+
+// FIXME: make it const when it won't be calling regionAtBlockOffset.
 RenderRegion* RenderFlowThread::regionForCompositedLayer(RenderLayer* childLayer)
 {
-    LayoutPoint leftTopLocation = childLayer->renderBox() ? childLayer->renderBox()->flipForWritingMode(LayoutPoint()) : LayoutPoint();
-    LayoutPoint flowThreadOffset = flooredLayoutPoint(childLayer->renderer().localToContainerPoint(leftTopLocation, this, ApplyContainerFlip));
+    if (childLayer->renderBox()) {
+        RenderRegion* startRegion = 0;
+        RenderRegion* endRegion = 0;
+        getRegionRangeForBox(childLayer->renderBox(), startRegion, endRegion);
+        // The video tag is such a box that doesn't have a region range because it's inline (by default).
+        if (startRegion)
+            return startRegion;
+    }
+
+    // FIXME: remove this when we'll have region ranges for inlines as well.
+    LayoutPoint flowThreadOffset = flooredLayoutPoint(childLayer->renderer().localToContainerPoint(LayoutPoint(), this, ApplyContainerFlip));
     return regionAtBlockOffset(0, flipForWritingMode(isHorizontalWritingMode() ? flowThreadOffset.y() : flowThreadOffset.x()), true, DisallowRegionAutoGeneration);
 }
 
-void RenderFlowThread::updateRegionForRenderLayer(RenderLayer* layer, LayerToRegionMap& layerToRegionMap, RegionToLayerListMap& regionToLayerListMap, bool& needsLayerUpdate)
+RenderRegion* RenderFlowThread::cachedRegionForCompositedLayer(RenderLayer* childLayer) const
+{
+    if (!m_layerToRegionMap)
+        return 0;
+    ASSERT(!m_layersToRegionMappingsDirty);
+    return m_layerToRegionMap->get(childLayer);
+}
+
+// FIXME: Make it const when regionForCompositedLayer will be const.
+void RenderFlowThread::updateLayerToRegionMappings(RenderLayer* layer, LayerToRegionMap& layerToRegionMap, RegionToLayerListMap& regionToLayerListMap, bool& needsLayerUpdate)
 {
     RenderRegion* region = regionForCompositedLayer(layer);
     if (!needsLayerUpdate) {
-        ASSERT(m_layerToRegionMap);
         // Figure out if we moved this layer from a region to the other.
-        RenderRegion* previousRegion = m_layerToRegionMap->get(layer);
+        RenderRegion* previousRegion = cachedRegionForCompositedLayer(layer);
         if (previousRegion != region)
             needsLayerUpdate = true;
     }
+
     if (!region)
         return;
+
     layerToRegionMap.set(layer, region);
+
     RegionToLayerListMap::iterator iterator = regionToLayerListMap.find(region);
     RenderLayerList& list = iterator == regionToLayerListMap.end() ? regionToLayerListMap.set(region, RenderLayerList()).iterator->value : iterator->value;
+    ASSERT(!list.contains(layer));
     list.append(layer);
 }
 
-bool RenderFlowThread::updateLayerToRegionMappings()
+bool RenderFlowThread::updateAllLayerToRegionMappings()
 {
     // We only need to map layers to regions for named flow threads.
     // Multi-column threads are displayed on top of the regions and do not require
@@ -288,38 +330,30 @@ bool RenderFlowThread::updateLayerToRegionMappings()
     CurrentRenderFlowThreadDisabler disabler(&view());
 
     // If the RenderFlowThread had a z-index layer update, then we need to update the composited layers too.
-    bool needsLayerUpdate = m_layersToRegionMappingsDirty || !m_layerToRegionMap.get();
+    bool needsLayerUpdate = layer()->isDirtyRenderFlowThread() || m_layersToRegionMappingsDirty || !m_layerToRegionMap.get();
     layer()->updateLayerListsIfNeeded();
 
     LayerToRegionMap layerToRegionMap;
     RegionToLayerListMap regionToLayerListMap;
 
-    if (Vector<RenderLayer*>* negZOrderList = layer()->negZOrderList()) {
-        size_t listSize = negZOrderList->size();
-        for (size_t i = 0; i < listSize; ++i)
-            updateRegionForRenderLayer(negZOrderList->at(i), layerToRegionMap, regionToLayerListMap, needsLayerUpdate);
-    }
-
-    if (Vector<RenderLayer*>* normalFlowList = layer()->normalFlowList()) {
-        size_t listSize = normalFlowList->size();
-        for (size_t i = 0; i < listSize; ++i)
-            updateRegionForRenderLayer(normalFlowList->at(i), layerToRegionMap, regionToLayerListMap, needsLayerUpdate);
-    }
-    
-    if (Vector<RenderLayer*>* posZOrderList = layer()->posZOrderList()) {
-        size_t listSize = posZOrderList->size();
-        for (size_t i = 0; i < listSize; ++i)
-            updateRegionForRenderLayer(posZOrderList->at(i), layerToRegionMap, regionToLayerListMap, needsLayerUpdate);
-    }
+    RenderLayerList* lists[] = { layer()->negZOrderList(), layer()->normalFlowList(), layer()->posZOrderList()};
+    for (size_t listIndex = 0; listIndex < sizeof(lists) / sizeof(lists[0]); ++listIndex)
+        if (RenderLayerList* list = lists[listIndex])
+            for (size_t i = 0, listSize = list->size(); i < listSize; ++i)
+                updateLayerToRegionMappings(list->at(i), layerToRegionMap, regionToLayerListMap, needsLayerUpdate);
 
     if (needsLayerUpdate) {
         if (!m_layerToRegionMap)
             m_layerToRegionMap = adoptPtr(new LayerToRegionMap());
         m_layerToRegionMap->swap(layerToRegionMap);
 
+        if (!m_regionToLayerListMap)
+            m_regionToLayerListMap = adoptPtr(new RegionToLayerListMap());
+        m_regionToLayerListMap->swap(regionToLayerListMap);
+
         for (RenderRegionList::iterator iter = m_regionList.begin(); iter != m_regionList.end(); ++iter) {
             RenderRegion* region = *iter;
-            region->setRequiresLayerForCompositing(regionToLayerListMap.contains(region));
+            region->setRequiresLayerForCompositing(m_regionToLayerListMap->contains(region));
         }
     }
 
index 0932ea8..2eb1004 100644 (file)
@@ -44,10 +44,12 @@ class RenderFlowThread;
 class RenderStyle;
 class RenderRegion;
 
+#if USE(ACCELERATED_COMPOSITING)
 typedef ListHashSet<RenderRegion*> RenderRegionList;
 typedef Vector<RenderLayer*> RenderLayerList;
 typedef HashMap<RenderRegion*, RenderLayerList> RegionToLayerListMap;
 typedef HashMap<RenderLayer*, RenderRegion*> LayerToRegionMap;
+#endif
 
 // RenderFlowThread is used to collect all the render objects that participate in a
 // flow thread. It will also help in doing the layout. However, it will not render
@@ -117,8 +119,6 @@ public:
 
     RenderRegion* regionAtBlockOffset(const RenderBox*, LayoutUnit, bool extendLastRegion = false, RegionAutoGenerationPolicy = AllowRegionAutoGeneration);
 
-    const RenderLayerList* getLayerListForRegion(RenderRegion*) const;
-
     bool regionsHaveUniformLogicalWidth() const { return m_regionsHaveUniformLogicalWidth; }
     bool regionsHaveUniformLogicalHeight() const { return m_regionsHaveUniformLogicalHeight; }
 
@@ -181,12 +181,20 @@ public:
     void clearNeedsTwoPhasesLayout() { m_needsTwoPhasesLayout = false; }
 
 #if USE(ACCELERATED_COMPOSITING)
+    // Whether any of the regions has a compositing descendant.
+    bool hasCompositingRegionDescendant() const;
+
     void setNeedsLayerToRegionMappingsUpdate() { m_layersToRegionMappingsDirty = true; }
-    void updateLayerToRegionMappingsIfNeeded()
+    void updateAllLayerToRegionMappingsIfNeeded()
     {
         if (m_layersToRegionMappingsDirty)
-            updateLayerToRegionMappings();
+            updateAllLayerToRegionMappings();
     }
+
+    const RenderLayerList* getLayerListForRegion(RenderRegion*) const;
+
+    RenderRegion* regionForCompositedLayer(RenderLayer*); // By means of getRegionRangeForBox or regionAtBlockOffset.
+    RenderRegion* cachedRegionForCompositedLayer(RenderLayer*) const;
 #endif
 
     void pushFlowThreadLayoutState(const RenderObject*);
@@ -222,9 +230,10 @@ protected:
     LayoutRect computeRegionClippingRect(const LayoutPoint&, const LayoutRect&, const LayoutRect&) const;
 
 #if USE(ACCELERATED_COMPOSITING)
-    RenderRegion* regionForCompositedLayer(RenderLayer*);
-    bool updateLayerToRegionMappings();
-    void updateRegionForRenderLayer(RenderLayer*, LayerToRegionMap&, RegionToLayerListMap&, bool& needsLayerUpdate);
+    bool updateAllLayerToRegionMappings();
+
+    // Triggers a layers' update if a layer has moved from a region to another since the last update.
+    void updateLayerToRegionMappings(RenderLayer*, LayerToRegionMap&, RegionToLayerListMap&, bool& needsLayerUpdate);
 #endif
 
     void setDispatchRegionLayoutUpdateEvent(bool value) { m_dispatchRegionLayoutUpdateEvent = value; }
@@ -304,7 +313,11 @@ protected:
     };
 
 #if USE(ACCELERATED_COMPOSITING)
+    // To easily find the region where a layer should be painted.
     OwnPtr<LayerToRegionMap> m_layerToRegionMap;
+
+    // To easily find the list of layers that paint in a region.
+    OwnPtr<RegionToLayerListMap> m_regionToLayerListMap;
 #endif
 
     // A maps from RenderBox
index 1862a95..6bae42a 100644 (file)
@@ -26,6 +26,7 @@
 #include "config.h"
 #include "RenderGeometryMap.h"
 
+#include "RenderFlowThread.h"
 #include "RenderLayer.h"
 #include "RenderView.h"
 #include "TransformState.h"
@@ -251,6 +252,12 @@ void RenderGeometryMap::pushView(const RenderView* view, const LayoutSize& scrol
     stepInserted(step);
 }
 
+void RenderGeometryMap::pushRenderFlowThread(const RenderFlowThread* flowThread)
+{
+    m_mapping.append(RenderGeometryMapStep(flowThread, false, false, false, false));
+    stepInserted(m_mapping.last());
+}
+
 void RenderGeometryMap::popMappingsToAncestor(const RenderLayerModelObject* ancestorRenderer)
 {
     ASSERT(m_mapping.size());
index 92d5209..44fbbe5 100644 (file)
@@ -36,6 +36,7 @@
 
 namespace WebCore {
 
+class RenderFlowThread;
 class RenderLayer;
 class RenderLayerModelObject;
 class RenderView;
@@ -110,6 +111,7 @@ public:
 
     // RenderView gets special treatment, because it applies the scroll offset only for elements inside in fixed position.
     void pushView(const RenderView*, const LayoutSize& scrollOffset, const TransformationMatrix* = 0);
+    void pushRenderFlowThread(const RenderFlowThread*);
 
 private:
     void mapToContainer(TransformState&, const RenderLayerModelObject* container = 0) const;
index ba4b23f..ba8ac4e 100644 (file)
@@ -5535,7 +5535,8 @@ LayoutRect RenderLayer::calculateLayerBounds(const RenderLayer* ancestorLayer, c
         size_t listSize = posZOrderList->size();
         for (size_t i = 0; i < listSize; ++i) {
             RenderLayer* curLayer = posZOrderList->at(i);
-            if (flags & IncludeCompositedDescendants || !curLayer->isComposited()) {
+            // The RenderNamedFlowThread is ignored when we calculate the bounds of the RenderView.
+            if ((flags & IncludeCompositedDescendants || !curLayer->isComposited()) && !curLayer->isOutOfFlowRenderFlowThread()) {
                 LayoutRect childUnionBounds = curLayer->calculateLayerBounds(this, 0, descendantFlags);
                 unionBounds.unite(childUnionBounds);
             }
index 5e23503..d607849 100644 (file)
@@ -757,6 +757,7 @@ public:
 
 #if USE(ACCELERATED_COMPOSITING)
     bool isComposited() const { return m_backing != 0; }
+    bool hasCompositingDescendant() const { return m_hasCompositingDescendant; }
     bool hasCompositedMask() const;
     RenderLayerBacking* backing() const { return m_backing.get(); }
     RenderLayerBacking* ensureBacking();
@@ -820,7 +821,15 @@ public:
     ViewportConstrainedNotCompositedReason viewportConstrainedNotCompositedReason() const { return static_cast<ViewportConstrainedNotCompositedReason>(m_viewportConstrainedNotCompositedReason); }
 #endif
     
+    bool isRenderFlowThread() const { return renderer().isRenderFlowThread(); }
     bool isOutOfFlowRenderFlowThread() const { return renderer().isOutOfFlowRenderFlowThread(); }
+    bool isInsideFlowThread() const { return renderer().flowThreadState() != RenderObject::NotInsideFlowThread; }
+    bool isInsideOutOfFlowThread() const { return renderer().flowThreadState() == RenderObject::InsideOutOfFlowThread; }
+    bool isDirtyRenderFlowThread() const
+    {
+        ASSERT(isRenderFlowThread());
+        return m_zOrderListsDirty || m_normalFlowListDirty;
+    }
 
 private:
     enum CollectLayersBehavior { StopAtStackingContexts, StopAtStackingContainers };
@@ -1093,7 +1102,6 @@ private:
     bool useRegionBasedColumns() const;
     
 #if USE(ACCELERATED_COMPOSITING)    
-    bool hasCompositingDescendant() const { return m_hasCompositingDescendant; }
     void setHasCompositingDescendant(bool b)  { m_hasCompositingDescendant = b; }
     
     enum IndirectCompositingReason {
index 10c9e41..639277e 100644 (file)
 #include "KeyframeList.h"
 #include "PluginViewBase.h"
 #include "ProgressTracker.h"
+#include "RenderFlowThread.h" 
 #include "RenderIFrame.h"
 #include "RenderImage.h"
 #include "RenderLayerCompositor.h"
 #include "RenderEmbeddedObject.h"
+#include "RenderRegion.h"
 #include "RenderVideo.h"
 #include "RenderView.h"
 #include "ScrollingCoordinator.h"
@@ -412,6 +414,9 @@ bool RenderLayerBacking::shouldClipCompositedBounds() const
     if (layerOrAncestorIsTransformedOrUsingCompositedScrolling(m_owningLayer))
         return false;
 
+    if (m_owningLayer->isInsideOutOfFlowThread())
+        return false;
+
     return true;
 }
 
@@ -648,6 +653,8 @@ void RenderLayerBacking::updateGraphicsLayerGeometry()
     IntRect relativeCompositingBounds(localCompositingBounds);
     relativeCompositingBounds.moveBy(delta);
 
+    adjustAncestorCompositingBoundsForFlowThread(ancestorCompositingBounds, compAncestor);
+
     IntPoint graphicsLayerParentLocation;
     if (compAncestor && compAncestor->backing()->hasClippingLayer()) {
         // If the compositing ancestor has a layer to clip children, we parent in that, and therefore
@@ -845,6 +852,52 @@ void RenderLayerBacking::updateGraphicsLayerGeometry()
     registerScrollingLayers();
 }
 
+static RenderLayer* enclosingFlowThreadAncestor(RenderLayer* curr)
+{
+    for (curr = curr->parent(); curr && !curr->isRenderFlowThread(); curr = curr->parent()) {
+        if (curr->isStackingContainer() && curr->isComposited()) {
+            // We only adjust the position of the first level of layers.
+            return 0;
+        }
+    }
+    return curr;
+}
+
+void RenderLayerBacking::adjustAncestorCompositingBoundsForFlowThread(IntRect& ancestorCompositingBounds, const RenderLayer* compositingAncestor) const
+{
+    if (!m_owningLayer->isInsideFlowThread())
+        return;
+
+    RenderLayer* flowThreadLayer = m_owningLayer->isInsideOutOfFlowThread() ? m_owningLayer->stackingContainer() : enclosingFlowThreadAncestor(m_owningLayer);
+    if (flowThreadLayer && flowThreadLayer->isRenderFlowThread()) {
+        RenderFlowThread& flowThread = toRenderFlowThread(flowThreadLayer->renderer());
+        if (m_owningLayer->isInsideOutOfFlowThread()) {
+            // The RenderNamedFlowThread is not composited, as we need it to paint the 
+            // background layer of the regions. We need to compensate for that by manually
+            // subtracting the position of the flow-thread.
+            IntPoint flowPosition;
+            flowThreadLayer->convertToPixelSnappedLayerCoords(compositingAncestor, flowPosition);
+            ancestorCompositingBounds.moveBy(flowPosition);
+        }
+
+        // Move the ancestor position at the top of the region where the composited layer is going to display.
+        RenderRegion* parentRegion = flowThread.cachedRegionForCompositedLayer(m_owningLayer);
+        if (parentRegion) {
+            IntPoint flowDelta;
+            m_owningLayer->convertToPixelSnappedLayerCoords(flowThreadLayer, flowDelta);
+            parentRegion->adjustRegionBoundsFromFlowThreadPortionRect(flowDelta, ancestorCompositingBounds);
+            if (parentRegion->hasLayer() && parentRegion->layer()->backing()) {
+                // Make sure that the region propagates its borders, paddings, outlines or box-shadows to layers inside it.
+                // Note that the composited bounds of the RenderRegion are already calculated
+                // because RenderLayerCompositor::rebuildCompositingLayerTree will only
+                // iterate on the content of the region after the region itself is computed.
+                ancestorCompositingBounds.moveBy(roundedIntPoint(parentRegion->layer()->backing()->compositedBounds().location()));
+                ancestorCompositingBounds.move(-parentRegion->borderAndPaddingStart(), -parentRegion->borderAndPaddingBefore());
+            }
+        }
+    }
+}
+
 void RenderLayerBacking::updateDirectlyCompositedContents(bool isSimpleContainer, bool& didUpdateContentsRect)
 {
     if (!m_owningLayer->hasVisibleContent())
index 56f17c0..a7f041d 100644 (file)
@@ -278,6 +278,9 @@ private:
 
     void paintIntoLayer(const GraphicsLayer*, GraphicsContext*, const IntRect& paintDirtyRect, PaintBehavior, GraphicsLayerPaintingPhase);
 
+    // Helper function for updateGraphicsLayerGeometry.
+    void adjustAncestorCompositingBoundsForFlowThread(IntRect& ancestorCompositingBounds, const RenderLayer* compositingAncestor) const;
+
     static CSSPropertyID graphicsLayerToCSSProperty(AnimatedPropertyID);
     static AnimatedPropertyID cssToGraphicsLayerProperty(CSSPropertyID);
 
index 28a7a4c..ee5e0c6 100644 (file)
 #include "NodeList.h"
 #include "Page.h"
 #include "RenderEmbeddedObject.h"
+#include "RenderFlowThread.h"
 #include "RenderFullScreen.h"
 #include "RenderGeometryMap.h"
 #include "RenderIFrame.h"
 #include "RenderLayerBacking.h"
+#include "RenderRegion.h"
 #include "RenderReplica.h"
 #include "RenderVideo.h"
 #include "RenderView.h"
@@ -946,8 +948,10 @@ void RenderLayerCompositor::computeCompositingRequirements(RenderLayer* ancestor
     layer->updateDescendantDependentFlags();
     layer->updateLayerListsIfNeeded();
 
-    if (layer->isOutOfFlowRenderFlowThread())
+    if (layer->isOutOfFlowRenderFlowThread()) {
+        layer->setHasCompositingDescendant(toRenderFlowThread(layer->renderer()).hasCompositingRegionDescendant());
         return;
+    }
 
     if (overlapMap)
         overlapMap->geometryMap().pushMappingsToAncestor(layer, ancestorLayer);
@@ -1030,6 +1034,14 @@ void RenderLayerCompositor::computeCompositingRequirements(RenderLayer* ancestor
             }
         }
     }
+
+    if (layer->renderer().isRenderRegion()) {
+        // We are going to collect layers from the RenderFlowThread into the
+        // GraphicsLayer of the RenderRegion, but first we need to make sure that the
+        // region itself is going to have a composited layer. We only want to make
+        // regions composited when there's an actual layer that we need to move to that region.
+        computeRegionCompositingRequirements(&toRenderRegion(layer->renderer()), overlapMap, childState, layersChanged, anyDescendantHas3DTransform);
+    }
     
     if (Vector<RenderLayer*>* normalFlowList = layer->normalFlowList()) {
         size_t listSize = normalFlowList->size();
@@ -1139,6 +1151,28 @@ void RenderLayerCompositor::computeCompositingRequirements(RenderLayer* ancestor
         overlapMap->geometryMap().popMappingsToAncestor(ancestorLayer);
 }
 
+void RenderLayerCompositor::computeRegionCompositingRequirements(RenderRegion* region, OverlapMap* overlapMap, CompositingState& childState, bool& layersChanged, bool& anyDescendantHas3DTransform)
+{
+    if (!region->isValid() || !region->flowThread() || !region->flowThread()->isOutOfFlowRenderFlowThread())
+        return;
+
+    RenderFlowThread* flowThread = region->flowThread();
+    
+    if (overlapMap)
+        overlapMap->geometryMap().pushRenderFlowThread(flowThread);
+
+    if (const RenderLayerList* layerList = flowThread->getLayerListForRegion(region)) {
+        for (size_t i = 0, listSize = layerList->size(); i < listSize; ++i) {
+            RenderLayer* curLayer = layerList->at(i);
+            ASSERT(flowThread->regionForCompositedLayer(curLayer) == region);
+            computeCompositingRequirements(flowThread->layer(), curLayer, overlapMap, childState, layersChanged, anyDescendantHas3DTransform);
+        }
+    }
+
+    if (overlapMap)
+        overlapMap->geometryMap().popMappingsToAncestor(region);
+}
+
 void RenderLayerCompositor::setCompositingParent(RenderLayer* childLayer, RenderLayer* parentLayer)
 {
     ASSERT(!parentLayer || childLayer->ancestorCompositingLayer() == parentLayer);
@@ -1183,6 +1217,7 @@ void RenderLayerCompositor::rebuildCompositingLayerTree(RenderLayer* layer, Vect
     // Note that we can only do work here that is independent of whether the descendant layers
     // have been processed. computeCompositingRequirements() will already have done the repaint if necessary.
 
+    // Do not iterate the RenderFlowThread directly. We are going to collect composited layers as part of regions.
     if (layer->isOutOfFlowRenderFlowThread())
         return;
     
@@ -1237,6 +1272,13 @@ void RenderLayerCompositor::rebuildCompositingLayerTree(RenderLayer* layer, Vect
             childList.append(layerBacking->foregroundLayer());
     }
 
+    if (layer->renderer().isRenderRegion()) {
+        RenderRegion& region = toRenderRegion(layer->renderer());
+        // Note that for regions we always collect layers as if
+        // the region was a stacking context.
+        rebuildRegionCompositingLayerTree(&region, layerChildren, depth + 1);
+    }
+
     if (Vector<RenderLayer*>* normalFlowList = layer->normalFlowList()) {
         size_t listSize = normalFlowList->size();
         for (size_t i = 0; i < listSize; ++i) {
@@ -1286,6 +1328,24 @@ void RenderLayerCompositor::rebuildCompositingLayerTree(RenderLayer* layer, Vect
     }
 }
 
+void RenderLayerCompositor::rebuildRegionCompositingLayerTree(RenderRegion* region, Vector<GraphicsLayer*>& childList, int depth)
+{
+    if (!region->isValid() || region->isRenderRegionSet())
+        return;
+
+    RenderFlowThread* flowThread = region->flowThread();
+    // There's no need to move GraphicsLayers for Regions based multi-columns.
+    ASSERT(flowThread->isOutOfFlowRenderFlowThread());
+    if (const Vector<RenderLayer*>* layerList = flowThread->getLayerListForRegion(region)) {
+        size_t listSize = layerList->size();
+        for (size_t i = 0; i < listSize; ++i) {
+            RenderLayer* curLayer = layerList->at(i);
+            ASSERT(flowThread->regionForCompositedLayer(curLayer) == region);
+            rebuildCompositingLayerTree(curLayer, childList, depth + 1);
+        }
+    }
+}
+
 void RenderLayerCompositor::frameViewDidChangeLocation(const IntPoint& contentsOffset)
 {
     if (m_overflowControlsHostLayer)
@@ -1805,9 +1865,9 @@ bool RenderLayerCompositor::requiresCompositingLayer(const RenderLayer* layer, R
 
 bool RenderLayerCompositor::canBeComposited(const RenderLayer* layer) const
 {
-    // FIXME: We disable accelerated compositing for elements in a RenderFlowThread as it doesn't work properly.
-    // See http://webkit.org/b/84900 to re-enable it.
-    return m_hasAcceleratedCompositing && layer->isSelfPaintingLayer() && layer->renderer().flowThreadState() == RenderObject::NotInsideFlowThread;
+    // CSS Regions flow threads do not need to be composited as we use composited RenderRegions
+    // to render the background of the RenderFlowThread.
+    return m_hasAcceleratedCompositing && layer->isSelfPaintingLayer() && !layer->isRenderFlowThread();
 }
 
 bool RenderLayerCompositor::requiresOwnBackingStore(const RenderLayer* layer, const RenderLayer* compositingAncestorLayer, const IntRect& layerCompositedBoundsInAncestor, const IntRect& ancestorCompositedBounds) const
@@ -2190,7 +2250,7 @@ bool RenderLayerCompositor::requiresCompositingForIndirectReason(RenderObject* r
 
     // When a layer has composited descendants, some effects, like 2d transforms, filters, masks etc must be implemented
     // via compositing so that they also apply to those composited descdendants.
-    if (hasCompositedDescendants && (layer->transform() || renderer->createsGroup() || renderer->hasReflection())) {
+    if (hasCompositedDescendants && (layer->transform() || renderer->createsGroup() || renderer->hasReflection() || renderer->isRenderRegion())) {
         reason = RenderLayer::IndirectCompositingForGraphicalEffect;
         return true;
     }
index 5954e09..4619955 100644 (file)
@@ -326,9 +326,15 @@ private:
     // Returns true if any layer's compositing changed
     void computeCompositingRequirements(RenderLayer* ancestorLayer, RenderLayer*, OverlapMap*, struct CompositingState&, bool& layersChanged, bool& descendantHas3DTransform);
     
+    void computeRegionCompositingRequirements(RenderRegion*, OverlapMap*, CompositingState&, bool& layersChanged, bool& anyDescendantHas3DTransform);
+
     // Recurses down the tree, parenting descendant compositing layers and collecting an array of child layers for the current compositing layer.
     void rebuildCompositingLayerTree(RenderLayer*, Vector<GraphicsLayer*>& childGraphicsLayersOfEnclosingLayer, int depth);
 
+    // Recurses down the RenderFlowThread tree, parenting descendant compositing layers and collecting an array of child 
+    // layers for the current compositing RenderRegion layer.
+    void rebuildRegionCompositingLayerTree(RenderRegion*, Vector<GraphicsLayer*>& childList, int depth);
+
     // Recurses down the tree, updating layer geometry only.
     void updateLayerTreeGeometry(RenderLayer*, int depth);
     
index 7703859..9c52010 100644 (file)
@@ -516,6 +516,36 @@ void RenderMultiColumnSet::collectLayerFragments(LayerFragments& fragments, cons
     }
 }
 
+void RenderMultiColumnSet::adjustRegionBoundsFromFlowThreadPortionRect(const IntPoint& layerOffset, IntRect& regionBounds)
+{
+    LayoutUnit layerLogicalTop = isHorizontalWritingMode() ? layerOffset.y() : layerOffset.x();
+    unsigned startColumn = columnIndexAtOffset(layerLogicalTop);
+    
+    LayoutUnit colGap = columnGap();
+    LayoutUnit colLogicalWidth = computedColumnWidth();
+    
+    LayoutRect flowThreadPortion = flowThreadPortionRectAt(startColumn);
+    LayoutPoint translationOffset;
+
+    LayoutUnit inlineOffset = startColumn * (colLogicalWidth + colGap);
+    if (!style()->isLeftToRightDirection())
+        inlineOffset = -inlineOffset;
+    translationOffset.setX(inlineOffset);
+        
+    LayoutUnit blockOffset = isHorizontalWritingMode() ? -flowThreadPortion.y() : -flowThreadPortion.x();
+    if (isFlippedBlocksWritingMode(style()->writingMode()))
+        blockOffset = -blockOffset;
+    translationOffset.setY(blockOffset);
+    
+    if (!isHorizontalWritingMode())
+        translationOffset = translationOffset.transposedPoint();
+
+    // FIXME: The translation needs to include the multicolumn set's content offset within the
+    // multicolumn block as well. This won't be an issue until we start creating multiple multicolumn sets.
+    
+    regionBounds.moveBy(roundedIntPoint(-translationOffset));
+}
+
 const char* RenderMultiColumnSet::renderName() const
 {    
     return "RenderMultiColumnSet";
index 2f4898f..be96fe6 100644 (file)
@@ -120,6 +120,8 @@ private:
 
     virtual void collectLayerFragments(LayerFragments&, const LayoutRect& layerBoundingBox, const LayoutRect& dirtyRect) OVERRIDE;
 
+    virtual void adjustRegionBoundsFromFlowThreadPortionRect(const IntPoint& layerOffset, IntRect& regionBounds) OVERRIDE;
+
     virtual const char* renderName() const;
     
     void paintColumnRules(PaintInfo&, const LayoutPoint& paintOffset);
index 08c8fde..26d1840 100644 (file)
@@ -726,15 +726,25 @@ void RenderRegion::setRequiresLayerForCompositing(bool requiresLayerForCompositi
     // been laid out, after the flow thread decides there are 
     // composited layers that will display in this region.
     ASSERT(!needsLayout());
+
     if (m_requiresLayerForCompositing == requiresLayerForCompositing)
         return;
     
-    bool requiredLayer = requiresLayer();
+    bool requiredLayerBefore = requiresLayer();
     m_requiresLayerForCompositing = requiresLayerForCompositing;
 
-    if (requiredLayer != requiresLayer())
+    if (requiredLayerBefore != requiresLayer())
         updateLayerIfNeeded();
 }
+
+void RenderRegion::adjustRegionBoundsFromFlowThreadPortionRect(const IntPoint& layerOffset, IntRect& regionBounds)
+{
+    LayoutRect flippedFlowThreadPortionRect = flowThreadPortionRect();
+    flowThread()->flipForWritingMode(flippedFlowThreadPortionRect);
+    regionBounds.moveBy(roundedIntPoint(flippedFlowThreadPortionRect.location()));
+
+    UNUSED_PARAM(layerOffset);
+}
 #endif
 
 RenderOverflow* RenderRegion::ensureOverflowForBox(const RenderBox* box)
index d70c1fc..99938e8 100644 (file)
@@ -142,6 +142,8 @@ public:
 #if USE(ACCELERATED_COMPOSITING)
     void setRequiresLayerForCompositing(bool);
     virtual bool requiresLayer() const { return m_requiresLayerForCompositing || RenderBlock::requiresLayer(); }
+
+    virtual void adjustRegionBoundsFromFlowThreadPortionRect(const IntPoint& layerOffset, IntRect& regionBounds); // layerOffset is needed for multi-column.
 #endif
 
     void addLayoutOverflowForBox(const RenderBox*, const LayoutRect&);
@@ -252,8 +254,21 @@ inline const RenderRegion* toRenderRegion(const RenderObject* object)
     return static_cast<const RenderRegion*>(object);
 }
 
+inline RenderRegion& toRenderRegion(RenderObject& object)
+{
+    ASSERT_WITH_SECURITY_IMPLICATION(object.isRenderRegion());
+    return static_cast<RenderRegion&>(object);
+}
+
+inline const RenderRegion& toRenderRegion(const RenderObject& object)
+{
+    ASSERT_WITH_SECURITY_IMPLICATION(object.isRenderRegion());
+    return static_cast<const RenderRegion&>(object);
+}
+
 // This will catch anyone doing an unnecessary cast.
 void toRenderRegion(const RenderRegion*);
+void toRenderRegion(const RenderRegion&);
 
 } // namespace WebCore
 
index a0963fb..05e8266 100644 (file)
@@ -60,6 +60,8 @@ private:
     virtual const char* renderName() const = 0;
     
     virtual bool isRenderRegionSet() const OVERRIDE FINAL { return true; }
+
+    virtual bool requiresLayer() const { return false; }
 };
 
 } // namespace WebCore
index 7980690..3c211d5 100644 (file)
@@ -802,14 +802,18 @@ static void writeLayers(TextStream& ts, const RenderLayer* rootLayer, RenderLaye
                 ++layerCount;
         if (layerCount) {
             int currIndent = indent;
-            if (behavior & RenderAsTextShowLayerNesting) {
-                writeIndent(ts, indent);
-                ts << " positive z-order list(" << layerCount << ")\n";
-                ++currIndent;
-            }
-            for (unsigned i = 0; i != posList->size(); ++i) {
-                if (!posList->at(i)->isOutOfFlowRenderFlowThread())
-                    writeLayers(ts, rootLayer, posList->at(i), paintDirtyRect, currIndent, behavior);
+            // We only print the header if there's at list a non-RenderNamedFlowThread part of the list.
+            if (!posList->size() || !posList->at(0)->isOutOfFlowRenderFlowThread()) {
+                if (behavior & RenderAsTextShowLayerNesting) {
+                    writeIndent(ts, indent);
+                    ts << " positive z-order list(" << posList->size() << ")\n";
+                    ++currIndent;
+                }
+                for (unsigned i = 0; i != posList->size(); ++i) {
+                    // Do not print named flows twice.
+                    if (!posList->at(i)->isOutOfFlowRenderFlowThread())
+                        writeLayers(ts, rootLayer, posList->at(i), paintDirtyRect, currIndent, behavior);
+                }
             }
         }
     }