:defined works

components/layout_thread/dom_wrapper.rs

@@ -955,6 +955,7 @@ impl<'le> ::selectors::Element for ServoLayoutElement<'le> {
             NonTSPseudoClass::Focus |
             NonTSPseudoClass::Fullscreen |
             NonTSPseudoClass::Hover |
+            NonTSPseudoClass::Defined |
             NonTSPseudoClass::Enabled |
             NonTSPseudoClass::Disabled |
             NonTSPseudoClass::Checked |

components/layout_thread_2020/dom_wrapper.rs

@@ -962,6 +962,7 @@ impl<'le> ::selectors::Element for ServoLayoutElement<'le> {
             NonTSPseudoClass::Focus |
             NonTSPseudoClass::Fullscreen |
             NonTSPseudoClass::Hover |
+            NonTSPseudoClass::Defined |
             NonTSPseudoClass::Enabled |
             NonTSPseudoClass::Disabled |
             NonTSPseudoClass::Checked |

components/script/dom/create.rs

@@ -200,6 +200,8 @@ fn create_html_element(
         None => {
             if is_valid_custom_element_name(&*name.local) {
                 result.set_custom_element_state(CustomElementState::Undefined);
+            } else {
+                result.set_custom_element_state(CustomElementState::Uncustomized);
             }
         },
     };

components/script/dom/element.rs

@@ -324,14 +324,23 @@ impl Element {
     }
 
     pub fn set_custom_element_state(&self, state: CustomElementState) {
-        self.ensure_rare_data().custom_element_state = state;
+        // no need to inflate rare data for uncustomized
+        if state != CustomElementState::Uncustomized || self.rare_data().is_some() {
+            self.ensure_rare_data().custom_element_state = state;
+        }
+        // https://dom.spec.whatwg.org/#concept-element-defined
+        let in_defined_state = match state {
+            CustomElementState::Uncustomized | CustomElementState::Custom => true,
+            _ => false,
+        };
+        self.set_state(ElementState::IN_DEFINED_STATE, in_defined_state)
     }
 
     pub fn get_custom_element_state(&self) -> CustomElementState {
         if let Some(rare_data) = self.rare_data().as_ref() {
             return rare_data.custom_element_state;
         }
-        CustomElementState::Undefined
+        CustomElementState::Uncustomized
     }
 
     pub fn set_custom_element_definition(&self, definition: Rc<CustomElementDefinition>) {
@@ -3039,6 +3048,7 @@ impl<'a> SelectorsElement for DomRoot<Element> {
             NonTSPseudoClass::Focus |
             NonTSPseudoClass::Fullscreen |
             NonTSPseudoClass::Hover |
+            NonTSPseudoClass::Defined |
             NonTSPseudoClass::Enabled |
             NonTSPseudoClass::Disabled |
             NonTSPseudoClass::Checked |

components/style/servo/selector_parser.rs

@@ -278,6 +278,7 @@ pub enum NonTSPseudoClass {
     Active,
     AnyLink,
     Checked,
+    Defined,
     Disabled,
     Enabled,
     Focus,
@@ -332,6 +333,7 @@ impl ToCss for NonTSPseudoClass {
             Active => ":active",
             AnyLink => ":any-link",
             Checked => ":checked",
+            Defined => ":defined",
             Disabled => ":disabled",
             Enabled => ":enabled",
             Focus => ":focus",
@@ -371,6 +373,7 @@ impl NonTSPseudoClass {
             Focus => ElementState::IN_FOCUS_STATE,
             Fullscreen => ElementState::IN_FULLSCREEN_STATE,
             Hover => ElementState::IN_HOVER_STATE,
+            Defined => ElementState::IN_DEFINED_STATE,
             Enabled => ElementState::IN_ENABLED_STATE,
             Disabled => ElementState::IN_DISABLED_STATE,
             Checked => ElementState::IN_CHECKED_STATE,
@@ -436,6 +439,7 @@ impl<'a, 'i> ::selectors::Parser<'i> for SelectorParser<'a> {
             "active" => Active,
             "any-link" => AnyLink,
             "checked" => Checked,
+            "defined" => Defined,
             "disabled" => Disabled,
             "enabled" => Enabled,
             "focus" => Focus,

tests/wpt/metadata/MANIFEST.json

@@ -667507,7 +667507,7 @@
    "testharness"
   ],
   "custom-elements/pseudo-class-defined.html": [
-   "24cb5fe4cd392246e292d255c0858aa7f2b5dd0e",
+   "ed12830d5a9582dbf3ec30c74a43fe381221a139",
    "testharness"
   ],
   "custom-elements/range-and-constructors.html": [

tests/wpt/metadata/custom-elements/Document-createElement.html.ini

@@ -1,3 +0,0 @@
-[Document-createElement.html]
-  [document.createElement must create an instance of autonomous custom elements when it has is attribute]
-    expected: FAIL

tests/wpt/metadata/custom-elements/pseudo-class-defined.html.ini

@@ -1,8 +1,37 @@
 [pseudo-class-defined.html]
-  expected: ERROR
   [Untitled]
     expected: FAIL
 
   [pseudo-class-defined]
     expected: FAIL
 
+  [createElementNS("http://www.w3.org/2000/svg", "div") should be :defined]
+    expected: FAIL
+
+  [Without browsing context: createElementNS("http://www.w3.org/2000/svg", "div") should be :defined]
+    expected: FAIL
+
+  [Without browsing context: createElementNS("http://www.w3.org/2000/svg", "p", { is: "" }) should be :defined]
+    expected: FAIL
+
+  [createElementNS("http://www.w3.org/2000/svg", "p", { is: "" }) should be :defined]
+    expected: FAIL
+
+  [Without browsing context: createElementNS("http://www.w3.org/2000/svg", "abbr", { is: "my-abbr" }) should be :defined]
+    expected: FAIL
+
+  [createElementNS("http://www.w3.org/2000/svg", "abbr", { is: "my-abbr" }) should be :defined]
+    expected: FAIL
+
+  [createElementNS("http://www.w3.org/2000/svg", "font-face") should be :defined]
+    expected: FAIL
+
+  [Without browsing context: createElementNS("http://www.w3.org/2000/svg", "font-face") should be :defined]
+    expected: FAIL
+
+  [createElementNS("http://www.w3.org/2000/svg", "a-a") should be :defined]
+    expected: FAIL
+
+  [Without browsing context: createElementNS("http://www.w3.org/2000/svg", "a-a") should be :defined]
+    expected: FAIL
+

tests/wpt/web-platform-tests/custom-elements/pseudo-class-defined.html

@@ -16,6 +16,7 @@ const testList = [
 const neither = 'rgb(255, 0, 0)';
 const defined = 'rgb(255, 165, 0)';
 const not_defined = 'rgb(0, 0, 255)';
+const iframe = document.getElementById("iframe");
 iframe.srcdoc = `<style>
   * { color:${neither}; }
   :defined { color:${defined}; }