LibWeb: Support the :first-of-type CSS selector :^)

This commit is contained in:
Andreas Kling 2021-04-06 12:23:32 +02:00
parent 4f690408af
commit 0eb9a9dd13
6 changed files with 26 additions and 0 deletions

View file

@ -0,0 +1,13 @@
<style>
article :first-of-type {
background-color:pink;
}
</style>
<article>
<div>This `div is first!</div>
<div>This <span>nested `span` is first</span>!</div>
<div>This <em> nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
<div>This <span>nested `span` gets styled</span>!</div>
<b>This `b` qualifies!</b>
<div>This is the final `div`.</div>
</article>

View file

@ -38,6 +38,7 @@ span#loadtime {
<p>This page loaded in <b><span id="loadtime"></span></b> ms</p>
<p>Some small test pages:</p>
<ul>
<li><a href="first-of-type.html">CSS :first-of-type selector</a></li>
<li><a href="background-repeat-test.html">background image with repetition rules</a></li>
<li><a href="link-over-zindex-block.html">link elements with background box placed with z-index</a></li>
<li><a href="contenteditable.html">contenteditable</a></li>

View file

@ -554,6 +554,8 @@ public:
simple_selector.pseudo_class = CSS::Selector::SimpleSelector::PseudoClass::Empty;
} else if (pseudo_name.equals_ignoring_case("root")) {
simple_selector.pseudo_class = CSS::Selector::SimpleSelector::PseudoClass::Root;
} else if (pseudo_name.equals_ignoring_case("first-of-type")) {
simple_selector.pseudo_class = CSS::Selector::SimpleSelector::PseudoClass::FirstOfType;
} else if (pseudo_name.equals_ignoring_case("before")) {
simple_selector.pseudo_element = CSS::Selector::SimpleSelector::PseudoElement::Before;
} else if (pseudo_name.equals_ignoring_case("after")) {

View file

@ -54,6 +54,7 @@ public:
OnlyChild,
Empty,
Root,
FirstOfType,
};
PseudoClass pseudo_class { PseudoClass::None };

View file

@ -90,6 +90,12 @@ static bool matches(const CSS::Selector::SimpleSelector& component, const DOM::E
if (!is<HTML::HTMLElement>(element))
return false;
break;
case CSS::Selector::SimpleSelector::PseudoClass::FirstOfType:
for (auto* sibling = element.previous_element_sibling(); sibling; sibling = sibling->previous_element_sibling()) {
if (sibling->tag_name() == element.tag_name())
return false;
}
break;
}
switch (component.attribute_match_type) {

View file

@ -359,6 +359,9 @@ void dump_selector(StringBuilder& builder, const CSS::Selector& selector)
case CSS::Selector::SimpleSelector::PseudoClass::Root:
pseudo_class_description = "Root";
break;
case CSS::Selector::SimpleSelector::PseudoClass::FirstOfType:
pseudo_class_description = "FirstOfType";
break;
case CSS::Selector::SimpleSelector::PseudoClass::Focus:
pseudo_class_description = "Focus";
break;