Commit 81613fc9 authored by stavila@adobe.com's avatar stavila@adobe.com

[CSS Regions] Implement visual overflow for first & last regions

https://bugs.webkit.org/show_bug.cgi?id=118665

Source/WebCore:

In order to properly propagate the visual overflow of elements flowed inside regions,
the responsiblity of painting and hit-testing content inside flow threads has been
moved to the flow thread layer's level.
Each region keeps the associated overflow with each box in the RenderBoxRegionInfo
structure, including one for the flow thread itself. This data is used during
painting and hit-testing.

Reviewed by David Hyatt.

Tests: fast/regions/overflow-first-and-last-regions-in-container-hidden.html
       fast/regions/overflow-first-and-last-regions.html
       fast/regions/overflow-nested-regions.html
       fast/regions/overflow-region-float.html
       fast/regions/overflow-region-inline.html
       fast/regions/overflow-region-transform.html

* rendering/InlineFlowBox.cpp:
(WebCore::InlineFlowBox::setLayoutOverflow):
(WebCore::InlineFlowBox::setVisualOverflow):
* rendering/InlineFlowBox.h:
* rendering/RenderBlock.cpp:
(WebCore::RenderBlock::addOverflowFromChildren):
(WebCore::RenderBlock::paint):
(WebCore::RenderBlock::paintObject):
(WebCore::RenderBlock::estimateRegionRangeForBoxChild):
(WebCore::RenderBlock::updateRegionRangeForBoxChild):
* rendering/RenderBlockFlow.cpp:
(WebCore::RenderBlockFlow::hasNextPage):
(WebCore::RenderBlockFlow::relayoutForPagination):
* rendering/RenderBlockLineLayout.cpp:
(WebCore::RenderBlockFlow::positionNewFloatOnLine):
* rendering/RenderBox.cpp:
(WebCore::RenderBox::borderBoxRectInRegion):
(WebCore::RenderBox::computeRectForRepaint):
(WebCore::RenderBox::addLayoutOverflow):
(WebCore::RenderBox::addVisualOverflow):
(WebCore::RenderBox::isUnsplittableForPagination):
(WebCore::RenderBox::overflowRectForPaintRejection):
* rendering/RenderBox.h:
(WebCore::RenderBox::canHaveOutsideRegionRange):
* rendering/RenderBoxModelObject.cpp:
(WebCore::RenderBoxModelObject::paintMaskForTextFillBox):
(WebCore::RenderBoxModelObject::paintFillLayerExtended):
* rendering/RenderBoxModelObject.h:
* rendering/RenderBoxRegionInfo.h:
(WebCore::RenderBoxRegionInfo::createOverflow):
* rendering/RenderFlowThread.cpp:
(WebCore::RenderFlowThread::objectShouldPaintInFlowRegion):
(WebCore::RenderFlowThread::mapFromLocalToFlowThread):
(WebCore::RenderFlowThread::mapFromFlowThreadToLocal):
(WebCore::RenderFlowThread::decorationsClipRectForBoxInRegion):
(WebCore::RenderFlowThread::flipForWritingModeLocalCoordinates):
(WebCore::RenderFlowThread::addRegionsOverflowFromChild):
(WebCore::RenderFlowThread::addRegionsVisualOverflow):
(WebCore::CurrentRenderFlowThreadMaintainer::CurrentRenderFlowThreadMaintainer):
* rendering/RenderFlowThread.h:
* rendering/RenderLayer.cpp:
(WebCore::RenderLayer::updateLayerPositions):
(WebCore::expandClipRectForRegionAndReflection):
(WebCore::expandClipRectForDescendantsAndReflection):
(WebCore::RenderLayer::paintLayer):
(WebCore::RenderLayer::paintLayerContents):
(WebCore::RenderLayer::updatePaintingInfoForFragments):
(WebCore::RenderLayer::paintForegroundForFragments):
(WebCore::RenderLayer::hitTest):
(WebCore::RenderLayer::hitTestLayer):
(WebCore::RenderLayer::mapLayerClipRectsToFragmentationLayer):
(WebCore::RenderLayer::calculateClipRects):
(WebCore::RenderLayer::parentClipRects):
(WebCore::RenderLayer::calculateRects):
(WebCore::RenderLayer::intersectsDamageRect):
(WebCore::RenderLayer::updateDescendantsLayerListsIfNeeded):
(WebCore::RenderLayer::repaintIncludingDescendants):
(WebCore::RenderLayer::paintNamedFlowThreadInsideRegion):
(WebCore::RenderLayer::paintFlowThreadIfRegion):
(WebCore::RenderLayer::hitTestFlowThreadIfRegion):
* rendering/RenderLayer.h:
(WebCore::ClipRect::inflateX):
(WebCore::ClipRect::inflateY):
(WebCore::ClipRect::inflate):
* rendering/RenderLayerCompositor.cpp:
(WebCore::RenderLayerCompositor::computeCompositingRequirements):
* rendering/RenderListItem.cpp:
(WebCore::RenderListItem::addOverflowFromChildren):
* rendering/RenderMultiColumnSet.cpp:
(WebCore::RenderMultiColumnSet::flowThreadPortionOverflowRect):
(WebCore::RenderMultiColumnSet::repaintFlowThreadContent):
* rendering/RenderMultiColumnSet.h:
* rendering/RenderNamedFlowFragment.cpp:
(WebCore::RenderNamedFlowFragment::createStyle):
(WebCore::RenderNamedFlowFragment::namedFlowThread):
* rendering/RenderNamedFlowFragment.h:
* rendering/RenderOverflow.h:
* rendering/RenderRegion.cpp:
(WebCore::RenderRegion::flowThreadPortionOverflowRect):
(WebCore::RenderRegion::flowThreadPortionLocation):
(WebCore::RenderRegion::regionContainerLayer):
(WebCore::RenderRegion::overflowRectForFlowThreadPortion):
(WebCore::RenderRegion::computeOverflowFromFlowThread):
(WebCore::RenderRegion::repaintFlowThreadContent):
(WebCore::RenderRegion::repaintFlowThreadContentRectangle):
(WebCore::RenderRegion::insertedIntoTree):
(WebCore::RenderRegion::ensureOverflowForBox):
(WebCore::RenderRegion::rectFlowPortionForBox):
(WebCore::RenderRegion::addLayoutOverflowForBox):
(WebCore::RenderRegion::addVisualOverflowForBox):
(WebCore::RenderRegion::layoutOverflowRectForBox):
(WebCore::RenderRegion::visualOverflowRectForBox):
(WebCore::RenderRegion::visualOverflowRectForBoxForPropagation):
* rendering/RenderRegion.h:
* rendering/RenderReplaced.cpp:
(WebCore::RenderReplaced::shouldPaint):
* rendering/RootInlineBox.cpp:
(WebCore::RootInlineBox::paint):

LayoutTests:

Rebased some tests due to regions layers changes.
Updated some tests to increase clarity. Some of them were only passing because two
regions were close together and the fact that an element was being painted
inside the wrong region was not visible. Floats are now also unsplittable.
        - bottom-overflow-out-of-first-region
        - float-pushed-width-change-2
        - float-pushed-width-change
        - webkit-flow-float-unable-to-push

Changed top-overflow-out-of-second-region to reftest.

Added new tests for testing the visual overflow in different situations
(transformed, inline, opacity, floating).

Reviewed by David Hyatt.

* fast/regions/bottom-overflow-out-of-first-region-expected.html:
* fast/regions/bottom-overflow-out-of-first-region.html:
* fast/regions/counters/extract-ordered-lists-in-regions-explicit-counters-005-expected.html:
* fast/regions/counters/extract-ordered-lists-in-regions-explicit-counters-005.html:
* fast/regions/element-in-named-flow-absolute-from-fixed-expected.txt:
* fast/regions/element-in-named-flow-fixed-from-absolute-expected.txt:
* fast/regions/element-inflow-fixed-from-outflow-static-expected.txt:
* fast/regions/element-outflow-static-from-inflow-fixed-expected.txt:
* fast/regions/float-pushed-width-change-2-expected.html:
* fast/regions/float-pushed-width-change-2.html:
* fast/regions/float-pushed-width-change-expected.html:
* fast/regions/float-pushed-width-change.html:
* fast/regions/layers/dynamic-layer-added-with-no-layout-expected.txt: Added.
* fast/regions/layers/dynamic-layer-removed-with-no-layout-expected.txt: Added.
* fast/regions/layers/regions-promoted-to-layers-expected.txt: Added.
* fast/regions/layers/regions-promoted-to-layers-horizontal-bt-expected.txt: Added.
* fast/regions/layers/regions-promoted-to-layers-vertical-lr-expected.txt: Added.
* fast/regions/layers/regions-promoted-to-layers-vertical-rl-expected.txt: Added.
* fast/regions/outline-sides-in-region-expected.html:
* fast/regions/outline-sides-in-region.html:
* fast/regions/overflow-first-and-last-regions-expected.html: Added.
* fast/regions/overflow-first-and-last-regions-in-container-hidden-expected.html: Added.
* fast/regions/overflow-first-and-last-regions-in-container-hidden.html: Added.
* fast/regions/overflow-first-and-last-regions.html: Added.
* fast/regions/overflow-last-region-expected.html: Removed.
* fast/regions/overflow-last-region.html: Removed.
* fast/regions/overflow-nested-regions-expected.html: Added.
* fast/regions/overflow-nested-regions.html: Added.
* fast/regions/overflow-region-float-expected.html: Added.
* fast/regions/overflow-region-float.html: Added.
* fast/regions/overflow-region-inline-expected.html: Added.
* fast/regions/overflow-region-inline.html: Added.
* fast/regions/overflow-region-transform-expected.html: Added.
* fast/regions/overflow-region-transform.html: Added.
* fast/regions/overflow-scrollable-rotated-fragment-expected.html:
* fast/regions/overflow-scrollable-rotated-fragment.html:
* fast/regions/top-overflow-out-of-second-region-expected.html: Copied from LayoutTests/fast/regions/top-overflow-out-of-second-region.html.
* fast/regions/top-overflow-out-of-second-region.html:
* fast/regions/webkit-flow-float-unable-to-push-expected.html:
* fast/regions/webkit-flow-float-unable-to-push.html:
* platform/gtk/fast/regions/text-region-split-vertical-rl-expected.txt: Removed.
* platform/mac-wk2/TestExpectations:
* platform/mac/fast/regions/top-overflow-out-of-second-region-expected.png: Removed.
* platform/mac/fast/regions/top-overflow-out-of-second-region-expected.txt: Removed.


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@159337 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 6408b319
2013-11-15 Radu Stavila <stavila@adobe.com>
[CSS Regions] Implement visual overflow for first & last regions
https://bugs.webkit.org/show_bug.cgi?id=118665
Rebased some tests due to regions layers changes.
Updated some tests to increase clarity. Some of them were only passing because two
regions were close together and the fact that an element was being painted
inside the wrong region was not visible. Floats are now also unsplittable.
- bottom-overflow-out-of-first-region
- float-pushed-width-change-2
- float-pushed-width-change
- webkit-flow-float-unable-to-push
Changed top-overflow-out-of-second-region to reftest.
Added new tests for testing the visual overflow in different situations
(transformed, inline, opacity, floating).
Reviewed by David Hyatt.
* fast/regions/bottom-overflow-out-of-first-region-expected.html:
* fast/regions/bottom-overflow-out-of-first-region.html:
* fast/regions/counters/extract-ordered-lists-in-regions-explicit-counters-005-expected.html:
* fast/regions/counters/extract-ordered-lists-in-regions-explicit-counters-005.html:
* fast/regions/element-in-named-flow-absolute-from-fixed-expected.txt:
* fast/regions/element-in-named-flow-fixed-from-absolute-expected.txt:
* fast/regions/element-inflow-fixed-from-outflow-static-expected.txt:
* fast/regions/element-outflow-static-from-inflow-fixed-expected.txt:
* fast/regions/float-pushed-width-change-2-expected.html:
* fast/regions/float-pushed-width-change-2.html:
* fast/regions/float-pushed-width-change-expected.html:
* fast/regions/float-pushed-width-change.html:
* fast/regions/layers/dynamic-layer-added-with-no-layout-expected.txt: Added.
* fast/regions/layers/dynamic-layer-removed-with-no-layout-expected.txt: Added.
* fast/regions/layers/regions-promoted-to-layers-expected.txt: Added.
* fast/regions/layers/regions-promoted-to-layers-horizontal-bt-expected.txt: Added.
* fast/regions/layers/regions-promoted-to-layers-vertical-lr-expected.txt: Added.
* fast/regions/layers/regions-promoted-to-layers-vertical-rl-expected.txt: Added.
* fast/regions/outline-sides-in-region-expected.html:
* fast/regions/outline-sides-in-region.html:
* fast/regions/overflow-first-and-last-regions-expected.html: Added.
* fast/regions/overflow-first-and-last-regions-in-container-hidden-expected.html: Added.
* fast/regions/overflow-first-and-last-regions-in-container-hidden.html: Added.
* fast/regions/overflow-first-and-last-regions.html: Added.
* fast/regions/overflow-last-region-expected.html: Removed.
* fast/regions/overflow-last-region.html: Removed.
* fast/regions/overflow-nested-regions-expected.html: Added.
* fast/regions/overflow-nested-regions.html: Added.
* fast/regions/overflow-region-float-expected.html: Added.
* fast/regions/overflow-region-float.html: Added.
* fast/regions/overflow-region-inline-expected.html: Added.
* fast/regions/overflow-region-inline.html: Added.
* fast/regions/overflow-region-transform-expected.html: Added.
* fast/regions/overflow-region-transform.html: Added.
* fast/regions/overflow-scrollable-rotated-fragment-expected.html:
* fast/regions/overflow-scrollable-rotated-fragment.html:
* fast/regions/top-overflow-out-of-second-region-expected.html: Copied from LayoutTests/fast/regions/top-overflow-out-of-second-region.html.
* fast/regions/top-overflow-out-of-second-region.html:
* fast/regions/webkit-flow-float-unable-to-push-expected.html:
* fast/regions/webkit-flow-float-unable-to-push.html:
* platform/gtk/fast/regions/text-region-split-vertical-rl-expected.txt: Removed.
* platform/mac-wk2/TestExpectations:
* platform/mac/fast/regions/top-overflow-out-of-second-region-expected.png: Removed.
* platform/mac/fast/regions/top-overflow-out-of-second-region-expected.txt: Removed.
2013-11-15 Michał Pakuła vel Rutka <m.pakula@samsung.com>
Unreviewed EFL gardening
......
......@@ -4,16 +4,19 @@
<style>
body { font: 16px/1.25 monospace; }
#region1, #region2 { border: 1px solid black; }
#region1, #region2 { border: 1px solid red; }
#region1 {
width: 412px;
height: 210px;
height: 140px;
}
#region2 {
width: 300px;
height: 150px;
position: relative;
left: 100px;
top: 50px;
}
#content {
......@@ -22,31 +25,22 @@
#first-box {
border: 1px solid blue;
height:200px;
height:125px;
}
#second-box {
margin: auto;
border: 1px solid green;
border-bottom: 0px;
width: 75%;
height: 203px;
}
#second-box-2 {
border: 1px solid green;
border-top: 0px;
width: 300px;
margin-left: 55px;
}
#p1, #p2, #p3 {
#p1, #p2 {
margin: 0;
}
</style>
</head>
<body>
<p>In the test case below, the green block's width should not vary and should use the first region to determine its width. It is overflowing downwards out of the blue block, and so the portion that overflows should continue to use the blue block's containing block width. The blue block does not exist in region two, so using some hypothetical made-up width is incorrect. The overflow should be spilling out of the top of region one and be painted in region two.</p>
<p>In the test case below, the green block should not be fragmented into the second region. It is overflowing downwards out of the first region because its parent (the blue block) is only flowed inside the first region.</p>
<div id="region1">
<div id="content">
<div id="first-box">
......@@ -58,9 +52,6 @@
</div>
</div>
<div id="region2">
<div id="second-box-2">
<p id="p3">These lines should all fit to the width of the block in the first region and spill out of the bottom of the first region.</p>
</div>
</div>
</body>
</html>
......@@ -11,7 +11,7 @@
#first-box {
border: 1px solid blue;
height:200px;
height:125px;
}
#second-box {
......@@ -21,32 +21,34 @@
}
#region1, #region2 {
border: 1px solid black;
border: 1px solid red;
-webkit-flow-from: flow1;
}
#region1 {
width: 412px;
height: 210px;
height: 140px;
}
#region2 {
width: 300px;
height: 150px;
position: relative;
left: 100px;
top: 50px;
}
#p1, #p2, #p3 {
#p1, #p2 {
margin: 0;
}
</style>
</head>
<body>
<p>In the test case below, the green block's width should not vary and should use the first region to determine its width. It is overflowing downwards out of the blue block, and so the portion that overflows should continue to use the blue block's containing block width. The blue block does not exist in region two, so using some hypothetical made-up width is incorrect. The overflow should be spilling out of the top of region one and be painted in region two.</p>
<p>In the test case below, the green block should not be fragmented into the second region. It is overflowing downwards out of the first region because its parent (the blue block) is only flowed inside the first region.</p>
<div id="content">
<div id="first-box">
<div id="second-box">
<p id="p1">These lines should all fit to the width of the block in the first region and spill out of the bottom of the first region.</p>
<p id="p2">These lines should all fit to the width of the block in the first region and spill out of the bottom of the first region.</p>
<p id="p3">These lines should all fit to the width of the block in the first region and spill out of the bottom of the first region.</p>
</div>
</div>
</div>
......
......@@ -70,7 +70,7 @@
}
</style>
</head>
<body>
<body style="-webkit-font-smoothing: none;">
<p>This test passes if you see two gray rectangles, as described below. All numbering should be aligned to the right margin of the rectangles.</p>
<p>The first rectangle contains two numbered lists. The <strong>first list</strong> has three items and is numbered using bold roman numerals, starting at 1 (I). After the first item there's a numbered sublist; it is indented and has four items, numbered using decimal numbers preceded by an ellipsis (&hellip;), starting at 1. After the last item in this sublist there's a single item numbered list; the numbering is blue and uses three levels of numbering: roman, decimal and with latin letters, respectively; numbering starts with I.4-a. The <strong>second list</strong> has two items and uses the same blue, three-level numbering, that starts at I.3-a this time.</p>
<p>The second rectangle contains a two-items numbered list, numbered using decimal numbers preceded by an ellipsis. After the first item there's a sublist. The sublist is indented and has blue, three level-numbering: roman, decimal and with latin letters, respectively. Numbering starts with <em>III.1-a</em>.</p>
......
......@@ -77,7 +77,7 @@
}
</style>
</head>
<body>
<body style="-webkit-font-smoothing: none;">
<p>This test passes if you see two gray rectangles, as described below. All numbering should be aligned to the right margin of the rectangles.</p>
<p>The first rectangle contains two numbered lists. The <strong>first list</strong> has three items and is numbered using bold roman numerals, starting at 1 (I). After the first item there's a numbered sublist; it is indented and has four items, numbered using decimal numbers preceded by an ellipsis (&hellip;), starting at 1. After the last item in this sublist there's a single item numbered list; the numbering is blue and uses three levels of numbering: roman, decimal and with latin letters, respectively; numbering starts with I.4-a. The <strong>second list</strong> has two items and uses the same blue, three-level numbering, that starts at I.3-a this time.</p>
<p>The second rectangle contains a two-items numbered list, numbered using decimal numbers preceded by an ellipsis. After the first item there's a sublist. The sublist is indented and has blue, three level-numbering: roman, decimal and with latin letters, respectively. Numbering starts with <em>III.1-a</em>.</p>
......
(repaint rects
(rect 50 100 50 50)
(rect 100 100 200 200)
(rect 150 200 50 50)
(rect 150 200 50 50)
)
(repaint rects
(rect 150 200 50 50)
(rect 100 100 200 200)
(rect 50 100 50 50)
(rect 50 100 50 50)
)
(repaint rects
(rect 300 300 50 50)
(rect 100 100 200 200)
(rect 50 100 50 50)
(rect 50 100 50 50)
)
(repaint rects
(rect 50 100 50 50)
(rect 300 300 50 50)
(rect 100 100 200 200)
)
......@@ -6,9 +6,8 @@
float: left;
position:absolute;
width: 150px;
height: 102px;
height: 100px;
background-color:green;
z-index:-1;
}
#float2 {
......@@ -34,14 +33,18 @@
padding-top:1px;
padding-left:5px;
padding-right:5px;
margin-left: 100px;
margin-top: 50px;
}
#region3 {
width: 385px;
height: 80px;
width: 390px;
height: 85px;
padding-left:5px;
padding-right:10px;
padding-bottom:10px;
padding-right:5px;
padding-bottom:5px;
margin-left: 50px;
margin-top: 50px;
}
p.flow1 {
......
......@@ -34,11 +34,15 @@
#region2 {
width: 400px;
height: 90px;
margin-left: 100px;
margin-top: 50px;
}
#region3 {
width: 400px;
height: 90px;
margin-left: 50px;
margin-top: 50px;
}
#floatcontainer {
......
<!doctype html>
<style>
#content {
padding: 5px;
border: 1px solid red;
}
#float1 {
float: left;
position:absolute;
width: 150px;
height: 102px;
height: 100px;
background-color:green;
z-index:-1;
}
#float2 {
margin-top: 30px;
margin-left: -30px;
float:left;
float:right;
width:200px;
height:30px;
background-color:orange
......@@ -22,30 +23,21 @@
#region1, #region2, #region3 {
border: 1px solid black;
margin: 10px;
}
#region1 {
width: 170px;
height: 80px;
padding: 5px;
margin-left: 30px;
width: 180px;
height: 90px;
}
#region2 {
width: 390px;
height: 89px;
padding-top:1px;
padding-left:5px;
padding-right:5px;
}
#region3 {
width: 385px;
height: 80px;
padding-left:5px;
padding-right:10px;
padding-bottom:10px;
margin-top: 80px;
width: 400px;
height: 90px;
}
p.flow1 {
clear:both;
margin-bottom: 0px;
......@@ -57,18 +49,14 @@
</style>
<p>In the example below, the green float should be at the top of the first region and on the left. It should spill into region two.
The orange float should be right aligned under the green float because their containing block is flown only in the first region</p>
<p>In the example below, the green float should be at the top of the first region and on the left. It should overflow the first region.
The orange float should be right aligned under the green float and should overflow the first region because their containing block (red border) is flowed only in the first region.</p>
<p>No content should be displayed in the second region.</p>
<div id="region1">
<p><img id="float1"></p>
</div>
<div id="region2">
<img id="float2">
<p class="flow1">This line of text should not get out of the region.</p>
</div>
<div id="region3">
<p class="flow2">This line of text should not get out of the region. This line of text should not get out of the region.</p>
<p>This line of text should not get out of the region.</p>
<div id="content">
<img id="float1"><img id="float2">
</div>
</div>
<div id="region2"></div>
......@@ -5,6 +5,7 @@
#content {
-webkit-flow-into: flow1;
padding: 5px;
border: 1px solid red;
}
#float1 {
......@@ -18,41 +19,36 @@
float:right;
width:200px;
height:30px;
background-color:orange
background-color:orange;
}
#region1, #region2, #region3 {
margin: 10px;
border: 1px solid black;
-webkit-flow-from: flow1;
}
#region1 {
margin-left: 30px;
width: 180px;
height: 90px;
}
#region2 {
width: 400px;
height: 90px;
}
#region3 {
margin-top: 80px;
width: 400px;
height: 90px;
}
</style>
<p>In the example below, the green float should be at the top of the first region and on the left. It should spill into region two.
The orange float should be right aligned under the green float because their containing block is flown only in the first region</p>
<p>In the example below, the green float should be at the top of the first region and on the left. It should overflow the first region.
The orange float should be right aligned under the green float and should overflow the first region because their containing block (red border) is flowed only in the first region.</p>
<p>No content should be displayed in the second region.</p>
<div id="content">
<div id="first-box">
<div id="second-box">
<p><img id="float1"><img id="float2"><p/>
<p>This line of text should not get out of the region.</p>
<p>This line of text should not get out of the region. This line of text should not get out of the region.</p>
<p>This line of text should not get out of the region.</p>
<img id="float1"><img id="float2">
</div>
</div>
</div>
......@@ -60,5 +56,4 @@ The orange float should be right aligned under the green float because their con
<div id="container">
<div id="region1"></div>
<div id="region2"></div>
<div id="region3"></div>
</div>
\ No newline at end of file
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x60
RenderBlock {HTML} at (0,0) size 800x60
RenderBody {BODY} at (8,8) size 784x0
layer at (8,8) size 52x52
RenderRegion {DIV} at (0,0) size 52x52 [border: (1px solid #000000)]
layer at (60,8) size 52x52
RenderRegion {DIV} at (52,0) size 52x52 [border: (1px solid #000000)]
layer at (112,8) size 52x52
RenderRegion {DIV} at (104,0) size 52x52 [border: (1px solid #000000)]
Flow Threads
Thread with flow-name 'article'
layer at (0,0) size 50x150
RenderNamedFlowThread at (0,0) size 50x150
RenderBlock {DIV} at (0,0) size 50x150
RenderBlock {DIV} at (0,0) size 50x50 [bgcolor=#008000]
RenderBlock {DIV} at (0,100) size 50x50 [bgcolor=#FFA500]
layer at (0,50) size 50x50
RenderBlock {DIV} at (0,50) size 50x50 [bgcolor=#0000FF]
Regions for flow 'article'
RenderRegion {DIV} hasLayer
RenderRegion {DIV} #should-have-layer hasLayer
RenderRegion {DIV} hasLayer
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x60
RenderBlock {HTML} at (0,0) size 800x60
RenderBody {BODY} at (8,8) size 784x0
layer at (8,8) size 52x52
RenderRegion {DIV} at (0,0) size 52x52 [border: (1px solid #000000)]
layer at (60,8) size 52x52
RenderRegion {DIV} at (52,0) size 52x52 [border: (1px solid #000000)]
layer at (112,8) size 52x52
RenderRegion {DIV} at (104,0) size 52x52 [border: (1px solid #000000)]
Flow Threads
Thread with flow-name 'article'
layer at (0,0) size 50x150
RenderNamedFlowThread at (0,0) size 50x150
RenderBlock {DIV} at (0,0) size 50x150
RenderBlock {DIV} at (0,50) size 50x50 [bgcolor=#0000FF]
RenderBlock {DIV} at (0,100) size 50x50 [bgcolor=#FFA500]
layer at (0,0) size 50x50
RenderBlock {DIV} at (0,0) size 50x50 [bgcolor=#008000]
Regions for flow 'article'
RenderRegion {DIV} #should-have-layer hasLayer
RenderRegion {DIV} hasLayer
RenderRegion {DIV} hasLayer
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x60
RenderBlock {HTML} at (0,0) size 800x60
RenderBody {BODY} at (8,8) size 784x0
layer at (8,8) size 52x52
RenderRegion {DIV} at (0,0) size 52x52 [border: (1px solid #000000)]
layer at (60,8) size 52x52
RenderRegion {DIV} at (52,0) size 52x52 [border: (1px solid #000000)]
layer at (112,8) size 52x52
RenderRegion {DIV} at (104,0) size 52x52 [border: (1px solid #000000)]
Flow Threads
Thread with flow-name 'article'
layer at (0,0) size 50x150
RenderNamedFlowThread at (0,0) size 50x150
RenderBlock {DIV} at (0,0) size 50x150
RenderBlock {DIV} at (0,0) size 50x50 [bgcolor=#008000]
RenderBlock {DIV} at (0,100) size 50x50 [bgcolor=#FFA500]
layer at (0,50) size 50x50
RenderBlock (relative positioned) {DIV} at (0,50) size 50x50 [bgcolor=#0000FF]
Regions for flow 'article'
RenderRegion {DIV} hasLayer
RenderRegion {DIV} #should-have-layer hasLayer
RenderRegion {DIV} hasLayer
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,540) size 800x60
RenderBlock {HTML} at (0,0) size 800x60
RenderBody {BODY} at (8,8) size 784x0
layer at (8,540) size 52x52
RenderRegion {DIV} at (0,0) size 52x52 [border: (1px solid #000000)]
layer at (60,540) size 52x52
RenderRegion {DIV} at (52,0) size 52x52 [border: (1px solid #000000)]
layer at (112,540) size 52x52
RenderRegion {DIV} at (104,0) size 52x52 [border: (1px solid #000000)]
Flow Threads
Thread with flow-name 'article'
layer at (0,450) size 50x150
RenderNamedFlowThread at (0,0) size 50x150
RenderBlock {DIV} at (0,0) size 50x150
RenderBlock {DIV} at (0,0) size 50x50 [bgcolor=#008000]
RenderBlock {DIV} at (0,100) size 50x50 [bgcolor=#FFA500]
layer at (0,500) size 50x50
RenderBlock (relative positioned) {DIV} at (0,50) size 50x50 [bgcolor=#0000FF]
Regions for flow 'article'
RenderRegion {DIV} hasLayer
RenderRegion {DIV} #should-have-layer hasLayer
RenderRegion {DIV} hasLayer
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 60x600
RenderBlock {HTML} at (0,0) size 60x600
RenderBody {BODY} at (8,8) size 0x584
layer at (8,8) size 52x52
RenderRegion {DIV} at (0,0) size 52x52 [border: (1px solid #000000)]
layer at (8,60) size 52x52
RenderRegion {DIV} at (0,52) size 52x52 [border: (1px solid #000000)]
layer at (8,112) size 52x52
RenderRegion {DIV} at (0,104) size 52x52 [border: (1px solid #000000)]
Flow Threads
Thread with flow-name 'article'
layer at (0,0) size 150x50
RenderNamedFlowThread at (0,0) size 150x50
RenderBlock {DIV} at (0,0) size 150x50
RenderBlock {DIV} at (0,0) size 50x50 [bgcolor=#008000]
RenderBlock {DIV} at (100,0) size 50x50 [bgcolor=#FFA500]
layer at (50,0) size 50x50
RenderBlock (relative positioned) {DIV} at (50,0) size 50x50 [bgcolor=#0000FF]
Regions for flow 'article'
RenderRegion {DIV} hasLayer
RenderRegion {DIV} #should-have-layer hasLayer
RenderRegion {DIV} hasLayer
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (740,0) size 60x600
RenderBlock {HTML} at (0,0) size 60x600
RenderBody {BODY} at (8,8) size 0x584
layer at (740,8) size 52x52
RenderRegion {DIV} at (0,0) size 52x52 [border: (1px solid #000000)]
layer at (740,60) size 52x52
RenderRegion {DIV} at (0,52) size 52x52 [border: (1px solid #000000)]
layer at (740,112) size 52x52
RenderRegion {DIV} at (0,104) size 52x52 [border: (1px solid #000000)]
Flow Threads
Thread with flow-name 'article'
layer at (650,0) size 150x50
RenderNamedFlowThread at (0,0) size 150x50
RenderBlock {DIV} at (0,0) size 150x50
RenderBlock {DIV} at (0,0) size 50x50 [bgcolor=#008000]
RenderBlock {DIV} at (100,0) size 50x50 [bgcolor=#FFA500]
layer at (700,0) size 50x50
RenderBlock (relative positioned) {DIV} at (50,0) size 50x50 [bgcolor=#0000FF]
Regions for flow 'article'