servo: Merge #4530 - layout: Implement `pointer-events: none` per SVG 1.1 § 16.6 (from pcwalton:pointer-events); r=mbrubeck

SVG-only values are not yet supported.

r? @mbrubeck

Source-Repo: https://github.com/servo/servo
Source-Revision: a88e668091842dc77169b235a03b5264e65ebdc6

servo/components/gfx/display_list/mod.rs

@@ -39,10 +39,9 @@ use servo_util::range::Range;
 use servo_util::smallvec::{SmallVec, SmallVec8};
 use std::fmt;
 use std::slice::Items;
-use style::ComputedValues;
-use style::computed_values::border_style;
-use style::computed_values::cursor;
 use std::sync::Arc;
+use style::ComputedValues;
+use style::computed_values::{border_style, cursor, pointer_events};
 
 // It seems cleaner to have layout code not mention Azure directly, so let's just reexport this for
 // layout to use.
@@ -340,9 +339,9 @@ impl StackingContext {
         tile_subrect.translate(&-child_stacking_context.bounds.to_azure_rect().origin)
     }
 
-    /// Places all nodes containing the point of interest into `result`, topmost first. If
-    /// `topmost_only` is true, stops after placing one node into the list. `result` must be empty
-    /// upon entry to this function.
+    /// Places all nodes containing the point of interest into `result`, topmost first. Respects
+    /// the `pointer-events` CSS property If `topmost_only` is true, stops after placing one node
+    /// into the list. `result` must be empty upon entry to this function.
     pub fn hit_test(&self,
                     point: Point2D<Au>,
                     result: &mut Vec<DisplayItemMetadata>,
@@ -363,6 +362,10 @@ impl StackingContext {
                     // Can't possibly hit.
                     continue
                 }
+                if item.base().metadata.pointing.is_none() {
+                    // `pointer-events` is `none`. Ignore this item.
+                    continue
+                }
                 match *item {
                     DisplayItem::BorderClass(ref border) => {
                         // If the point is inside the border, it didn't hit the border!
@@ -632,8 +635,9 @@ impl ClippingRegion {
 pub struct DisplayItemMetadata {
     /// The DOM node from which this display item originated.
     pub node: OpaqueNode,
-    /// The value of the `cursor` property when the mouse hovers over this display item.
-    pub cursor: Cursor,
+    /// The value of the `cursor` property when the mouse hovers over this display item. If `None`,
+    /// this display item is ineligible for pointer events (`pointer-events: none`).
+    pub pointing: Option<Cursor>,
 }
 
 impl DisplayItemMetadata {
@@ -646,9 +650,10 @@ impl DisplayItemMetadata {
                -> DisplayItemMetadata {
         DisplayItemMetadata {
             node: node,
-            cursor: match style.get_pointing().cursor {
-                cursor::T::AutoCursor => default_cursor,
-                cursor::T::SpecifiedCursor(cursor) => cursor,
+            pointing: match (style.get_pointing().pointer_events, style.get_pointing().cursor) {
+                (pointer_events::T::none, _) => None,
+                (pointer_events::T::auto, cursor::T::AutoCursor) => Some(default_cursor),
+                (pointer_events::T::auto, cursor::T::SpecifiedCursor(cursor)) => Some(cursor),
             },
         }
     }

servo/components/layout/layout_task.rs

@@ -998,7 +998,7 @@ impl LayoutRPC for LayoutRPCImpl {
 
             // Compute the new cursor.
             let cursor = if !mouse_over_list.is_empty() {
-                mouse_over_list[0].cursor
+                mouse_over_list[0].pointing.unwrap()
             } else {
                 Cursor::DefaultCursor
             };

servo/components/style/properties/mod.rs.mako

@@ -1546,6 +1546,11 @@ pub mod longhands {
         }
     </%self:single_component_value>
 
+    // NB: `pointer-events: auto` (and use of `pointer-events` in anything that isn't SVG, in fact)
+    // is nonstandard, slated for CSS4-UI.
+    // TODO(pcwalton): SVG-only values.
+    ${single_keyword("pointer-events", "auto none")}
+
     // Box-shadow, etc.
     ${new_style_struct("Effects", is_inherited=False)}
 

servo/tests/html/pointer_events.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+#overlay {
+    width: 200px;
+    height: 150px;
+    background: green;
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+button {
+    position: relative;
+    top: 10px;
+    width: 150px;
+    height: 50px;
+    border: solid black 2px;
+    box-sizing: border-box;
+    font: Helvetica bold;
+    font-size: 18px;
+    text-align: center;
+    background: black;
+    color: white;
+}
+</style>
+</head>
+<body>
+<button id=button>Click me!</button>
+<div id=overlay></div>
+<script>
+document.getElementById('button').addEventListener('click', function() { alert("Ouch!"); });
+</script>
+</body>
+</html>
+