From 5fe91c30cc0eb3b960ef1a256a302cf89996a273 Mon Sep 17 00:00:00 2001
From: Florian Bruhin <git@the-compiler.org>
Date: Tue, 12 Dec 2017 11:33:34 +0100
Subject: [PATCH] Fix :click-element with an ID containing non-alphanumeric
 characters

See #3201
---
 doc/changelog.asciidoc                  | 1 +
 qutebrowser/browser/webkit/webkittab.py | 5 +++++
 tests/end2end/data/click_element.html   | 1 +
 tests/end2end/features/misc.feature     | 5 +++++
 4 files changed, 12 insertions(+)

diff --git a/doc/changelog.asciidoc b/doc/changelog.asciidoc
index 72dc695dd..8095f1bd8 100644
--- a/doc/changelog.asciidoc
+++ b/doc/changelog.asciidoc
@@ -119,6 +119,7 @@ Fixed
 - Fixed crash when closing the tab an external editor was opened in.
 - When using `:search-next` before a search is finished, no warning about no
   results being found is shown anymore.
+- Fix :click-element with an ID containing non-alphanumeric characters.
 
 Deprecated
 ~~~~~~~~~~
diff --git a/qutebrowser/browser/webkit/webkittab.py b/qutebrowser/browser/webkit/webkittab.py
index 43bec3456..f16beb7fe 100644
--- a/qutebrowser/browser/webkit/webkittab.py
+++ b/qutebrowser/browser/webkit/webkittab.py
@@ -19,6 +19,7 @@
 
 """Wrapper over our (QtWebKit) WebView."""
 
+import re
 import functools
 import xml.etree.ElementTree
 
@@ -545,6 +546,10 @@ class WebKitElements(browsertab.AbstractElements):
                 callback(None)
             else:
                 callback(elems[0])
+
+        # Escape non-alphanumeric characters in the selector
+        # https://www.w3.org/TR/CSS2/syndata.html#value-def-identifier
+        elem_id = re.sub(r'[^a-zA-Z0-9_-]', r'\\\g<0>', elem_id)
         self.find_css('#' + elem_id, find_id_cb)
 
     def find_focused(self, callback):
diff --git a/tests/end2end/data/click_element.html b/tests/end2end/data/click_element.html
index 55bf8b88c..acf0cf77c 100644
--- a/tests/end2end/data/click_element.html
+++ b/tests/end2end/data/click_element.html
@@ -9,5 +9,6 @@
         <span>Duplicate</span>
         <form><input id='qute-input'></input></form>
         <a href="/data/hello.txt" id='link'>link</a>
+        <span id='foo.bar' onclick='console.log("id with dot")'>ID with dot</span>
     </body>
 </html>
diff --git a/tests/end2end/features/misc.feature b/tests/end2end/features/misc.feature
index 70505c1f8..82ae8cf91 100644
--- a/tests/end2end/features/misc.feature
+++ b/tests/end2end/features/misc.feature
@@ -449,6 +449,11 @@ Feature: Various utility commands.
         And I run :click-element id qute-input
         Then "Entering mode KeyMode.insert (reason: clicking input)" should be logged
 
+    Scenario: Clicking an element by ID with dot
+        When I open data/click_element.html
+        And I run :click-element id foo.bar
+        Then the javascript message "id with dot" should be logged
+
     Scenario: Clicking an element with tab target
         When I open data/click_element.html
         And I run :tab-only