layout: Implement the special `overflow` retargeting logic for the

`<body>` element per CSS 2.1 § 11.1.1. Part of a fix for Google.com search results.
servo · pcwalton · Oct 27, 2016 · Oct 27, 2016 · Oct 27, 2016 · Oct 27, 2016
commit ae4a3e6d8854d6be0ba5fec6becc929e53c7b446
diff --git a/components/layout/block.rs b/components/layout/block.rs
@@ -55,8 +55,8 @@ use sequential;
 use std::cmp::{max, min};
 use std::fmt;
 use std::sync::Arc;
-use style::computed_values::{border_collapse, box_sizing, display, float, overflow_x, overflow_y};
-use style::computed_values::{position, text_align};
+use style::computed_values::{_servo_overflow_target, border_collapse, box_sizing, display, float};
+use style::computed_values::{overflow_x, overflow_y, position, text_align};
 use style::context::{SharedStyleContext, StyleContext};
 use style::logical_geometry::{LogicalPoint, LogicalRect, LogicalSize, WritingMode};
 use style::properties::ServoComputedValues;
@@ -1691,6 +1691,16 @@ impl BlockFlow {
     }
 
     pub fn has_scrolling_overflow(&self) -> bool {
+        // If this fragment's overflow region targets the viewport, the overflow applies to the
+        // viewport rather than the fragment.
+        //
+        // FIXME(pcwalton): Right now, the display list builder doesn't actually apply this
+        // overflow to the viewport.
+        if self.fragment.style.get_box()._servo_overflow_target ==
+                _servo_overflow_target::T::viewport {
+            return false
+        }
+
         match (self.fragment.style().get_box().overflow_x,
                self.fragment.style().get_box().overflow_y.0) {
             (overflow_x::T::auto, _) | (overflow_x::T::scroll, _) |

diff --git a/components/style/properties/longhand/box.mako.rs b/components/style/properties/longhand/box.mako.rs
@@ -264,6 +264,15 @@ ${helpers.single_keyword("clear", "none left right both",
 
 // CSS 2.1, Section 11 - Visual effects
 
+// This is a special property used to implement the special <body> `overflow` behavior described in
+// CSS 2.1, Section 11.1.1.
+//
+// If `-servo-overflow-target` is `auto`, nothing special happens. If `-servo-overflow-target` is
+// `viewport`, then its `overflow-x`, `overflow-y`, and `overflow` properties affect the viewport
+// rather than the element itself (which is instead treated as though it had `overflow: visible`).
+${helpers.single_keyword("-servo-overflow-target", "auto viewport",
+                         products="servo", animatable=False, internal=True)}
+
 // Non-standard, see https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-clip-box#Specifications
 ${helpers.single_keyword("-servo-overflow-clip-box", "padding-box content-box",
                          products="servo", animatable=False, internal=True)}

diff --git a/resources/servo.css b/resources/servo.css
@@ -143,6 +143,14 @@ details {
   display: block;
 }
 
+/* CSS 2.1 § 11.1.1: When the root element is an HTML "HTML" element or an XHTML "html" element,
+ * and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents
+ * must instead apply the 'overflow' property from the first such child element to the viewport, if
+ * the value on the root element is 'visible'. */
+html:root > body:first-of-type {
+    -servo-overflow-target: viewport;
+}
+
 details::-servo-details-summary {
   margin-left: 40px;
   display: list-item;

diff --git a/tests/html/body_overflow_scroll.html b/tests/html/body_overflow_scroll.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<style>
+body {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 0;
+    overflow: scroll;
+}
+</style>
+<p>CSS 2.1 says:</p>
+<blockquote>UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'. The 'visible' value when used for the viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'.</blockquote>
+<p>Therefore, this page should be scrollable.</p>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque massa et lectus elementum cursus. Vivamus ac arcu elementum, pretium mi eget, efficitur magna. Nam imperdiet sit amet orci et ornare. Vivamus vitae fermentum felis. Nullam posuere nibh non enim vehicula consequat. Donec eget dapibus leo. Maecenas in bibendum ante, in pharetra diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum eget ante velit. Phasellus tincidunt vehicula mi, quis congue mi maximus ac. Curabitur ornare dui eu lorem placerat mattis. Cras vehicula ipsum eu lobortis porttitor. Curabitur sagittis risus eu tellus egestas hendrerit. Duis non eleifend nisi, ut interdum lacus.</p>
+<p>Aliquam tincidunt risus sit amet erat dapibus, eleifend venenatis neque sollicitudin. Vestibulum molestie sagittis dolor a tincidunt. Donec malesuada dui vitae sapien luctus, vitae condimentum ipsum malesuada. Maecenas eu sagittis urna, efficitur bibendum neque. Nam lectus magna, finibus eget accumsan id, pretium a ante. Quisque suscipit consectetur ante, sed vestibulum leo aliquet consequat. Sed consectetur nec velit quis rhoncus. In hac habitasse platea dictumst. Morbi aliquet tristique tincidunt. Cras ullamcorper nulla magna, ut fermentum ligula feugiat non.</p>
+<p>Curabitur ut pharetra lectus. Nullam vitae sollicitudin tortor, ut placerat elit. Mauris porta purus ut mi feugiat condimentum. Cras id dictum eros. Ut eu facilisis metus. Pellentesque ac semper est. Donec cursus dui ut fermentum pulvinar.</p>
+<p>Ut odio augue, rhoncus ut leo euismod, tincidunt interdum erat. Mauris ut urna ac massa aliquet auctor sit amet at ipsum. Maecenas elementum lorem non metus viverra, et rhoncus odio tincidunt. Nunc quam felis, mollis eget nisi eget, faucibus dictum elit. Praesent eget erat turpis. Maecenas dignissim fermentum ante, quis lobortis leo viverra id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam odio purus, tincidunt et placerat at, eleifend ut ligula. Sed pulvinar lobortis nunc, vitae finibus ex finibus faucibus. Cras sed tortor nec ligula sodales auctor in at arcu.</p>
+<p>Aenean semper, lectus scelerisque venenatis ornare, urna elit feugiat velit, at congue elit tortor vel ante. Sed pharetra elementum velit. Donec ut mi in quam aliquam efficitur. Nam enim neque, faucibus vitae urna sit amet, interdum posuere nibh. Etiam feugiat dolor lectus, in sollicitudin lorem mattis id. Nullam in dui a orci bibendum rhoncus. Morbi facilisis maximus ante quis bibendum. Aenean dui enim, varius eu rutrum id, semper vitae lorem. Cras facilisis ipsum urna, nec auctor felis malesuada at. Nunc tortor sem, eleifend at ornare sit amet, rhoncus in lacus. Morbi velit augue, posuere nec commodo non, vehicula in ipsum. Vestibulum rutrum tellus dolor, vitae sagittis justo tristique id. In vel nisl ac lectus tristique vestibulum. Cras lectus magna, dictum molestie lobortis eu, consectetur ac mi. Nullam nec sagittis metus.</p>
+<p>Sed ac ipsum hendrerit, elementum orci id, pharetra velit. Sed nec leo sapien. In dictum risus at viverra egestas. Cras eu turpis posuere, viverra eros et, dignissim sem. Pellentesque at dictum dui, ac luctus lectus. Mauris eu iaculis quam. Vivamus in velit ut sem fringilla maximus. Sed ut porta dolor, nec dapibus ligula. Praesent id lectus vel tortor scelerisque pulvinar eget at est. Donec fermentum quam et orci maximus, rhoncus facilisis mauris blandit.</p>
+<p>Sed ut erat purus. Quisque mauris lectus, consequat non orci sit amet, tempor porta dolor. Fusce bibendum luctus lectus nec porttitor. Sed est diam, dapibus eu justo eget, efficitur venenatis justo. Nam at tortor sit amet tellus aliquet molestie et quis augue. Praesent ultricies mattis tortor, in tristique odio convallis ac. Vestibulum nec mauris sed sem convallis dapibus. Integer erat tellus, convallis tincidunt ipsum vel, tincidunt tempus nunc. Proin elementum odio venenatis risus pharetra eleifend.</p>
+<p>Vivamus pulvinar, magna non bibendum tempor, erat libero vulputate sapien, id euismod urna neque sed mi. Vestibulum quis mattis purus, ac lobortis ipsum. Quisque a pulvinar magna, non mollis dui. Vestibulum suscipit convallis gravida. Vivamus quis tincidunt erat, ac rhoncus nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc ipsum purus, malesuada in mollis pharetra, bibendum eget turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam fermentum condimentum rhoncus. Ut luctus justo sit amet ex sollicitudin interdum. Maecenas non fermentum arcu. Quisque hendrerit augue ac interdum placerat.</p>
+<p>In hac habitasse platea dictumst. Donec quis ligula nunc. Sed varius consectetur tincidunt. Aenean orci massa, vehicula eu hendrerit pellentesque, blandit non lacus. Pellentesque ullamcorper convallis orci, at interdum felis eleifend sed. Mauris justo purus, feugiat quis porttitor vel, tincidunt vehicula elit. Mauris ac porta justo, sed vulputate nisi. Aenean tincidunt congue leo, a tempus massa eleifend a. Donec tempus ligula a sapien cursus, in iaculis felis bibendum. Nullam efficitur auctor magna, a euismod justo posuere et. Proin et libero odio. Curabitur hendrerit nunc vitae turpis vulputate malesuada.</p>
+<p>Maecenas gravida, nulla at pretium viverra, nisl ante aliquam diam, quis viverra nulla dui a nisi. Ut dapibus lobortis dignissim. Aliquam mattis purus ac leo ultricies fermentum. Nunc finibus rutrum augue ac egestas. Pellentesque arcu velit, elementum id enim quis, aliquam fringilla metus. Nunc aliquet tempor dignissim. Quisque nunc ante, bibendum quis sapien et, interdum dictum mauris.</p>
+