Implement the :focus pseudo-class selector

Fixes #5460. This supports for simple focusable elements that are their own
DOM anchors, like text `input` fields.

components/layout/wrapper.rs

@@ -581,6 +581,14 @@ impl<'le> TElement<'le> for LayoutElement<'le> {
         }
     }
 
+    #[inline]
+    fn get_focus_state(self) -> bool {
+        unsafe {
+            let node: &Node = NodeCast::from_actual(self.element);
+            node.get_focus_state_for_layout()
+        }
+    }
+
     #[inline]
     fn get_id(self) -> Option<Atom> {
         unsafe {

components/script/dom/document.rs

@@ -454,7 +454,20 @@ impl<'a> DocumentHelpers<'a> for JSRef<'a, Document> {
     /// transaction, or none if no elements requested it.
     fn commit_focus_transaction(self) {
         //TODO: dispatch blur, focus, focusout, and focusin events
+
+        if let Some(ref elem) = self.focused.get().root() {
+            let node: JSRef<Node> = NodeCast::from_ref(elem.r());
+            node.set_focus_state(false);
+        }
+
         self.focused.assign(self.possibly_focused.get());
+
+        if let Some(ref elem) = self.focused.get().root() {
+            let node: JSRef<Node> = NodeCast::from_ref(elem.r());
+            node.set_focus_state(true);
+        }
+        // TODO: Update the focus state for all elements in the focus chain.
+        // https://html.spec.whatwg.org/multipage/interaction.html#focus-chain
     }
 
     /// Handles any updates when the document's title has changed.

components/script/dom/element.rs

@@ -1462,6 +1462,13 @@ impl<'a> style::node::TElement<'a> for JSRef<'a, Element> {
         let node: JSRef<Node> = NodeCast::from_ref(self);
         node.get_hover_state()
     }
+    fn get_focus_state(self) -> bool {
+        // TODO: Also check whether the top-level browsing context has the system focus,
+        // and whether this element is a browsing context container.
+        // https://html.spec.whatwg.org/multipage/scripting.html#selector-focus
+        let node: JSRef<Node> = NodeCast::from_ref(self);
+        node.get_focus_state()
+    }
     fn get_id(self) -> Option<Atom> {
         self.get_attribute(ns!(""), &atom!("id")).map(|attr| {
             let attr = attr.root();

components/script/dom/node.rs

@@ -152,6 +152,8 @@ bitflags! {
         #[doc = "Specifies whether or not there is an authentic click in progress on \
                  this element."]
         const CLICK_IN_PROGRESS = 0x100,
+        #[doc = "Specifies whether this node has the focus."]
+        const IN_FOCUS_STATE = 0x200,
     }
 }
 
@@ -440,6 +442,9 @@ pub trait NodeHelpers<'a> {
     fn get_hover_state(self) -> bool;
     fn set_hover_state(self, state: bool);
 
+    fn get_focus_state(self) -> bool;
+    fn set_focus_state(self, state: bool);
+
     fn get_disabled_state(self) -> bool;
     fn set_disabled_state(self, state: bool);
 
@@ -618,6 +623,14 @@ impl<'a> NodeHelpers<'a> for JSRef<'a, Node> {
         self.set_flag(IN_HOVER_STATE, state)
     }
 
+    fn get_focus_state(self) -> bool {
+        self.get_flag(IN_FOCUS_STATE)
+    }
+
+    fn set_focus_state(self, state: bool) {
+        self.set_flag(IN_FOCUS_STATE, state)
+    }
+
     fn get_disabled_state(self) -> bool {
         self.get_flag(IN_DISABLED_STATE)
     }
@@ -1036,6 +1049,8 @@ pub trait RawLayoutNodeHelpers {
     #[allow(unsafe_code)]
     unsafe fn get_hover_state_for_layout(&self) -> bool;
     #[allow(unsafe_code)]
+    unsafe fn get_focus_state_for_layout(&self) -> bool;
+    #[allow(unsafe_code)]
     unsafe fn get_disabled_state_for_layout(&self) -> bool;
     #[allow(unsafe_code)]
     unsafe fn get_enabled_state_for_layout(&self) -> bool;
@@ -1050,6 +1065,11 @@ impl RawLayoutNodeHelpers for Node {
     }
     #[inline]
     #[allow(unsafe_code)]
+    unsafe fn get_focus_state_for_layout(&self) -> bool {
+        self.flags.get().contains(IN_FOCUS_STATE)
+    }
+    #[inline]
+    #[allow(unsafe_code)]
     unsafe fn get_disabled_state_for_layout(&self) -> bool {
         self.flags.get().contains(IN_DISABLED_STATE)
     }

tests/ref/basic.list

@@ -102,6 +102,7 @@ flaky_cpu == append_style_a.html append_style_b.html
 == floated_generated_content_a.html floated_generated_content_b.html
 == floated_list_item_a.html floated_list_item_ref.html
 == floated_table_with_margin_a.html floated_table_with_margin_ref.html
+== focus_selector.html focus_selector_ref.html
 == font_advance.html font_advance_ref.html
 == font_size.html font_size_ref.html
 == font_style.html font_style_ref.html

tests/ref/focus_selector.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <style>
+      input:focus {
+        outline: 2px solid orange;
+      }
+    </style>
+  </head>
+  <body>
+    <input id="a">
+    <input id="b">
+    <script>
+      document.getElementById("a").focus();
+    </script>
+  </body>
+</html>

tests/ref/focus_selector_ref.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <style>
+      #a {
+        outline: 2px solid orange;
+      }
+    </style>
+  </head>
+  <body>
+    <input id="a">
+    <input id="b">
+  </body>
+</html>