Issue 7720: Add target selector and update when scrolling to fragment

components/script/dom/document.rs

@@ -241,6 +241,8 @@ pub struct Document {
     referrer_policy: Cell<Option<ReferrerPolicy>>,
     /// https://html.spec.whatwg.org/multipage/#dom-document-referrer
     referrer: Option<String>,
+    /// https://html.spec.whatwg.org/multipage/#target-element
+    target_element: MutNullableHeap<JS<Element>>,
 }
 
 #[derive(JSTraceable, HeapSizeOf)]
@@ -1735,6 +1737,7 @@ impl Document {
             origin: origin,
             referrer: referrer,
             referrer_policy: Cell::new(referrer_policy),
+            target_element: MutNullableHeap::new(None),
         }
     }
 
@@ -1886,6 +1889,22 @@ impl Document {
     pub fn get_referrer_policy(&self) -> Option<ReferrerPolicy> {
         return self.referrer_policy.get();
     }
+
+    pub fn set_target_element(&self, node: Option<&Element>) {
+        if let Some(ref element) = self.target_element.get() {
+            element.set_target_state(false);
+        }
+
+        self.target_element.set(node);
+
+        if let Some(ref element) = self.target_element.get() {
+            element.set_target_state(true);
+        }
+
+        self.window.reflow(ReflowGoal::ForDisplay,
+                           ReflowQueryType::NoQuery,
+                           ReflowReason::ElementStateChanged);
+    }
 }
 
 

components/script/dom/element.rs

@@ -2324,7 +2324,8 @@ impl<'a> ::selectors::Element for Root<Element> {
             NonTSPseudoClass::Checked |
             NonTSPseudoClass::Indeterminate |
             NonTSPseudoClass::ReadWrite |
-            NonTSPseudoClass::PlaceholderShown =>
+            NonTSPseudoClass::PlaceholderShown |
+            NonTSPseudoClass::Target =>
                 Element::state(self).contains(pseudo_class.state_flag()),
         }
     }
@@ -2586,6 +2587,14 @@ impl Element {
             self.upcast::<Node>().dirty(NodeDamage::OtherNodeDamage);
         }
     }
+
+    pub fn target_state(&self) -> bool {
+        self.state.get().contains(IN_TARGET_STATE)
+    }
+
+    pub fn set_target_state(&self, value: bool) {
+       self.set_state(IN_TARGET_STATE, value)
+    }
 }
 
 impl Element {

components/script/layout_wrapper.rs

@@ -551,7 +551,8 @@ impl<'le> ::selectors::Element for ServoLayoutElement<'le> {
             NonTSPseudoClass::Checked |
             NonTSPseudoClass::Indeterminate |
             NonTSPseudoClass::ReadWrite |
-            NonTSPseudoClass::PlaceholderShown =>
+            NonTSPseudoClass::PlaceholderShown |
+            NonTSPseudoClass::Target =>
                 self.element.get_state_for_layout().contains(pseudo_class.state_flag())
         }
     }

components/script/script_thread.rs

@@ -1198,6 +1198,22 @@ impl ScriptThread {
         // https://html.spec.whatwg.org/multipage/#the-end step 7
         let handler = box DocumentProgressHandler::new(Trusted::new(doc));
         self.dom_manipulation_task_source.queue(handler, GlobalRef::Window(doc.window())).unwrap();
+
+        if let Some(fragment) = doc.url().fragment() {
+            self.check_and_scroll_fragment(fragment, pipeline, doc);
+        }
+    }
+
+    fn check_and_scroll_fragment(&self, fragment: &str, pipeline_id: PipelineId, doc: &Document) {
+        match doc.find_fragment_node(fragment) {
+            Some(ref node) => {
+                doc.set_target_element(Some(node.r()));
+                self.scroll_fragment_point(pipeline_id, node.r());
+            }
+            None => {
+                doc.set_target_element(None);
+            }
+        }
     }
 
     fn collect_reports(&self, reports_chan: ReportsChan) {
@@ -1996,7 +2012,7 @@ impl ScriptThread {
     /// The entry point for content to notify that a new load has been requested
     /// for the given pipeline (specifically the "navigate" algorithm).
     fn handle_navigate(&self, pipeline_id: PipelineId, subpage_id: Option<SubpageId>, load_data: LoadData) {
-        // Step 8.
+        // Step 7.
         {
             let nurl = &load_data.url;
             if let Some(fragment) = nurl.fragment() {
@@ -2007,12 +2023,7 @@ impl ScriptThread {
                 let url = document.url();
                 if &url[..Position::AfterQuery] == &nurl[..Position::AfterQuery] &&
                     load_data.method == Method::Get {
-                    match document.find_fragment_node(fragment) {
+                    self.check_and_scroll_fragment(fragment, pipeline_id, document.r());
-                        Some(ref node) => {
-                            self.scroll_fragment_point(pipeline_id, node.r());
-                        }
-                        None => {}
-                    }
                     return;
                 }
             }

components/style/element_state.rs

@@ -33,5 +33,7 @@ bitflags! {
         const IN_READ_WRITE_STATE = 0x80,
         #[doc = "https://html.spec.whatwg.org/multipage/#selector-placeholder-shown"]
         const IN_PLACEHOLDER_SHOWN_STATE = 0x0100,
+        #[doc = "https://html.spec.whatwg.org/multipage/#selector-target"]
+        const IN_TARGET_STATE = 0x0200,
     }
 }

components/style/servo_selector_impl.rs

@@ -66,6 +66,7 @@ pub enum NonTSPseudoClass {
     ReadWrite,
     ReadOnly,
     PlaceholderShown,
+    Target,
 }
 
 impl NonTSPseudoClass {
@@ -82,6 +83,7 @@ impl NonTSPseudoClass {
             Indeterminate => IN_INDETERMINATE_STATE,
             ReadOnly | ReadWrite => IN_READ_WRITE_STATE,
             PlaceholderShown => IN_PLACEHOLDER_SHOWN_STATE,
+            Target => IN_TARGET_STATE,
 
             AnyLink |
             Link |
@@ -117,6 +119,7 @@ impl SelectorImpl for ServoSelectorImpl {
             "read-write" => ReadWrite,
             "read-only" => ReadOnly,
             "placeholder-shown" => PlaceholderShown,
+            "target" => Target,
             "-servo-nonzero-border" => {
                 if !context.in_user_agent_stylesheet {
                     return Err(());

tests/html/test_target_pseudoselector.html

@@ -0,0 +1,51 @@
+<html>
+  <head>
+    <style>
+      .pass { color: green; }
+      .fail { color: red; }
+      :target { color: red; }
+      span:hover { color: green; }
+    </style>
+  </head>
+  <body>
+    <div>
+        <a href="#foo">Target Foo By Link</a>
+        <span id="clickme">Target Foo By JS</span>
+    </div>
+
+    <div>
+    	<button id="findme">Check for element with :target selector</button>
+    	<span id="result"></span>
+    </div>
+
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales leo in orci pulvinar, ut tincidunt ipsum vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis et vestibulum metus. Maecenas erat elit, ultrices eu gravida et, sollicitudin ac est. Sed in tellus ut tortor euismod aliquet non egestas metus. Sed pellentesque arcu ut lectus feugiat molestie. Fusce et justo non dui fermentum fermentum. Nunc nec ullamcorper urna. Morbi ultricies ornare arcu nec tincidunt. In sit amet risus lectus. Nam ac lacus urna. Phasellus semper eu enim quis rutrum. Suspendisse convallis orci vel nunc blandit, ut venenatis urna elementum. Curabitur a elit elementum sapien hendrerit laoreet eget in nunc. In vitae tempus neque.
+    Cras nec porta ipsum. Ut consectetur ut elit ac vestibulum. Suspendisse efficitur congue eros rutrum porta. Suspendisse sit amet tortor id massa varius ultrices. Integer ex nulla, tempus et malesuada sit amet, viverra vel tellus. Fusce dictum risus a sapien feugiat dignissim. Nullam iaculis suscipit ante varius semper. Curabitur ut ipsum mattis, ullamcorper leo a, vulputate arcu.
+    Fusce a gravida lectus, nec vestibulum enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam vitae lorem lorem. Maecenas interdum nunc nec ex vulputate, in efficitur purus tempus. Pellentesque lacinia consectetur arcu vel posuere. Suspendisse id mi congue, pellentesque elit eu, pharetra neque. Integer vel dignissim nisi. Nunc sagittis augue et rhoncus dignissim. Donec ut orci ac sapien egestas ultrices.
+    Aliquam accumsan auctor felis in rhoncus. Cras bibendum pharetra mollis. Donec rhoncus, orci quis varius rutrum, turpis arcu varius augue, pharetra cursus velit sem in nisl. Donec nec nisi quis tortor ultricies mollis eget in urna. Aliquam pellentesque felis ipsum, luctus luctus libero congue eget. In at orci ut magna luctus tristique et sit amet sem. Nam non posuere nisi. Ut ante tellus, accumsan eu ullamcorper egestas, pulvinar laoreet sapien. Nullam pulvinar at tellus et ullamcorper. Proin malesuada purus augue, id aliquet augue fringilla ut. Ut a rutrum libero. Vivamus semper faucibus purus, eu hendrerit velit vehicula a.
+    Aenean eu commodo lorem. Integer mollis vitae ipsum quis pretium. Nullam nec nisl quis erat dictum tincidunt venenatis sed est. Donec semper viverra tellus, pharetra faucibus arcu pellentesque a. Nullam faucibus efficitur pretium. Nullam risus diam, dictum vel ultricies a, interdum vel lacus. Nullam lacinia quam ac lectus imperdiet, non tincidunt ex pretium. Nullam pretium vehicula faucibus. Aliquam erat volutpat. Pellentesque tortor nisl, egestas a ante et, aliquam suscipit eros. Vestibulum porttitor sem lacus, ac vulputate dui venenatis et. Cras ultrices aliquam est, ac ultrices lorem semper et. Vivamus molestie orci quis justo condimentum tincidunt. Integer ornare pharetra ante tempus elementum. Ut vulputate eleifend dolor, ac sodales velit auctor sed.
+
+    <ul><li id="foo">hello</li></ul>
+    <script>
+      document.querySelector("ul").addEventListener("click", function() {
+        this.insertBefore(this.firstChild.cloneNode(true), this.firstChild);
+      });
+
+      document.querySelector("#clickme").addEventListener("click", function() {
+        window.location.href = "#foo"
+      });
+
+      var result = document.querySelector("#result");
+      document.querySelector("#findme").addEventListener("click", function() {
+        var target = document.querySelector(":target");
+        if (target) {
+            result.className = "pass";
+            result.textContent = ":target exists in document";
+        } else {
+            result.className = "fail";
+            result.textContent = ":target does not exist in document";
+        }
+      });
+
+    </script>
+  </body>
+</html>

tests/wpt/metadata/dom/nodes/Element-matches.html.ini

@@ -1,7 +1,5 @@
 [Element-matches.html]
   type: testharness
-  [In-document Element.matches: :target pseudo-class selector, matching the element referenced by the URL fragment identifier (with no refNodes): :target]
-    expected: FAIL
 
   [In-document Element.matches: :lang pseudo-class selector, matching inherited language (with no refNodes): #pseudo-lang-div1:lang(en)]
     expected: FAIL

tests/wpt/metadata/dom/nodes/ParentNode-querySelector-All-xht.xht.ini

@@ -6,12 +6,6 @@
   [Document.querySelector: Attribute whitespace-separated list selector, not matching class attribute with empty value: #attr-whitespace [class~=""\]]
     expected: FAIL
 
-  [Document.querySelectorAll: :target pseudo-class selector, matching the element referenced by the URL fragment identifier: :target]
-    expected: FAIL
-
-  [Document.querySelector: :target pseudo-class selector, matching the element referenced by the URL fragment identifier: :target]
-    expected: FAIL
-
   [Document.querySelectorAll: :lang pseudo-class selector, matching inherited language: #pseudo-lang-div1:lang(en)]
     expected: FAIL
 
@@ -66,12 +60,6 @@
   [Detached Element.querySelector: Attribute whitespace-separated list selector, not matching class attribute with empty value: #attr-whitespace [class~=""\]]
     expected: FAIL
 
-  [Detached Element.querySelectorAll: :target pseudo-class selector, matching the element referenced by the URL fragment identifier: :target]
-    expected: FAIL
-
-  [Detached Element.querySelector: :target pseudo-class selector, matching the element referenced by the URL fragment identifier: :target]
-    expected: FAIL
-
   [Detached Element.querySelectorAll: :lang pseudo-class selector, not matching element with no inherited language: #pseudo-lang-div1:lang(en)]
     expected: FAIL
 
@@ -126,12 +114,6 @@
   [Fragment.querySelector: Attribute whitespace-separated list selector, not matching class attribute with empty value: #attr-whitespace [class~=""\]]
     expected: FAIL
 
-  [Fragment.querySelectorAll: :target pseudo-class selector, matching the element referenced by the URL fragment identifier: :target]
-    expected: FAIL
-
-  [Fragment.querySelector: :target pseudo-class selector, matching the element referenced by the URL fragment identifier: :target]
-    expected: FAIL
-
   [Fragment.querySelectorAll: :lang pseudo-class selector, not matching element with no inherited language: #pseudo-lang-div1:lang(en)]
     expected: FAIL
 
@@ -186,12 +168,6 @@
   [In-document Element.querySelector: Attribute whitespace-separated list selector, not matching class attribute with empty value: #attr-whitespace [class~=""\]]
     expected: FAIL
 
-  [In-document Element.querySelectorAll: :target pseudo-class selector, matching the element referenced by the URL fragment identifier: :target]
-    expected: FAIL
-
-  [In-document Element.querySelector: :target pseudo-class selector, matching the element referenced by the URL fragment identifier: :target]
-    expected: FAIL
-
   [In-document Element.querySelectorAll: :lang pseudo-class selector, matching inherited language: #pseudo-lang-div1:lang(en)]
     expected: FAIL
 

tests/wpt/metadata/dom/nodes/ParentNode-querySelector-All.html.ini

@@ -6,12 +6,6 @@
   [Document.querySelector: Attribute whitespace-separated list selector, not matching class attribute with empty value: #attr-whitespace [class~=""\]]
     expected: FAIL
 
-  [Document.querySelectorAll: :target pseudo-class selector, matching the element referenced by the URL fragment identifier: :target]
-    expected: FAIL
-
-  [Document.querySelector: :target pseudo-class selector, matching the element referenced by the URL fragment identifier: :target]
-    expected: FAIL
-
   [Document.querySelectorAll: :lang pseudo-class selector, matching inherited language: #pseudo-lang-div1:lang(en)]
     expected: FAIL
 
@@ -66,12 +60,6 @@
   [Detached Element.querySelector: Attribute whitespace-separated list selector, not matching class attribute with empty value: #attr-whitespace [class~=""\]]
     expected: FAIL
 
-  [Detached Element.querySelectorAll: :target pseudo-class selector, matching the element referenced by the URL fragment identifier: :target]
-    expected: FAIL
-
-  [Detached Element.querySelector: :target pseudo-class selector, matching the element referenced by the URL fragment identifier: :target]
-    expected: FAIL
-
   [Detached Element.querySelectorAll: :lang pseudo-class selector, not matching element with no inherited language: #pseudo-lang-div1:lang(en)]
     expected: FAIL
 
@@ -126,12 +114,6 @@
   [Fragment.querySelector: Attribute whitespace-separated list selector, not matching class attribute with empty value: #attr-whitespace [class~=""\]]
     expected: FAIL
 
-  [Fragment.querySelectorAll: :target pseudo-class selector, matching the element referenced by the URL fragment identifier: :target]
-    expected: FAIL
-
-  [Fragment.querySelector: :target pseudo-class selector, matching the element referenced by the URL fragment identifier: :target]
-    expected: FAIL
-
   [Fragment.querySelectorAll: :lang pseudo-class selector, not matching element with no inherited language: #pseudo-lang-div1:lang(en)]
     expected: FAIL
 
@@ -186,12 +168,6 @@
   [In-document Element.querySelector: Attribute whitespace-separated list selector, not matching class attribute with empty value: #attr-whitespace [class~=""\]]
     expected: FAIL
 
-  [In-document Element.querySelectorAll: :target pseudo-class selector, matching the element referenced by the URL fragment identifier: :target]
-    expected: FAIL
-
-  [In-document Element.querySelector: :target pseudo-class selector, matching the element referenced by the URL fragment identifier: :target]
-    expected: FAIL
-
   [In-document Element.querySelectorAll: :lang pseudo-class selector, matching inherited language: #pseudo-lang-div1:lang(en)]
     expected: FAIL