<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[165130] trunk</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/165130">165130</a></dd>
<dt>Author</dt> <dd>stavila@adobe.com</dd>
<dt>Date</dt> <dd>2014-03-05 14:02:55 -0800 (Wed, 05 Mar 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>[CSS Regions] Scrollable regions
https://bugs.webkit.org/show_bug.cgi?id=129301
Reviewed by David Hyatt.
Source/WebCore:
Named flow fragments do not inherit the overflow property from the fragment container.
When asked if the flow thread content should be clipped, the named flow fragments
will respond using the overflow property of the named flow fragment container.
When painting the flow thread layer inside the region, the scrolled content offset of
the region must be used to offset the flow thread's layer.
Tests: fast/regions/scrollable-last-region.html
fast/regions/scrollable-single-region-bt.html
fast/regions/scrollable-single-region-lr.html
fast/regions/scrollable-single-region-relative-element.html
fast/regions/scrollable-single-region-rl.html
fast/regions/scrollable-single-region.html
* rendering/RenderLayer.cpp:
(WebCore::RenderLayer::mapLayerClipRectsToFragmentationLayer):
(WebCore::RenderLayer::calculateClipRects):
* rendering/RenderNamedFlowFragment.cpp:
(WebCore::RenderNamedFlowFragment::createStyle):
(WebCore::RenderNamedFlowFragment::shouldClipFlowThreadContent):
* rendering/RenderNamedFlowFragment.h:
* rendering/RenderNamedFlowThread.cpp:
(WebCore::RenderNamedFlowThread::decorationsClipRectForBoxInNamedFlowFragment):
* rendering/RenderRegion.cpp:
(WebCore::RenderRegion::shouldClipFlowThreadContent):
* rendering/RenderRegion.h:
LayoutTests:
Added tests for scrolling elements flowed into regions.
* fast/regions/scrollable-last-region-expected.html: Added.
* fast/regions/scrollable-last-region.html: Added.
* fast/regions/scrollable-single-region-bt-expected.html: Added.
* fast/regions/scrollable-single-region-bt.html: Added.
* fast/regions/scrollable-single-region-expected.html: Added.
* fast/regions/scrollable-single-region-lr-expected.html: Added.
* fast/regions/scrollable-single-region-lr.html: Added.
* fast/regions/scrollable-single-region-relative-element-expected.html: Added.
* fast/regions/scrollable-single-region-relative-element.html: Added.
* fast/regions/scrollable-single-region-rl-expected.html: Added.
* fast/regions/scrollable-single-region-rl.html: Added.
* fast/regions/scrollable-single-region.html: Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderLayercpp">trunk/Source/WebCore/rendering/RenderLayer.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderNamedFlowFragmentcpp">trunk/Source/WebCore/rendering/RenderNamedFlowFragment.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderNamedFlowFragmenth">trunk/Source/WebCore/rendering/RenderNamedFlowFragment.h</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderNamedFlowThreadcpp">trunk/Source/WebCore/rendering/RenderNamedFlowThread.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderRegioncpp">trunk/Source/WebCore/rendering/RenderRegion.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderRegionh">trunk/Source/WebCore/rendering/RenderRegion.h</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastregionsscrollablelastregionexpectedhtml">trunk/LayoutTests/fast/regions/scrollable-last-region-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastregionsscrollablelastregionhtml">trunk/LayoutTests/fast/regions/scrollable-last-region.html</a></li>
<li><a href="#trunkLayoutTestsfastregionsscrollablesingleregionbtexpectedhtml">trunk/LayoutTests/fast/regions/scrollable-single-region-bt-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastregionsscrollablesingleregionbthtml">trunk/LayoutTests/fast/regions/scrollable-single-region-bt.html</a></li>
<li><a href="#trunkLayoutTestsfastregionsscrollablesingleregionexpectedhtml">trunk/LayoutTests/fast/regions/scrollable-single-region-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastregionsscrollablesingleregionlrexpectedhtml">trunk/LayoutTests/fast/regions/scrollable-single-region-lr-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastregionsscrollablesingleregionlrhtml">trunk/LayoutTests/fast/regions/scrollable-single-region-lr.html</a></li>
<li><a href="#trunkLayoutTestsfastregionsscrollablesingleregionrelativeelementexpectedhtml">trunk/LayoutTests/fast/regions/scrollable-single-region-relative-element-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastregionsscrollablesingleregionrelativeelementhtml">trunk/LayoutTests/fast/regions/scrollable-single-region-relative-element.html</a></li>
<li><a href="#trunkLayoutTestsfastregionsscrollablesingleregionrlexpectedhtml">trunk/LayoutTests/fast/regions/scrollable-single-region-rl-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastregionsscrollablesingleregionrlhtml">trunk/LayoutTests/fast/regions/scrollable-single-region-rl.html</a></li>
<li><a href="#trunkLayoutTestsfastregionsscrollablesingleregionhtml">trunk/LayoutTests/fast/regions/scrollable-single-region.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (165129 => 165130)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2014-03-05 22:01:57 UTC (rev 165129)
+++ trunk/LayoutTests/ChangeLog 2014-03-05 22:02:55 UTC (rev 165130)
</span><span class="lines">@@ -1,3 +1,25 @@
</span><ins>+2014-03-05 Radu Stavila <stavila@adobe.com>
+
+ [CSS Regions] Scrollable regions
+ https://bugs.webkit.org/show_bug.cgi?id=129301
+
+ Reviewed by David Hyatt.
+
+ Added tests for scrolling elements flowed into regions.
+
+ * fast/regions/scrollable-last-region-expected.html: Added.
+ * fast/regions/scrollable-last-region.html: Added.
+ * fast/regions/scrollable-single-region-bt-expected.html: Added.
+ * fast/regions/scrollable-single-region-bt.html: Added.
+ * fast/regions/scrollable-single-region-expected.html: Added.
+ * fast/regions/scrollable-single-region-lr-expected.html: Added.
+ * fast/regions/scrollable-single-region-lr.html: Added.
+ * fast/regions/scrollable-single-region-relative-element-expected.html: Added.
+ * fast/regions/scrollable-single-region-relative-element.html: Added.
+ * fast/regions/scrollable-single-region-rl-expected.html: Added.
+ * fast/regions/scrollable-single-region-rl.html: Added.
+ * fast/regions/scrollable-single-region.html: Added.
+
</ins><span class="cx"> 2014-03-05 Zalan Bujtas <zalan@apple.com>
</span><span class="cx">
</span><span class="cx"> Subpixel rendering: Device pixel round accumulated subpixel value when the RenderLayer with transform paints its content.
</span></span></pre></div>
<a id="trunkLayoutTestsfastregionsscrollablelastregionexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/scrollable-last-region-expected.html (0 => 165130)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/scrollable-last-region-expected.html (rev 0)
+++ trunk/LayoutTests/fast/regions/scrollable-last-region-expected.html 2014-03-05 22:02:55 UTC (rev 165130)
</span><span class="lines">@@ -0,0 +1,84 @@
</span><ins>+<!DOCTYPE html>
+<html style="font: 10px/1.25 monospace; font-family: Ahem">
+ <head>
+ <script>
+ function testScroll()
+ {
+ var lastRegion = document.getElementById("region3");
+ lastRegion.scrollTop += 60;
+ }
+ </script>
+
+ <style>
+ .container {
+ border: thick solid green;
+ overflow: visible;
+ }
+
+ #container1 {
+ height: 95px;
+ border-bottom: none;
+ }
+
+ #container2 {
+ height: 100px;
+ border-top: none;
+ border-bottom: none;
+ }
+
+ #container3 {
+ border-top: none;
+ height: 55px;
+ }
+
+ .region {
+ width: 300px;
+ height: 100px;
+ border: 2px solid red;
+ padding: 35px;
+ padding-right: 45px;
+ }
+
+ #region1 {
+ float: left;
+ }
+
+ #region2 {
+ float: right;
+ }
+
+ #region3 {
+ float: left;
+ margin-top: 30px;
+ overflow: scroll;
+ border-color: blue;
+ }
+ </style>
+ </head>
+
+ <body onload="testScroll()">
+ <div style="font: 14px/1.25 serif; font-family: Arial Verdana">
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=129301">[CSS Regions] Scrollable regions</a>
+ <p>This test passes if the 3rd <span style="color:blue">region</span> properly scrolls its content.</p>
+ </div>
+
+ <div class="region" id="region1">
+ <div id="container1" class="container">
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum, sapien vitae faucibus suscipit, massa urna sagittis libero, ac imperdiet elit lacus a ligula. Mauris a orci sem.</div>
+ </div>
+ </div>
+
+ <div class="region" id="region2">
+ <div id="container2" class="container">
+ <div>Nullam ullamcorper ornare porttitor. Morbi laoreet pellentesque diam, vitae hendrerit sem fringilla id. Maecenas rutrum lacinia lobortis. Praesent elit lectus, porttitor sed semper vel, fringilla id dolor. Sed</div>
+ </div>
+ </div>
+
+ <div class="region" id="region3">
+ <div id="container3" class="container">
+ <div>lacus nisl, rutrum sit amet euismod a, vulputate quis elit. Fusce commodo dui quis lacus viverra vel egestas velit tempus. Donec ut sapien sit amet purus luctus fermentum. Donec eleifend pretium neque quis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam congue dapibus mi, id ultricies est sagittis et. Integer posuere, eros vitae laoreet congue, tortor purus euismod nibh, eu porta purus arcu id turpis. Donec vitae ultricies nibh. Nullam in urna dolor, at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+ <div style="color:red; height:491px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum, sapien vitae faucibus suscipit, massa urna sagittis libero, ac imperdiet elit lacus a ligula. Mauris a orci sem. Nullam ullamcorper ornare porttitor. Morbi laoreet pellentesque diam, vitae hendrerit sem fringilla id. Maecenas rutrum lacinia lobortis. Praesent elit lectus, porttitor sed semper vel, fringilla id dolor. Sed lacus nisl, rutrum sit amet euismod a, vulputate quis elit. Fusce commodo dui quis lacus viverra vel egestas velit tempus. Donec ut sapien sit amet purus luctus fermentum. Donec eleifend pretium neque quis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam congue dapibus mi, id ultricies est sagittis et. Integer posuere, eros vitae laoreet congue, tortor purus euismod nibh, eu porta purus arcu id turpis. Donec vitae ultricies nibh. Nullam in urna dolor, at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+ </div>
+ </div>
+ </body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionsscrollablelastregionhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/scrollable-last-region.html (0 => 165130)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/scrollable-last-region.html (rev 0)
+++ trunk/LayoutTests/fast/regions/scrollable-last-region.html 2014-03-05 22:02:55 UTC (rev 165130)
</span><span class="lines">@@ -0,0 +1,61 @@
</span><ins>+<!DOCTYPE html>
+<html style="font: 10px/1.25 monospace; font-family: Ahem">
+ <head>
+ <script>
+ function testScroll()
+ {
+ var lastRegion = document.getElementById("region3");
+ lastRegion.scrollTop += 60;
+ }
+ </script>
+
+ <style>
+ #container {
+ border: thick solid green;
+ height: 250px;
+ overflow: visible;
+ -webkit-flow-into: flow;
+ }
+
+ .region {
+ -webkit-flow-from: flow;
+ width: 300px;
+ height: 100px;
+ border: 2px solid red;
+ padding: 35px;
+ padding-right: 45px;
+ }
+
+ #region1 {
+ float: left;
+ }
+
+ #region2 {
+ float: right;
+ }
+
+ #region3 {
+ float: left;
+ margin-top: 30px;
+ overflow: scroll;
+ border-color: blue;
+ }
+ </style>
+ </head>
+
+ <body onload="testScroll()">
+ <div style="font: 14px/1.25 serif; font-family: Arial Verdana">
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=129301">[CSS Regions] Scrollable regions</a>
+ <p>This test passes if the 3rd <span style="color:blue">region</span> properly scrolls its content.</p>
+ </div>
+
+ <div class="region" id="region1"></div>
+ <div class="region" id="region2"></div>
+ <div class="region" id="region3"></div>
+
+ <div id="container">
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum, sapien vitae faucibus suscipit, massa urna sagittis libero, ac imperdiet elit lacus a ligula. Mauris a orci sem. Nullam ullamcorper ornare porttitor. Morbi laoreet pellentesque diam, vitae hendrerit sem fringilla id. Maecenas rutrum lacinia lobortis. Praesent elit lectus, porttitor sed semper vel, fringilla id dolor. Sed lacus nisl, rutrum sit amet euismod a, vulputate quis elit. Fusce commodo dui quis lacus viverra vel egestas velit tempus. Donec ut sapien sit amet purus luctus fermentum. Donec eleifend pretium neque quis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam congue dapibus mi, id ultricies est sagittis et. Integer posuere, eros vitae laoreet congue, tortor purus euismod nibh, eu porta purus arcu id turpis. Donec vitae ultricies nibh. Nullam in urna dolor, at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+ <div style="color:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum, sapien vitae faucibus suscipit, massa urna sagittis libero, ac imperdiet elit lacus a ligula. Mauris a orci sem. Nullam ullamcorper ornare porttitor. Morbi laoreet pellentesque diam, vitae hendrerit sem fringilla id. Maecenas rutrum lacinia lobortis. Praesent elit lectus, porttitor sed semper vel, fringilla id dolor. Sed lacus nisl, rutrum sit amet euismod a, vulputate quis elit. Fusce commodo dui quis lacus viverra vel egestas velit tempus. Donec ut sapien sit amet purus luctus fermentum. Donec eleifend pretium neque quis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam congue dapibus mi, id ultricies est sagittis et. Integer posuere, eros vitae laoreet congue, tortor purus euismod nibh, eu porta purus arcu id turpis. Donec vitae ultricies nibh. Nullam in urna dolor, at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+ </div>
+ </body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionsscrollablesingleregionbtexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/scrollable-single-region-bt-expected.html (0 => 165130)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/scrollable-single-region-bt-expected.html (rev 0)
+++ trunk/LayoutTests/fast/regions/scrollable-single-region-bt-expected.html 2014-03-05 22:02:55 UTC (rev 165130)
</span><span class="lines">@@ -0,0 +1,45 @@
</span><ins>+<!DOCTYPE html>
+<html style="font: 16px/1.25 monospace;">
+ <head>
+ <script>
+ function testScroll()
+ {
+ var region = document.getElementById("region");
+ region.scrollTop -= 120;
+ }
+ </script>
+
+ <style>
+ html {
+ -webkit-writing-mode: horizontal-bt;
+ }
+
+ #container {
+ border: thick solid green;
+ height: 150px;
+ }
+
+ #region {
+ width: 600px;
+ height: 100px;
+ border: 2px solid red;
+ margin: 10px;
+ padding: 35px;
+ padding-right: 45px;
+ overflow-y: scroll;
+ }
+ </style>
+ </head>
+
+ <body onload="testScroll()">
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=129301">[CSS Regions] Scrollable regions</a>
+ <p>This test passes if the <span style="color:red">region</span> properly scrolls its <span style="color:green">content</span>.</p>
+
+ <div id="region">
+ <div id="container">
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum, sapien vitae faucibus suscipit, massa urna sagittis libero, ac imperdiet elit lacus a ligula. Mauris a orci sem. Nullam ullamcorper ornare porttitor. Morbi laoreet pellentesque diam, vitae hendrerit sem fringilla id. Maecenas rutrum lacinia lobortis. Praesent elit lectus, porttitor sed semper vel, fringilla id dolor. Sed lacus nisl, rutrum sit amet euismod a, vulputate quis elit. Fusce commodo dui quis lacus viverra vel egestas velit tempus. Donec ut sapien sit amet purus luctus fermentum. Donec eleifend pretium neque quis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam congue dapibus mi, id ultricies est sagittis et. Integer posuere, eros vitae laoreet congue, tortor purus euismod nibh, eu porta purus arcu id turpis. Donec vitae ultricies nibh. Nullam in urna dolor, at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+ <div style="color:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum, sapien vitae faucibus suscipit, massa urna sagittis libero, ac imperdiet elit lacus a ligula. Mauris a orci sem. Nullam ullamcorper ornare porttitor. Morbi laoreet pellentesque diam, vitae hendrerit sem fringilla id. Maecenas rutrum lacinia lobortis. Praesent elit lectus, porttitor sed semper vel, fringilla id dolor. Sed lacus nisl, rutrum sit amet euismod a, vulputate quis elit. Fusce commodo dui quis lacus viverra vel egestas velit tempus. Donec ut sapien sit amet purus luctus fermentum. Donec eleifend pretium neque quis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam congue dapibus mi, id ultricies est sagittis et. Integer posuere, eros vitae laoreet congue, tortor purus euismod nibh, eu porta purus arcu id turpis. Donec vitae ultricies nibh. Nullam in urna dolor, at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+ </div>
+ </div>
+ </body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionsscrollablesingleregionbthtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/scrollable-single-region-bt.html (0 => 165130)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/scrollable-single-region-bt.html (rev 0)
+++ trunk/LayoutTests/fast/regions/scrollable-single-region-bt.html 2014-03-05 22:02:55 UTC (rev 165130)
</span><span class="lines">@@ -0,0 +1,47 @@
</span><ins>+<!DOCTYPE html>
+<html style="font: 16px/1.25 monospace;">
+ <head>
+ <script>
+ function testScroll()
+ {
+ var region = document.getElementById("region");
+ region.scrollTop -= 120;
+ }
+ </script>
+
+ <style>
+ html {
+ -webkit-writing-mode: horizontal-bt;
+ }
+
+ #container {
+ border: thick solid green;
+ height: 150px;
+ -webkit-flow-into: flow;
+ }
+
+ #region {
+ width: 600px;
+ height: 100px;
+ -webkit-flow-from: flow;
+ border: 2px solid red;
+ margin: 10px;
+ padding: 35px;
+ padding-right: 45px;
+ overflow-y: scroll;
+ }
+ </style>
+ </head>
+
+ <body onload="testScroll()">
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=129301">[CSS Regions] Scrollable regions</a>
+ <p>This test passes if the <span style="color:red">region</span> properly scrolls its <span style="color:green">content</span>.</p>
+
+ <div id="region"></div>
+
+ <div id="container">
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum, sapien vitae faucibus suscipit, massa urna sagittis libero, ac imperdiet elit lacus a ligula. Mauris a orci sem. Nullam ullamcorper ornare porttitor. Morbi laoreet pellentesque diam, vitae hendrerit sem fringilla id. Maecenas rutrum lacinia lobortis. Praesent elit lectus, porttitor sed semper vel, fringilla id dolor. Sed lacus nisl, rutrum sit amet euismod a, vulputate quis elit. Fusce commodo dui quis lacus viverra vel egestas velit tempus. Donec ut sapien sit amet purus luctus fermentum. Donec eleifend pretium neque quis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam congue dapibus mi, id ultricies est sagittis et. Integer posuere, eros vitae laoreet congue, tortor purus euismod nibh, eu porta purus arcu id turpis. Donec vitae ultricies nibh. Nullam in urna dolor, at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+ <div style="color:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum, sapien vitae faucibus suscipit, massa urna sagittis libero, ac imperdiet elit lacus a ligula. Mauris a orci sem. Nullam ullamcorper ornare porttitor. Morbi laoreet pellentesque diam, vitae hendrerit sem fringilla id. Maecenas rutrum lacinia lobortis. Praesent elit lectus, porttitor sed semper vel, fringilla id dolor. Sed lacus nisl, rutrum sit amet euismod a, vulputate quis elit. Fusce commodo dui quis lacus viverra vel egestas velit tempus. Donec ut sapien sit amet purus luctus fermentum. Donec eleifend pretium neque quis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam congue dapibus mi, id ultricies est sagittis et. Integer posuere, eros vitae laoreet congue, tortor purus euismod nibh, eu porta purus arcu id turpis. Donec vitae ultricies nibh. Nullam in urna dolor, at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+ </div>
+ </body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionsscrollablesingleregionexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/scrollable-single-region-expected.html (0 => 165130)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/scrollable-single-region-expected.html (rev 0)
+++ trunk/LayoutTests/fast/regions/scrollable-single-region-expected.html 2014-03-05 22:02:55 UTC (rev 165130)
</span><span class="lines">@@ -0,0 +1,42 @@
</span><ins>+<!DOCTYPE html>
+<html style="font: 16px/1.25 monospace;">
+ <head>
+ <script>
+ function testScroll()
+ {
+ var region = document.getElementById("region");
+ region.scrollTop += 120;
+ }
+ </script>
+
+ <style>
+ #container {
+ border: thick solid green;
+ height: 150px;
+ overflow: visible;
+ }
+
+ #region {
+ width: 600px;
+ height: 100px;
+ border: 2px solid red;
+ margin: 10px;
+ padding: 35px;
+ padding-right: 45px;
+ overflow: scroll;
+ }
+ </style>
+ </head>
+
+ <body onload="testScroll()">
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=129301">[CSS Regions] Scrollable regions</a>
+ <p>This test passes if the <span style="color:red">region</span> properly scrolls its content.</p>
+
+ <div id="region">
+ <div id="container">
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum, sapien vitae faucibus suscipit, massa urna sagittis libero, ac imperdiet elit lacus a ligula. Mauris a orci sem. Nullam ullamcorper ornare porttitor. Morbi laoreet pellentesque diam, vitae hendrerit sem fringilla id. Maecenas rutrum lacinia lobortis. Praesent elit lectus, porttitor sed semper vel, fringilla id dolor. Sed lacus nisl, rutrum sit amet euismod a, vulputate quis elit. Fusce commodo dui quis lacus viverra vel egestas velit tempus. Donec ut sapien sit amet purus luctus fermentum. Donec eleifend pretium neque quis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam congue dapibus mi, id ultricies est sagittis et. Integer posuere, eros vitae laoreet congue, tortor purus euismod nibh, eu porta purus arcu id turpis. Donec vitae ultricies nibh. Nullam in urna dolor, at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+ <div style="color:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum, sapien vitae faucibus suscipit, massa urna sagittis libero, ac imperdiet elit lacus a ligula. Mauris a orci sem. Nullam ullamcorper ornare porttitor. Morbi laoreet pellentesque diam, vitae hendrerit sem fringilla id. Maecenas rutrum lacinia lobortis. Praesent elit lectus, porttitor sed semper vel, fringilla id dolor. Sed lacus nisl, rutrum sit amet euismod a, vulputate quis elit. Fusce commodo dui quis lacus viverra vel egestas velit tempus. Donec ut sapien sit amet purus luctus fermentum. Donec eleifend pretium neque quis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam congue dapibus mi, id ultricies est sagittis et. Integer posuere, eros vitae laoreet congue, tortor purus euismod nibh, eu porta purus arcu id turpis. Donec vitae ultricies nibh. Nullam in urna dolor, at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+ </div>
+ </div>
+ </body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionsscrollablesingleregionlrexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/scrollable-single-region-lr-expected.html (0 => 165130)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/scrollable-single-region-lr-expected.html (rev 0)
+++ trunk/LayoutTests/fast/regions/scrollable-single-region-lr-expected.html 2014-03-05 22:02:55 UTC (rev 165130)
</span><span class="lines">@@ -0,0 +1,49 @@
</span><ins>+<!DOCTYPE html>
+<html style="font: 16px/1.25 monospace; font-family: Ahem">
+ <head>
+ <script>
+ function testScroll()
+ {
+ var region = document.getElementById("region");
+ region.scrollLeft += 350;
+ }
+ </script>
+
+ <style>
+ html {
+ -webkit-writing-mode: vertical-lr;
+ }
+
+ #container {
+ border: thick solid green;
+ width: 600px;
+ }
+
+ #region {
+ width: 300px;
+ height: 400px;
+ border: 2px solid red;
+ margin: 10px;
+ padding: 35px;
+ padding-right: 45px;
+ overflow: scroll;
+ }
+
+ .normalText {
+ font-family: Arial;
+ }
+ </style>
+ </head>
+
+ <body onload="testScroll()">
+ <a class="normalText" href="https://bugs.webkit.org/show_bug.cgi?id=129301">[CSS Regions] Scrollable regions</a>
+ <p class="normalText">This test passes if the <span style="color:red">region</span> properly scrolls its <span style="color:green">content</span>.</p>
+
+ <div id="region">
+ <div id="container">
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum, sapien vitae faucibus suscipit, massa urna sagittis libero, ac imperdiet elit lacus a ligula. Mauris a orci sem. Nullam ullamcorper ornare porttitor. Morbi laoreet pellentesque diam, vitae hendrerit sem fringilla id. Maecenas rutrum lacinia lobortis. Praesent elit lectus, porttitor sed semper vel, fringilla id dolor. Sed lacus nisl, rutrum sit amet euismod a, vulputate quis elit. Fusce commodo dui quis lacus viverra vel egestas velit tempus. Donec ut sapien sit amet purus luctus fermentum. Donec eleifend pretium neque quis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam congue dapibus mi, id ultricies est sagittis et. Integer posuere, eros vitae laoreet congue, tortor purus euismod nibh, eu porta purus arcu id turpis. Donec vitae ultricies nibh. Nullam in urna dolor, at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+ <div style="color:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum, sapien vitae faucibus suscipit, massa urna sagittis libero, ac imperdiet elit lacus a ligula. Mauris a orci sem. Nullam ullamcorper ornare porttitor. Morbi laoreet pellentesque diam, vitae hendrerit sem fringilla id. Maecenas rutrum lacinia lobortis. Praesent elit lectus, porttitor sed semper vel, fringilla id dolor. Sed lacus nisl, rutrum sit amet euismod a, vulputate quis elit. Fusce commodo dui quis lacus viverra vel egestas velit tempus. Donec ut sapien sit amet purus luctus fermentum. Donec eleifend pretium neque quis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam congue dapibus mi, id ultricies est sagittis et. Integer posuere, eros vitae laoreet congue, tortor purus euismod nibh, eu porta purus arcu id turpis. Donec vitae ultricies nibh. Nullam in urna dolor, at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+ </div>
+ </div>
+ </body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionsscrollablesingleregionlrhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/scrollable-single-region-lr.html (0 => 165130)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/scrollable-single-region-lr.html (rev 0)
+++ trunk/LayoutTests/fast/regions/scrollable-single-region-lr.html 2014-03-05 22:02:55 UTC (rev 165130)
</span><span class="lines">@@ -0,0 +1,51 @@
</span><ins>+<!DOCTYPE html>
+<html style="font: 16px/1.25 monospace; font-family: Ahem">
+ <head>
+ <script>
+ function testScroll()
+ {
+ var region = document.getElementById("region");
+ region.scrollLeft += 350;
+ }
+ </script>
+
+ <style>
+ html {
+ -webkit-writing-mode: vertical-lr;
+ }
+
+ #container {
+ border: thick solid green;
+ width: 600px;
+ -webkit-flow-into: flow;
+ }
+
+ #region {
+ width: 300px;
+ height: 400px;
+ -webkit-flow-from: flow;
+ border: 2px solid red;
+ margin: 10px;
+ padding: 35px;
+ padding-right: 45px;
+ overflow: scroll;
+ }
+
+ .normalText {
+ font-family: Arial;
+ }
+ </style>
+ </head>
+
+ <body onload="testScroll()">
+ <a class="normalText" href="https://bugs.webkit.org/show_bug.cgi?id=129301">[CSS Regions] Scrollable regions</a>
+ <p class="normalText">This test passes if the <span style="color:red">region</span> properly scrolls its <span style="color:green">content</span>.</p>
+
+ <div id="region"></div>
+
+ <div id="container">
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum, sapien vitae faucibus suscipit, massa urna sagittis libero, ac imperdiet elit lacus a ligula. Mauris a orci sem. Nullam ullamcorper ornare porttitor. Morbi laoreet pellentesque diam, vitae hendrerit sem fringilla id. Maecenas rutrum lacinia lobortis. Praesent elit lectus, porttitor sed semper vel, fringilla id dolor. Sed lacus nisl, rutrum sit amet euismod a, vulputate quis elit. Fusce commodo dui quis lacus viverra vel egestas velit tempus. Donec ut sapien sit amet purus luctus fermentum. Donec eleifend pretium neque quis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam congue dapibus mi, id ultricies est sagittis et. Integer posuere, eros vitae laoreet congue, tortor purus euismod nibh, eu porta purus arcu id turpis. Donec vitae ultricies nibh. Nullam in urna dolor, at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+ <div style="color:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum, sapien vitae faucibus suscipit, massa urna sagittis libero, ac imperdiet elit lacus a ligula. Mauris a orci sem. Nullam ullamcorper ornare porttitor. Morbi laoreet pellentesque diam, vitae hendrerit sem fringilla id. Maecenas rutrum lacinia lobortis. Praesent elit lectus, porttitor sed semper vel, fringilla id dolor. Sed lacus nisl, rutrum sit amet euismod a, vulputate quis elit. Fusce commodo dui quis lacus viverra vel egestas velit tempus. Donec ut sapien sit amet purus luctus fermentum. Donec eleifend pretium neque quis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam congue dapibus mi, id ultricies est sagittis et. Integer posuere, eros vitae laoreet congue, tortor purus euismod nibh, eu porta purus arcu id turpis. Donec vitae ultricies nibh. Nullam in urna dolor, at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+ </div>
+ </body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionsscrollablesingleregionrelativeelementexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/scrollable-single-region-relative-element-expected.html (0 => 165130)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/scrollable-single-region-relative-element-expected.html (rev 0)
+++ trunk/LayoutTests/fast/regions/scrollable-single-region-relative-element-expected.html 2014-03-05 22:02:55 UTC (rev 165130)
</span><span class="lines">@@ -0,0 +1,43 @@
</span><ins>+<!DOCTYPE html>
+<html style="font: 16px/1.25 monospace;">
+ <head>
+ <script>
+ function testScroll()
+ {
+ var region = document.getElementById("region");
+ region.scrollTop += 120;
+ }
+ </script>
+
+ <style>
+ #container {
+ border: thick solid green;
+ height: 150px;
+ position: relative;
+ left: -5px;
+ }
+
+ #region {
+ width: 600px;
+ height: 100px;
+ border: 2px solid red;
+ margin: 10px;
+ padding: 35px;
+ padding-right: 45px;
+ overflow: scroll;
+ }
+ </style>
+ </head>
+
+ <body onload="testScroll()">
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=129301">[CSS Regions] Scrollable regions</a>
+ <p>This test passes if the <span style="color:red">region</span> properly scrolls its <span style="color:green">relative-positioned content</span>.</p>
+
+ <div id="region">
+ <div id="container">
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum, sapien vitae faucibus suscipit, massa urna sagittis libero, ac imperdiet elit lacus a ligula. Mauris a orci sem. Nullam ullamcorper ornare porttitor. Morbi laoreet pellentesque diam, vitae hendrerit sem fringilla id. Maecenas rutrum lacinia lobortis. Praesent elit lectus, porttitor sed semper vel, fringilla id dolor. Sed lacus nisl, rutrum sit amet euismod a, vulputate quis elit. Fusce commodo dui quis lacus viverra vel egestas velit tempus. Donec ut sapien sit amet purus luctus fermentum. Donec eleifend pretium neque quis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam congue dapibus mi, id ultricies est sagittis et. Integer posuere, eros vitae laoreet congue, tortor purus euismod nibh, eu porta purus arcu id turpis. Donec vitae ultricies nibh. Nullam in urna dolor, at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+ <div style="color:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum, sapien vitae faucibus suscipit, massa urna sagittis libero, ac imperdiet elit lacus a ligula. Mauris a orci sem. Nullam ullamcorper ornare porttitor. Morbi laoreet pellentesque diam, vitae hendrerit sem fringilla id. Maecenas rutrum lacinia lobortis. Praesent elit lectus, porttitor sed semper vel, fringilla id dolor. Sed lacus nisl, rutrum sit amet euismod a, vulputate quis elit. Fusce commodo dui quis lacus viverra vel egestas velit tempus. Donec ut sapien sit amet purus luctus fermentum. Donec eleifend pretium neque quis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam congue dapibus mi, id ultricies est sagittis et. Integer posuere, eros vitae laoreet congue, tortor purus euismod nibh, eu porta purus arcu id turpis. Donec vitae ultricies nibh. Nullam in urna dolor, at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+ </div>
+ </div>
+ </body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionsscrollablesingleregionrelativeelementhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/scrollable-single-region-relative-element.html (0 => 165130)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/scrollable-single-region-relative-element.html (rev 0)
+++ trunk/LayoutTests/fast/regions/scrollable-single-region-relative-element.html 2014-03-05 22:02:55 UTC (rev 165130)
</span><span class="lines">@@ -0,0 +1,45 @@
</span><ins>+<!DOCTYPE html>
+<html style="font: 16px/1.25 monospace;">
+ <head>
+ <script>
+ function testScroll()
+ {
+ var region = document.getElementById("region");
+ region.scrollTop += 120;
+ }
+ </script>
+
+ <style>
+ #container {
+ border: thick solid green;
+ height: 150px;
+ -webkit-flow-into: flow;
+ position: relative;
+ left: -5px;
+ }
+
+ #region {
+ width: 600px;
+ height: 100px;
+ -webkit-flow-from: flow;
+ border: 2px solid red;
+ margin: 10px;
+ padding: 35px;
+ padding-right: 45px;
+ overflow: scroll;
+ }
+ </style>
+ </head>
+
+ <body onload="testScroll()">
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=129301">[CSS Regions] Scrollable regions</a>
+ <p>This test passes if the <span style="color:red">region</span> properly scrolls its <span style="color:green">relative-positioned content</span>.</p>
+
+ <div id="region"></div>
+
+ <div id="container">
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum, sapien vitae faucibus suscipit, massa urna sagittis libero, ac imperdiet elit lacus a ligula. Mauris a orci sem. Nullam ullamcorper ornare porttitor. Morbi laoreet pellentesque diam, vitae hendrerit sem fringilla id. Maecenas rutrum lacinia lobortis. Praesent elit lectus, porttitor sed semper vel, fringilla id dolor. Sed lacus nisl, rutrum sit amet euismod a, vulputate quis elit. Fusce commodo dui quis lacus viverra vel egestas velit tempus. Donec ut sapien sit amet purus luctus fermentum. Donec eleifend pretium neque quis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam congue dapibus mi, id ultricies est sagittis et. Integer posuere, eros vitae laoreet congue, tortor purus euismod nibh, eu porta purus arcu id turpis. Donec vitae ultricies nibh. Nullam in urna dolor, at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+ <div style="color:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum, sapien vitae faucibus suscipit, massa urna sagittis libero, ac imperdiet elit lacus a ligula. Mauris a orci sem. Nullam ullamcorper ornare porttitor. Morbi laoreet pellentesque diam, vitae hendrerit sem fringilla id. Maecenas rutrum lacinia lobortis. Praesent elit lectus, porttitor sed semper vel, fringilla id dolor. Sed lacus nisl, rutrum sit amet euismod a, vulputate quis elit. Fusce commodo dui quis lacus viverra vel egestas velit tempus. Donec ut sapien sit amet purus luctus fermentum. Donec eleifend pretium neque quis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam congue dapibus mi, id ultricies est sagittis et. Integer posuere, eros vitae laoreet congue, tortor purus euismod nibh, eu porta purus arcu id turpis. Donec vitae ultricies nibh. Nullam in urna dolor, at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+ </div>
+ </body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionsscrollablesingleregionrlexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/scrollable-single-region-rl-expected.html (0 => 165130)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/scrollable-single-region-rl-expected.html (rev 0)
+++ trunk/LayoutTests/fast/regions/scrollable-single-region-rl-expected.html 2014-03-05 22:02:55 UTC (rev 165130)
</span><span class="lines">@@ -0,0 +1,49 @@
</span><ins>+<!DOCTYPE html>
+<html style="font: 16px/1.25 monospace; font-family: Ahem">
+ <head>
+ <script>
+ function testScroll()
+ {
+ var region = document.getElementById("region");
+ region.scrollLeft -= 350;
+ }
+ </script>
+
+ <style>
+ html {
+ -webkit-writing-mode: vertical-rl;
+ }
+
+ #container {
+ border: thick solid green;
+ width: 600px;
+ }
+
+ #region {
+ width: 300px;
+ height: 400px;
+ border: 2px solid red;
+ margin: 10px;
+ padding: 35px;
+ padding-right: 45px;
+ overflow-x: scroll;
+ }
+
+ .normalText {
+ font-family: Arial;
+ }
+ </style>
+ </head>
+
+ <body onload="testScroll()">
+ <a class="normalText" href="https://bugs.webkit.org/show_bug.cgi?id=129301">[CSS Regions] Scrollable regions</a>
+ <p class="normalText">This test passes if the <span style="color:red">region</span> properly scrolls its <span style="color:green">content</span>.</p>
+
+ <div id="region">
+ <div id="container">
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum, sapien vitae faucibus suscipit, massa urna sagittis libero, ac imperdiet elit lacus a ligula. Mauris a orci sem. Nullam ullamcorper ornare porttitor. Morbi laoreet pellentesque diam, vitae hendrerit sem fringilla id. Maecenas rutrum lacinia lobortis. Praesent elit lectus, porttitor sed semper vel, fringilla id dolor. Sed lacus nisl, rutrum sit amet euismod a, vulputate quis elit. Fusce commodo dui quis lacus viverra vel egestas velit tempus. Donec ut sapien sit amet purus luctus fermentum. Donec eleifend pretium neque quis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam congue dapibus mi, id ultricies est sagittis et. Integer posuere, eros vitae laoreet congue, tortor purus euismod nibh, eu porta purus arcu id turpis. Donec vitae ultricies nibh. Nullam in urna dolor, at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+ <div style="color:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum, sapien vitae faucibus suscipit, massa urna sagittis libero, ac imperdiet elit lacus a ligula. Mauris a orci sem. Nullam ullamcorper ornare porttitor. Morbi laoreet pellentesque diam, vitae hendrerit sem fringilla id. Maecenas rutrum lacinia lobortis. Praesent elit lectus, porttitor sed semper vel, fringilla id dolor. Sed lacus nisl, rutrum sit amet euismod a, vulputate quis elit. Fusce commodo dui quis lacus viverra vel egestas velit tempus. Donec ut sapien sit amet purus luctus fermentum. Donec eleifend pretium neque quis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam congue dapibus mi, id ultricies est sagittis et. Integer posuere, eros vitae laoreet congue, tortor purus euismod nibh, eu porta purus arcu id turpis. Donec vitae ultricies nibh. Nullam in urna dolor, at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+ </div>
+ </div>
+ </body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionsscrollablesingleregionrlhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/scrollable-single-region-rl.html (0 => 165130)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/scrollable-single-region-rl.html (rev 0)
+++ trunk/LayoutTests/fast/regions/scrollable-single-region-rl.html 2014-03-05 22:02:55 UTC (rev 165130)
</span><span class="lines">@@ -0,0 +1,51 @@
</span><ins>+<!DOCTYPE html>
+<html style="font: 16px/1.25 monospace; font-family: Ahem">
+ <head>
+ <script>
+ function testScroll()
+ {
+ var region = document.getElementById("region");
+ region.scrollLeft -= 350;
+ }
+ </script>
+
+ <style>
+ html {
+ -webkit-writing-mode: vertical-rl;
+ }
+
+ #container {
+ border: thick solid green;
+ width: 600px;
+ -webkit-flow-into: flow;
+ }
+
+ #region {
+ width: 300px;
+ height: 400px;
+ -webkit-flow-from: flow;
+ border: 2px solid red;
+ margin: 10px;
+ padding: 35px;
+ padding-right: 45px;
+ overflow-x: scroll;
+ }
+
+ .normalText {
+ font-family: Arial;
+ }
+ </style>
+ </head>
+
+ <body onload="testScroll()">
+ <a class="normalText" href="https://bugs.webkit.org/show_bug.cgi?id=129301">[CSS Regions] Scrollable regions</a>
+ <p class="normalText">This test passes if the <span style="color:red">region</span> properly scrolls its <span style="color:green">content</span>.</p>
+
+ <div id="region"></div>
+
+ <div id="container">
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum, sapien vitae faucibus suscipit, massa urna sagittis libero, ac imperdiet elit lacus a ligula. Mauris a orci sem. Nullam ullamcorper ornare porttitor. Morbi laoreet pellentesque diam, vitae hendrerit sem fringilla id. Maecenas rutrum lacinia lobortis. Praesent elit lectus, porttitor sed semper vel, fringilla id dolor. Sed lacus nisl, rutrum sit amet euismod a, vulputate quis elit. Fusce commodo dui quis lacus viverra vel egestas velit tempus. Donec ut sapien sit amet purus luctus fermentum. Donec eleifend pretium neque quis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam congue dapibus mi, id ultricies est sagittis et. Integer posuere, eros vitae laoreet congue, tortor purus euismod nibh, eu porta purus arcu id turpis. Donec vitae ultricies nibh. Nullam in urna dolor, at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+ <div style="color:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum, sapien vitae faucibus suscipit, massa urna sagittis libero, ac imperdiet elit lacus a ligula. Mauris a orci sem. Nullam ullamcorper ornare porttitor. Morbi laoreet pellentesque diam, vitae hendrerit sem fringilla id. Maecenas rutrum lacinia lobortis. Praesent elit lectus, porttitor sed semper vel, fringilla id dolor. Sed lacus nisl, rutrum sit amet euismod a, vulputate quis elit. Fusce commodo dui quis lacus viverra vel egestas velit tempus. Donec ut sapien sit amet purus luctus fermentum. Donec eleifend pretium neque quis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam congue dapibus mi, id ultricies est sagittis et. Integer posuere, eros vitae laoreet congue, tortor purus euismod nibh, eu porta purus arcu id turpis. Donec vitae ultricies nibh. Nullam in urna dolor, at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+ </div>
+ </body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionsscrollablesingleregionhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/scrollable-single-region.html (0 => 165130)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/scrollable-single-region.html (rev 0)
+++ trunk/LayoutTests/fast/regions/scrollable-single-region.html 2014-03-05 22:02:55 UTC (rev 165130)
</span><span class="lines">@@ -0,0 +1,44 @@
</span><ins>+<!DOCTYPE html>
+<html style="font: 16px/1.25 monospace;">
+ <head>
+ <script>
+ function testScroll()
+ {
+ var region = document.getElementById("region");
+ region.scrollTop += 120;
+ }
+ </script>
+
+ <style>
+ #container {
+ border: thick solid green;
+ height: 150px;
+ overflow: visible;
+ -webkit-flow-into: flow;
+ }
+
+ #region {
+ width: 600px;
+ height: 100px;
+ -webkit-flow-from: flow;
+ border: 2px solid red;
+ margin: 10px;
+ padding: 35px;
+ padding-right: 45px;
+ overflow: scroll;
+ }
+ </style>
+ </head>
+
+ <body onload="testScroll()">
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=129301">[CSS Regions] Scrollable regions</a>
+ <p>This test passes if the <span style="color:red">region</span> properly scrolls its content.</p>
+
+ <div id="region"></div>
+
+ <div id="container">
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum, sapien vitae faucibus suscipit, massa urna sagittis libero, ac imperdiet elit lacus a ligula. Mauris a orci sem. Nullam ullamcorper ornare porttitor. Morbi laoreet pellentesque diam, vitae hendrerit sem fringilla id. Maecenas rutrum lacinia lobortis. Praesent elit lectus, porttitor sed semper vel, fringilla id dolor. Sed lacus nisl, rutrum sit amet euismod a, vulputate quis elit. Fusce commodo dui quis lacus viverra vel egestas velit tempus. Donec ut sapien sit amet purus luctus fermentum. Donec eleifend pretium neque quis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam congue dapibus mi, id ultricies est sagittis et. Integer posuere, eros vitae laoreet congue, tortor purus euismod nibh, eu porta purus arcu id turpis. Donec vitae ultricies nibh. Nullam in urna dolor, at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+ <div style="color:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum, sapien vitae faucibus suscipit, massa urna sagittis libero, ac imperdiet elit lacus a ligula. Mauris a orci sem. Nullam ullamcorper ornare porttitor. Morbi laoreet pellentesque diam, vitae hendrerit sem fringilla id. Maecenas rutrum lacinia lobortis. Praesent elit lectus, porttitor sed semper vel, fringilla id dolor. Sed lacus nisl, rutrum sit amet euismod a, vulputate quis elit. Fusce commodo dui quis lacus viverra vel egestas velit tempus. Donec ut sapien sit amet purus luctus fermentum. Donec eleifend pretium neque quis bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam congue dapibus mi, id ultricies est sagittis et. Integer posuere, eros vitae laoreet congue, tortor purus euismod nibh, eu porta purus arcu id turpis. Donec vitae ultricies nibh. Nullam in urna dolor, at fringilla lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+ </div>
+ </body>
+</html>
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (165129 => 165130)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2014-03-05 22:01:57 UTC (rev 165129)
+++ trunk/Source/WebCore/ChangeLog 2014-03-05 22:02:55 UTC (rev 165130)
</span><span class="lines">@@ -1,3 +1,37 @@
</span><ins>+2014-03-05 Radu Stavila <stavila@adobe.com>
+
+ [CSS Regions] Scrollable regions
+ https://bugs.webkit.org/show_bug.cgi?id=129301
+
+ Reviewed by David Hyatt.
+
+ Named flow fragments do not inherit the overflow property from the fragment container.
+ When asked if the flow thread content should be clipped, the named flow fragments
+ will respond using the overflow property of the named flow fragment container.
+
+ When painting the flow thread layer inside the region, the scrolled content offset of
+ the region must be used to offset the flow thread's layer.
+
+ Tests: fast/regions/scrollable-last-region.html
+ fast/regions/scrollable-single-region-bt.html
+ fast/regions/scrollable-single-region-lr.html
+ fast/regions/scrollable-single-region-relative-element.html
+ fast/regions/scrollable-single-region-rl.html
+ fast/regions/scrollable-single-region.html
+
+ * rendering/RenderLayer.cpp:
+ (WebCore::RenderLayer::mapLayerClipRectsToFragmentationLayer):
+ (WebCore::RenderLayer::calculateClipRects):
+ * rendering/RenderNamedFlowFragment.cpp:
+ (WebCore::RenderNamedFlowFragment::createStyle):
+ (WebCore::RenderNamedFlowFragment::shouldClipFlowThreadContent):
+ * rendering/RenderNamedFlowFragment.h:
+ * rendering/RenderNamedFlowThread.cpp:
+ (WebCore::RenderNamedFlowThread::decorationsClipRectForBoxInNamedFlowFragment):
+ * rendering/RenderRegion.cpp:
+ (WebCore::RenderRegion::shouldClipFlowThreadContent):
+ * rendering/RenderRegion.h:
+
</ins><span class="cx"> 2014-03-05 Zalan Bujtas <zalan@apple.com>
</span><span class="cx">
</span><span class="cx"> Subpixel rendering: Device pixel round accumulated subpixel value when the RenderLayer with transform paints its content.
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderLayercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderLayer.cpp (165129 => 165130)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderLayer.cpp 2014-03-05 22:01:57 UTC (rev 165129)
+++ trunk/Source/WebCore/rendering/RenderLayer.cpp 2014-03-05 22:02:55 UTC (rev 165130)
</span><span class="lines">@@ -5290,7 +5290,8 @@
</span><span class="cx">
</span><span class="cx"> LayoutPoint portionLocation = flowThreadPortionRect.location();
</span><span class="cx"> LayoutRect regionContentBox = namedFlowFragment->fragmentContainer().contentBoxRect();
</span><del>- LayoutSize moveOffset = portionLocation - regionContentBox.location();
</del><ins>+ IntSize scrolledContentOffset = namedFlowFragment->fragmentContainer().hasOverflowClip() ? namedFlowFragment->fragmentContainer().scrolledContentOffset() : IntSize();
+ LayoutSize moveOffset = portionLocation - regionContentBox.location() + scrolledContentOffset;
</ins><span class="cx">
</span><span class="cx"> ClipRect newOverflowClipRect = clipRects.overflowClipRect();
</span><span class="cx"> newOverflowClipRect.move(moveOffset);
</span><span class="lines">@@ -6786,6 +6787,9 @@
</span><span class="cx"> {
</span><span class="cx"> LayoutRect regionContentBox = toRenderBox(region->layerOwner()).contentBoxRect();
</span><span class="cx"> LayoutSize moveOffset = region->flowThreadPortionLocation() - (paintOffset + regionContentBox.location());
</span><ins>+ if (region->fragmentContainer().hasOverflowClip())
+ moveOffset += region->fragmentContainer().scrolledContentOffset();
+
</ins><span class="cx"> IntPoint adjustedPaintOffset = roundedIntPoint(-moveOffset);
</span><span class="cx"> paintDirtyRect.move(moveOffset);
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderNamedFlowFragmentcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderNamedFlowFragment.cpp (165129 => 165130)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderNamedFlowFragment.cpp 2014-03-05 22:01:57 UTC (rev 165129)
+++ trunk/Source/WebCore/rendering/RenderNamedFlowFragment.cpp 2014-03-05 22:02:55 UTC (rev 165130)
</span><span class="lines">@@ -62,8 +62,6 @@
</span><span class="cx"> style.get().setFlowThread(parentStyle.flowThread());
</span><span class="cx"> style.get().setRegionThread(parentStyle.regionThread());
</span><span class="cx"> style.get().setRegionFragment(parentStyle.regionFragment());
</span><del>- style.get().setOverflowX(parentStyle.overflowX());
- style.get().setOverflowY(parentStyle.overflowY());
</del><span class="cx"> #if ENABLE(CSS_SHAPES) && ENABLE(CSS_SHAPE_INSIDE)
</span><span class="cx"> style.get().setShapeInside(parentStyle.shapeInside());
</span><span class="cx"> #endif
</span><span class="lines">@@ -247,6 +245,14 @@
</span><span class="cx"> return *fragmentContainer().layer();
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+bool RenderNamedFlowFragment::shouldClipFlowThreadContent() const
+{
+ if (fragmentContainer().hasOverflowClip())
+ return true;
+
+ return isLastRegion() && (style().regionFragment() == BreakRegionFragment);
+}
+
</ins><span class="cx"> void RenderNamedFlowFragment::layoutBlock(bool relayoutChildren, LayoutUnit)
</span><span class="cx"> {
</span><span class="cx"> StackStats::LayoutCheckPoint layoutCheckPoint;
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderNamedFlowFragmenth"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderNamedFlowFragment.h (165129 => 165130)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderNamedFlowFragment.h 2014-03-05 22:01:57 UTC (rev 165129)
+++ trunk/Source/WebCore/rendering/RenderNamedFlowFragment.h 2014-03-05 22:02:55 UTC (rev 165130)
</span><span class="lines">@@ -66,6 +66,8 @@
</span><span class="cx">
</span><span class="cx"> RenderBlockFlow& fragmentContainer() const;
</span><span class="cx"> RenderLayer& fragmentContainerLayer() const;
</span><ins>+
+ virtual bool shouldClipFlowThreadContent() const override;
</ins><span class="cx">
</span><span class="cx"> bool isPseudoElementRegion() const { return parent() && parent()->isPseudoElement(); }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderNamedFlowThreadcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderNamedFlowThread.cpp (165129 => 165130)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderNamedFlowThread.cpp 2014-03-05 22:01:57 UTC (rev 165129)
+++ trunk/Source/WebCore/rendering/RenderNamedFlowThread.cpp 2014-03-05 22:02:55 UTC (rev 165130)
</span><span class="lines">@@ -298,6 +298,17 @@
</span><span class="cx"> // Now flip it again.
</span><span class="cx"> flipForWritingModeLocalCoordinates(visualOverflowRect);
</span><span class="cx">
</span><ins>+ // Take the scrolled offset of the region into consideration.
+ RenderBlockFlow& fragmentContainer = fragment.fragmentContainer();
+ if (fragmentContainer.hasOverflowClip()) {
+ IntSize scrolledContentOffset = fragmentContainer.scrolledContentOffset();
+ if (style().isFlippedBlocksWritingMode())
+ scrolledContentOffset = -scrolledContentOffset;
+
+ visualOverflowRect.inflateX(scrolledContentOffset.width());
+ visualOverflowRect.inflateY(scrolledContentOffset.height());
+ }
+
</ins><span class="cx"> // Layers are in physical coordinates so the origin must be moved to the physical top-left of the flowthread.
</span><span class="cx"> if (style().isFlippedBlocksWritingMode()) {
</span><span class="cx"> if (style().isHorizontalWritingMode())
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderRegioncpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderRegion.cpp (165129 => 165130)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderRegion.cpp 2014-03-05 22:01:57 UTC (rev 165129)
+++ trunk/Source/WebCore/rendering/RenderRegion.cpp 2014-03-05 22:02:55 UTC (rev 165130)
</span><span class="lines">@@ -202,11 +202,7 @@
</span><span class="cx">
</span><span class="cx"> bool RenderRegion::shouldClipFlowThreadContent() const
</span><span class="cx"> {
</span><del>- if (hasOverflowClip())
- return true;
-
- // regionFragment is CSSRegions specific therefore we take it into account only in these cases.
- return isRenderNamedFlowFragment() ? isLastRegion() && style().regionFragment() == BreakRegionFragment : false;
</del><ins>+ return hasOverflowClip();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> void RenderRegion::styleDidChange(StyleDifference diff, const RenderStyle* oldStyle)
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderRegionh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderRegion.h (165129 => 165130)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderRegion.h 2014-03-05 22:01:57 UTC (rev 165129)
+++ trunk/Source/WebCore/rendering/RenderRegion.h 2014-03-05 22:02:55 UTC (rev 165130)
</span><span class="lines">@@ -77,7 +77,7 @@
</span><span class="cx">
</span><span class="cx"> bool isFirstRegion() const;
</span><span class="cx"> bool isLastRegion() const;
</span><del>- bool shouldClipFlowThreadContent() const;
</del><ins>+ virtual bool shouldClipFlowThreadContent() const;
</ins><span class="cx">
</span><span class="cx"> // These methods represent the width and height of a "page" and for a RenderRegion they are just the
</span><span class="cx"> // content width and content height of a region. For RenderRegionSets, however, they will be the width and
</span></span></pre>
</div>
</div>
</body>
</html>