Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
[CSS Regions] The background of children of scrollable elements flowe… 
…d into regions is not properly scrolled

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

Reviewed by David Hyatt.

Source/WebCore:

When computing the clip rect for painting the box decorations, the scrolled content offset
must be computed by going up the containing block tree, up to the region.

Tests: fast/regions/scrollable-region-scrollable-absolute-content-background.html
       fast/regions/scrollable-region-scrollable-content-background.html

* rendering/RenderNamedFlowThread.cpp:
(WebCore::RenderNamedFlowThread::decorationsClipRectForBoxInNamedFlowFragment):

LayoutTests:

Added tests for properly painting background of children of scrollable elements flowed into regions.

* fast/regions/scrollable-region-scrollable-absolute-content-background-expected.html: Added.
* fast/regions/scrollable-region-scrollable-absolute-content-background.html: Added.
* fast/regions/scrollable-region-scrollable-content-background-expected.html: Added.
* fast/regions/scrollable-region-scrollable-content-background.html: Added.


Canonical link: https://commits.webkit.org/148781@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@166259 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
@stavila
stavila committed Mar 25, 2014
1 parent 653e3cd commit 3439c3d
Show file tree
Hide file tree
Showing 7 changed files with 283 additions and 3 deletions.
14 changes: 14 additions & 0 deletions LayoutTests/ChangeLog
View file
@@ -1,3 +1,17 @@
2014-03-25 Radu Stavila <stavila@adobe.com>

[CSS Regions] The background of children of scrollable elements flowed into regions is not properly scrolled
https://bugs.webkit.org/show_bug.cgi?id=130574

Reviewed by David Hyatt.

Added tests for properly painting background of children of scrollable elements flowed into regions.

* fast/regions/scrollable-region-scrollable-absolute-content-background-expected.html: Added.
* fast/regions/scrollable-region-scrollable-absolute-content-background.html: Added.
* fast/regions/scrollable-region-scrollable-content-background-expected.html: Added.
* fast/regions/scrollable-region-scrollable-content-background.html: Added.

2014-03-25 Michael Saboff <msaboff@apple.com>

Unreviewed, rolling out r166126.
Expand Down
63 changes: 63 additions & 0 deletions ...Tests/fast/regions/scrollable-region-scrollable-absolute-content-background-expected.html
View file
@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html style="font: 16px/1.25 monospace;">
<head>
<script type="text/javascript">
onload = function()
{
document.getElementById("container").scrollTop = 40;
}
</script>

<style>
#container {
border: thick solid green;
height: 150px;
overflow: scroll;
margin: 15px;
padding: 5px;
}

#region {
width: 400px;
height: 200px;
border: 2px solid blue;
margin: 10px;
padding: 35px;
}

.blueBackground {
background: lightblue;
}

.greenBackground {
background: lightgreen;
position: absolute;
left: 205px;
top: 227px;
width: 250px;
}

#bottomDiv {
position: relative;
top: 50px;
width: 100px;
height: 100px;
background: green;
}
</style>
</head>

<body>
<a style="font-size: 14px" href="https://bugs.webkit.org/show_bug.cgi?id=130574">[CSS Regions] The background of children of scrollable<br/>elements flowed into regions is not properly scrolled</a>
<p>This test passes if the backgrounds of the paragraphs inside the <span style="color:green"><b>green box</b></span> is properly painted when scrolling the box.</p>

<div id="region">
<div id="container">
<p class="greenBackground">This text is absolutely positioned and should have a lightgreen background.</p>

<p class="blueBackground">This text should have a lightblue background which properly paints when scrolling the parent.</p>
<div id="bottomDiv"></div>
</div>
</div>
</body>
</html>
64 changes: 64 additions & 0 deletions LayoutTests/fast/regions/scrollable-region-scrollable-absolute-content-background.html
View file
@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html style="font: 16px/1.25 monospace;">
<head>
<script type="text/javascript">
onload = function()
{
document.getElementById("container").scrollTop = 40;
}
</script>

<style>
#container {
border: thick solid green;
height: 150px;
overflow: scroll;
margin: 15px;
padding: 5px;
-webkit-flow-into: flow;
}

#region {
width: 400px;
height: 200px;
-webkit-flow-from: flow;
border: 2px solid blue;
margin: 10px;
padding: 35px;
}

.blueBackground {
background: lightblue;
}

.greenBackground {
background: lightgreen;
position: absolute;
left: 150px;
top: 70px;
}

#bottomDiv {
position: relative;
top: 50px;
width: 100px;
height: 100px;
background: green;
}
</style>
</head>

<body>
<a style="font-size: 14px" href="https://bugs.webkit.org/show_bug.cgi?id=130574">[CSS Regions] The background of children of scrollable<br/>elements flowed into regions is not properly scrolled</a>
<p>This test passes if the backgrounds of the paragraphs inside the <span style="color:green"><b>green box</b></span> is properly painted when scrolling the box.</p>

<div id="region"></div>

<div id="container">
<p class="greenBackground">This text is absolutely positioned and should have a lightgreen background.</p>

<p class="blueBackground">This text should have a lightblue background which properly paints when scrolling the parent.</p>
<div id="bottomDiv"></div>
</div>
</body>
</html>
54 changes: 54 additions & 0 deletions LayoutTests/fast/regions/scrollable-region-scrollable-content-background-expected.html
View file
@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html style="font: 16px/1.25 monospace;">
<head>
<script type="text/javascript">
onload = function()
{
document.getElementById("container").scrollTop = 20;
}
</script>

<style>
#container {
border: thick solid green;
height: 150px;
overflow: scroll;
margin: 15px;
padding: 5px;
}

#region {
width: 300px;
height: 200px;
border: 2px solid blue;
margin: 10px;
padding: 35px;
}

.blueBackground {
background: lightblue;
}

#bottomDiv {
position: relative;
top: 50px;
width: 100px;
height: 100px;
background: green;
}
</style>
</head>

<body>
<a style="font-size: 14px" href="https://bugs.webkit.org/show_bug.cgi?id=130574">[CSS Regions] The background of children of scrollable elements flowed into regions is not properly scrolled</a>
<p>This test passes if the <span style="color:lightblue"><b>background</b></span> of the paragraphs inside the <span style="color:green"><b>green box</b></span> is properly painted when scrolling the box.</p>

<div id="region">
<div id="container">
<p class="blueBackground">This text should have a lightblue background which properly paints when scrolling the parent.</p>
<p class="blueBackground">This text should have a lightblue background which properly paints when scrolling the parent.</p>
<div id="bottomDiv"></div>
</div>
</div>
</body>
</html>
56 changes: 56 additions & 0 deletions LayoutTests/fast/regions/scrollable-region-scrollable-content-background.html
View file
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html style="font: 16px/1.25 monospace;">
<head>
<script type="text/javascript">
onload = function()
{
document.getElementById("container").scrollTop = 20;
}
</script>

<style>
#container {
border: thick solid green;
height: 150px;
overflow: scroll;
margin: 15px;
padding: 5px;
-webkit-flow-into: flow;
}

#region {
width: 300px;
height: 200px;
-webkit-flow-from: flow;
border: 2px solid blue;
margin: 10px;
padding: 35px;
}

.blueBackground {
background: lightblue;
}

#bottomDiv {
position: relative;
top: 50px;
width: 100px;
height: 100px;
background: green;
}
</style>
</head>

<body>
<a style="font-size: 14px" href="https://bugs.webkit.org/show_bug.cgi?id=130574">[CSS Regions] The background of children of scrollable elements flowed into regions is not properly scrolled</a>
<p>This test passes if the <span style="color:lightblue"><b>background</b></span> of the paragraphs inside the <span style="color:green"><b>green box</b></span> is properly painted when scrolling the box.</p>

<div id="region"></div>

<div id="container">
<p class="blueBackground">This text should have a lightblue background which properly paints when scrolling the parent.</p>
<p class="blueBackground">This text should have a lightblue background which properly paints when scrolling the parent.</p>
<div id="bottomDiv"></div>
</div>
</body>
</html>
16 changes: 16 additions & 0 deletions Source/WebCore/ChangeLog
View file
@@ -1,3 +1,19 @@
2014-03-25 Radu Stavila <stavila@adobe.com>

[CSS Regions] The background of children of scrollable elements flowed into regions is not properly scrolled
https://bugs.webkit.org/show_bug.cgi?id=130574

Reviewed by David Hyatt.

When computing the clip rect for painting the box decorations, the scrolled content offset
must be computed by going up the containing block tree, up to the region.

Tests: fast/regions/scrollable-region-scrollable-absolute-content-background.html
fast/regions/scrollable-region-scrollable-content-background.html

* rendering/RenderNamedFlowThread.cpp:
(WebCore::RenderNamedFlowThread::decorationsClipRectForBoxInNamedFlowFragment):

2014-03-25 Joseph Pecoraro <pecoraro@apple.com>

[iOS] Inspector View Indication Support
Expand Down
19 changes: 16 additions & 3 deletions Source/WebCore/rendering/RenderNamedFlowThread.cpp
View file
Expand Up @@ -297,9 +297,22 @@ LayoutRect RenderNamedFlowThread::decorationsClipRectForBoxInNamedFlowFragment(c

// Now flip it again.
flipForWritingModeLocalCoordinates(visualOverflowRect);

// Take the scrolled offset of the region into consideration.
IntSize scrolledContentOffset = fragment.fragmentContainer().scrolledContentOffset();

// Take the scrolled offset of this object's parents into consideration.
IntSize scrolledContentOffset;
RenderBlock* containingBlock = box.containingBlock();
while (containingBlock) {
if (containingBlock->isRenderNamedFlowThread()) {
// We've reached the flow thread, take the scrolled offset of the region into consideration.
ASSERT(containingBlock == this);
scrolledContentOffset += fragment.fragmentContainer().scrolledContentOffset();
break;
}

scrolledContentOffset += containingBlock->scrolledContentOffset();
containingBlock = containingBlock->containingBlock();
}

if (!scrolledContentOffset.isZero()) {
if (style().isFlippedBlocksWritingMode())
scrolledContentOffset = -scrolledContentOffset;
Expand Down

0 comments on commit 3439c3d

Please sign in to comment.