Title: [126943] trunk
- Revision
- 126943
- Author
- [email protected]
- Date
- 2012-08-28 17:38:45 -0700 (Tue, 28 Aug 2012)
Log Message
Handle sticky that overflows its container
https://bugs.webkit.org/show_bug.cgi?id=95260
Reviewed by Ojan Vafai.
Source/WebCore:
When an element with position:sticky overflows its container,
don't have the sticky code push it back inside that container.
It will just never get offset in the sticky direction.
Test: fast/css/sticky/sticky-overflowing.html
* rendering/RenderBoxModelObject.cpp:
(WebCore::RenderBoxModelObject::stickyPositionOffset):
LayoutTests:
Testcase with sticky elements that overflow their containers.
* fast/css/sticky/sticky-overflowing-expected.html: Added.
* fast/css/sticky/sticky-overflowing.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (126942 => 126943)
--- trunk/LayoutTests/ChangeLog 2012-08-29 00:28:05 UTC (rev 126942)
+++ trunk/LayoutTests/ChangeLog 2012-08-29 00:38:45 UTC (rev 126943)
@@ -1,3 +1,15 @@
+2012-08-28 Simon Fraser <[email protected]>
+
+ Handle sticky that overflows its container
+ https://bugs.webkit.org/show_bug.cgi?id=95260
+
+ Reviewed by Ojan Vafai.
+
+ Testcase with sticky elements that overflow their containers.
+
+ * fast/css/sticky/sticky-overflowing-expected.html: Added.
+ * fast/css/sticky/sticky-overflowing.html: Added.
+
2012-08-28 Xianzhu Wang <[email protected]>
[Chromium-Android] Upstream layout test expectations (Part 2)
Added: trunk/LayoutTests/fast/css/sticky/sticky-overflowing-expected.html (0 => 126943)
--- trunk/LayoutTests/fast/css/sticky/sticky-overflowing-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css/sticky/sticky-overflowing-expected.html 2012-08-29 00:38:45 UTC (rev 126943)
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+<style>
+ body {
+ margin: 0;
+ overflow: hidden; /* hide scrollbars */
+ }
+
+ .container {
+ position: absolute;
+ width: 200px;
+ height: 400px;
+ margin: 10px;
+ left: 200px;
+ top: -300px;
+ outline: 2px solid black;
+ }
+
+ .spacer {
+ height: 350px;
+ width: 20px;
+ background-color: black;
+ }
+
+ .vertical .spacer {
+ height: 20px;
+ width: 350px;
+ }
+
+ .vertical.container {
+ -webkit-writing-mode: vertical-rl;
+ top: 200px;
+ left: 700px;
+ width: 400px;
+ height: 200px;
+ }
+
+
+ .box {
+ width: 150px;
+ height: 150px;
+ }
+
+ .sticky {
+ position: relative;
+ background-color: green;
+ opacity: 0.75;
+ }
+</style>
+</head>
+<body>
+ <div class="container">
+ <div class="spacer"></div>
+ <div class="sticky box"></div>
+ </div>
+
+ <div class="vertical container">
+ <div class="spacer"></div>
+ <div class="sticky box"></div>
+ </div>
+</body>
+</html>
Property changes on: trunk/LayoutTests/fast/css/sticky/sticky-overflowing-expected.html
___________________________________________________________________
Added: svn:mime-type
Added: svn:keywords
Added: svn:eol-style
Added: trunk/LayoutTests/fast/css/sticky/sticky-overflowing.html (0 => 126943)
--- trunk/LayoutTests/fast/css/sticky/sticky-overflowing.html (rev 0)
+++ trunk/LayoutTests/fast/css/sticky/sticky-overflowing.html 2012-08-29 00:38:45 UTC (rev 126943)
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+<style>
+ body {
+ margin: 0;
+ height: 2000px;
+ overflow: hidden; /* hide scrollbars */
+ }
+
+ .container {
+ position: absolute;
+ width: 200px;
+ height: 400px;
+ margin: 10px;
+ left: 300px;
+ top: -200px;
+ font-family: Ahem;
+ font-size: 24px;
+ outline: 2px solid black;
+ }
+
+ .vertical.container {
+ -webkit-writing-mode: vertical-rl;
+ top: 300px;
+ left: 800px;
+ width: 400px;
+ height: 200px;
+ }
+
+ .spacer {
+ height: 350px;
+ width: 20px;
+ background-color: black;
+ }
+
+ .vertical .spacer {
+ height: 20px;
+ width: 350px;
+ }
+
+ .box {
+ width: 150px;
+ height: 150px;
+ }
+
+ .sticky {
+ position: -webkit-sticky;
+ top: 200px;
+ right: 200px;
+ background-color: green;
+ opacity: 0.75;
+ }
+</style>
+<script>
+ function doTest()
+ {
+ window.scrollTo(100, 100);
+ }
+ window.addEventListener('load', doTest, false);
+</script>
+</head>
+<body>
+ <div class="container">
+ <div class="spacer"></div>
+ <div class="sticky box"></div>
+ </div>
+
+ <div class="vertical container">
+ <div class="spacer"></div>
+ <div class="sticky box"></div>
+ </div>
+</body>
+</html>
Property changes on: trunk/LayoutTests/fast/css/sticky/sticky-overflowing.html
___________________________________________________________________
Added: svn:mime-type
Added: svn:keywords
Added: svn:eol-style
Modified: trunk/Source/WebCore/ChangeLog (126942 => 126943)
--- trunk/Source/WebCore/ChangeLog 2012-08-29 00:28:05 UTC (rev 126942)
+++ trunk/Source/WebCore/ChangeLog 2012-08-29 00:38:45 UTC (rev 126943)
@@ -1,3 +1,19 @@
+2012-08-28 Simon Fraser <[email protected]>
+
+ Handle sticky that overflows its container
+ https://bugs.webkit.org/show_bug.cgi?id=95260
+
+ Reviewed by Ojan Vafai.
+
+ When an element with position:sticky overflows its container,
+ don't have the sticky code push it back inside that container.
+ It will just never get offset in the sticky direction.
+
+ Test: fast/css/sticky/sticky-overflowing.html
+
+ * rendering/RenderBoxModelObject.cpp:
+ (WebCore::RenderBoxModelObject::stickyPositionOffset):
+
2012-08-28 Mark Pilgrim <[email protected]>
[Chromium] Remove decodeAudioFileData from PlatformSupport
Modified: trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp (126942 => 126943)
--- trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp 2012-08-29 00:28:05 UTC (rev 126942)
+++ trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp 2012-08-29 00:38:45 UTC (rev 126943)
@@ -585,39 +585,43 @@
// Horizontal position.
if (!style()->right().isAuto()) {
LayoutUnit rightLimit = viewportRect.maxX() - valueForLength(style()->right(), viewportRect.width(), view());
- if (absoluteStickyBoxRect.maxX() > rightLimit)
- absoluteStickyBoxRect.setX(rightLimit - absoluteStickyBoxRect.width());
-
- if (absoluteStickyBoxRect.x() < absContainerContentRect.x())
- absoluteStickyBoxRect.setX(absContainerContentRect.x());
+ LayoutUnit rightDelta = min<float>(0, rightLimit.toFloat() - absoluteStickyBoxRect.maxX());
+ LayoutUnit availableSpace = min<float>(0, absContainerContentRect.x() - absoluteStickyBoxRect.x());
+ if (rightDelta < availableSpace)
+ rightDelta = availableSpace;
+
+ absoluteStickyBoxRect.move(rightDelta, 0);
}
if (!style()->left().isAuto()) {
LayoutUnit leftLimit = viewportRect.x() + valueForLength(style()->left(), viewportRect.width(), view());
- if (absoluteStickyBoxRect.x() < leftLimit)
- absoluteStickyBoxRect.setX(leftLimit);
+ LayoutUnit leftDelta = max<float>(0, leftLimit.toFloat() - absoluteStickyBoxRect.x());
+ LayoutUnit availableSpace = max<float>(0, absContainerContentRect.maxX() - absoluteStickyBoxRect.maxX());
+ if (leftDelta > availableSpace)
+ leftDelta = availableSpace;
- if (absoluteStickyBoxRect.maxX() > absContainerContentRect.maxX())
- absoluteStickyBoxRect.setX(absContainerContentRect.maxX() - absoluteStickyBoxRect.width());
+ absoluteStickyBoxRect.move(leftDelta, 0);
}
// Vertical position.
if (!style()->bottom().isAuto()) {
LayoutUnit bottomLimit = viewportRect.maxY() - valueForLength(style()->bottom(), viewportRect.height(), view());
- if (absoluteStickyBoxRect.maxY() > bottomLimit)
- absoluteStickyBoxRect.setY(bottomLimit - absoluteStickyBoxRect.height());
-
- if (absoluteStickyBoxRect.y() < absContainerContentRect.y())
- absoluteStickyBoxRect.setY(absContainerContentRect.y());
+ LayoutUnit bottomDelta = min<float>(0, bottomLimit.toFloat() - absoluteStickyBoxRect.maxY());
+ LayoutUnit availableSpace = min<float>(0, absContainerContentRect.y() - absoluteStickyBoxRect.y());
+ if (bottomDelta < availableSpace)
+ bottomDelta = availableSpace;
+
+ absoluteStickyBoxRect.move(0, bottomDelta);
}
if (!style()->top().isAuto()) {
LayoutUnit topLimit = viewportRect.y() + valueForLength(style()->top(), viewportRect.height(), view());
- if (absoluteStickyBoxRect.y() < topLimit)
- absoluteStickyBoxRect.setY(topLimit);
+ LayoutUnit topDelta = max<float>(0, topLimit.toFloat() - absoluteStickyBoxRect.y());
+ LayoutUnit availableSpace = max<float>(0, absContainerContentRect.maxY() - absoluteStickyBoxRect.maxY());
+ if (topDelta > availableSpace)
+ topDelta = availableSpace;
- if (absoluteStickyBoxRect.maxY() > absContainerContentRect.maxY())
- absoluteStickyBoxRect.setY(absContainerContentRect.maxY() - absoluteStickyBoxRect.height());
+ absoluteStickyBoxRect.move(0, topDelta);
}
// The sticky offset is physical, so we can just return the delta computed in absolute coords (though it may be wrong with transforms).
_______________________________________________
webkit-changes mailing list
[email protected]
http://lists.webkit.org/mailman/listinfo/webkit-changes
