Bladeren bron

LibWeb: Implement the `:dir()` selector pseudo-class

Sam Atkins 2 jaren geleden
bovenliggende
commit
b8e694c0f2

+ 111 - 0
Tests/LibWeb/Layout/expected/css-dir-selector.txt

@@ -0,0 +1,111 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (100,0) content-size 700x832 [BFC] children: not-inline
+    BlockContainer <body> at (200,8) content-size 592x816 children: not-inline
+      BlockContainer <div> at (301,9) content-size 100x100 children: inline
+        line 0 width: 79.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+          frag 0 from TextNode start: 0, length: 11, rect: [301,9 79.96875x17.46875]
+            "Well, hello"
+        line 1 width: 59.21875, height: 17.9375, bottom: 35.40625, baseline: 13.53125
+          frag 0 from TextNode start: 12, length: 8, rect: [301,26 59.21875x17.46875]
+            "friends!"
+        TextNode <#text>
+      BlockContainer <(anonymous)> at (200,110) content-size 592x0 children: inline
+        TextNode <#text>
+      BlockContainer <div> at (301,111) content-size 100x100 children: inline
+        line 0 width: 79.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+          frag 0 from TextNode start: 0, length: 11, rect: [301,111 79.96875x17.46875]
+            "Well, hello"
+        line 1 width: 59.21875, height: 17.9375, bottom: 35.40625, baseline: 13.53125
+          frag 0 from TextNode start: 12, length: 8, rect: [301,128 59.21875x17.46875]
+            "friends!"
+        TextNode <#text>
+      BlockContainer <(anonymous)> at (200,212) content-size 592x0 children: inline
+        TextNode <#text>
+      BlockContainer <div> at (401,213) content-size 100x100 children: inline
+        line 0 width: 79.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+          frag 0 from TextNode start: 0, length: 11, rect: [401,213 79.96875x17.46875]
+            "Well, hello"
+        line 1 width: 59.21875, height: 17.9375, bottom: 35.40625, baseline: 13.53125
+          frag 0 from TextNode start: 12, length: 8, rect: [401,230 59.21875x17.46875]
+            "friends!"
+        TextNode <#text>
+      BlockContainer <(anonymous)> at (200,314) content-size 592x0 children: inline
+        TextNode <#text>
+      BlockContainer <div> at (301,315) content-size 100x100 children: inline
+        line 0 width: 79.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+          frag 0 from TextNode start: 0, length: 11, rect: [301,315 79.96875x17.46875]
+            "Well, hello"
+        line 1 width: 59.21875, height: 17.9375, bottom: 35.40625, baseline: 13.53125
+          frag 0 from TextNode start: 12, length: 8, rect: [301,332 59.21875x17.46875]
+            "friends!"
+        TextNode <#text>
+      BlockContainer <(anonymous)> at (200,416) content-size 592x0 children: inline
+        TextNode <#text>
+      BlockContainer <div> at (301,417) content-size 100x100 children: inline
+        line 0 width: 86.125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+          frag 0 from TextNode start: 0, length: 26, rect: [301,417 86.125x17.46875]
+            "حسنًا ، مرحباً"
+        line 1 width: 78.125, height: 17.9375, bottom: 35.40625, baseline: 13.53125
+          frag 0 from TextNode start: 27, length: 25, rect: [301,434 78.125x17.46875]
+            "أيها الأصدقاء"
+        TextNode <#text>
+      BlockContainer <(anonymous)> at (200,518) content-size 592x0 children: inline
+        TextNode <#text>
+      BlockContainer <div> at (301,519) content-size 100x100 children: inline
+        line 0 width: 86.125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+          frag 0 from TextNode start: 0, length: 26, rect: [301,519 86.125x17.46875]
+            "حسنًا ، مرحباً"
+        line 1 width: 78.125, height: 17.9375, bottom: 35.40625, baseline: 13.53125
+          frag 0 from TextNode start: 27, length: 25, rect: [301,536 78.125x17.46875]
+            "أيها الأصدقاء"
+        TextNode <#text>
+      BlockContainer <(anonymous)> at (200,620) content-size 592x0 children: inline
+        TextNode <#text>
+      BlockContainer <div> at (401,621) content-size 100x100 children: inline
+        line 0 width: 86.125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+          frag 0 from TextNode start: 0, length: 26, rect: [401,621 86.125x17.46875]
+            "حسنًا ، مرحباً"
+        line 1 width: 78.125, height: 17.9375, bottom: 35.40625, baseline: 13.53125
+          frag 0 from TextNode start: 27, length: 25, rect: [401,638 78.125x17.46875]
+            "أيها الأصدقاء"
+        TextNode <#text>
+      BlockContainer <(anonymous)> at (200,722) content-size 592x0 children: inline
+        TextNode <#text>
+      BlockContainer <div> at (401,723) content-size 100x100 children: inline
+        line 0 width: 86.125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+          frag 0 from TextNode start: 0, length: 26, rect: [401,723 86.125x17.46875]
+            "حسنًا ، مرحباً"
+        line 1 width: 78.125, height: 17.9375, bottom: 35.40625, baseline: 13.53125
+          frag 0 from TextNode start: 27, length: 25, rect: [401,740 78.125x17.46875]
+            "أيها الأصدقاء"
+        TextNode <#text>
+      BlockContainer <(anonymous)> at (200,824) content-size 592x0 children: inline
+        TextNode <#text>
+
+ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x832]
+  PaintableWithLines (BlockContainer<HTML>) [100,0 700x832]
+    PaintableWithLines (BlockContainer<BODY>) [200,8 592x816]
+      PaintableWithLines (BlockContainer<DIV>) [300,8 102x102]
+        TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer(anonymous)) [200,110 592x0]
+      PaintableWithLines (BlockContainer<DIV>) [300,110 102x102]
+        TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer(anonymous)) [200,212 592x0]
+      PaintableWithLines (BlockContainer<DIV>) [400,212 102x102]
+        TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer(anonymous)) [200,314 592x0]
+      PaintableWithLines (BlockContainer<DIV>) [300,314 102x102]
+        TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer(anonymous)) [200,416 592x0]
+      PaintableWithLines (BlockContainer<DIV>) [300,416 102x102]
+        TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer(anonymous)) [200,518 592x0]
+      PaintableWithLines (BlockContainer<DIV>) [300,518 102x102]
+        TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer(anonymous)) [200,620 592x0]
+      PaintableWithLines (BlockContainer<DIV>) [400,620 102x102]
+        TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer(anonymous)) [200,722 592x0]
+      PaintableWithLines (BlockContainer<DIV>) [400,722 102x102]
+        TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer(anonymous)) [200,824 592x0]

+ 24 - 0
Tests/LibWeb/Layout/input/css-dir-selector.html

@@ -0,0 +1,24 @@
+<style>
+    div {
+        width: 100px;
+        height: 100px;
+        border: 1px solid black;
+    }
+    :dir(rtl) {
+        margin-left: 200px;
+    }
+    :dir(ltr) {
+        margin-left: 100px;
+    }
+    :dir(wheeee) {
+        width: 1000px !important;
+    }
+</style>
+<div>Well, hello friends!</div>
+<div dir="ltr">Well, hello friends!</div>
+<div dir="rtl">Well, hello friends!</div>
+<div dir="auto">Well, hello friends!</div>
+<div>حسنًا ، مرحباً أيها الأصدقاء</div>
+<div dir="ltr">حسنًا ، مرحباً أيها الأصدقاء</div>
+<div dir="rtl">حسنًا ، مرحباً أيها الأصدقاء</div>
+<div dir="auto">حسنًا ، مرحباً أيها الأصدقاء</div>

+ 3 - 0
Userland/Libraries/LibWeb/CSS/PseudoClasses.json

@@ -11,6 +11,9 @@
   "defined": {
     "argument": ""
   },
+  "dir": {
+    "argument": "<ident>"
+  },
   "disabled": {
     "argument": ""
   },

+ 14 - 0
Userland/Libraries/LibWeb/CSS/SelectorEngine.cpp

@@ -7,6 +7,7 @@
 
 #include <LibWeb/CSS/Parser/Parser.h>
 #include <LibWeb/CSS/SelectorEngine.h>
+#include <LibWeb/CSS/ValueID.h>
 #include <LibWeb/DOM/Document.h>
 #include <LibWeb/DOM/Element.h>
 #include <LibWeb/DOM/Text.h>
@@ -428,6 +429,19 @@ static inline bool matches_pseudo_class(CSS::Selector::SimpleSelector::PseudoCla
     }
     case CSS::PseudoClass::Target:
         return element.is_target();
+    case CSS::PseudoClass::Dir: {
+        // "Values other than ltr and rtl are not invalid, but do not match anything."
+        // - https://www.w3.org/TR/selectors-4/#the-dir-pseudo
+        if (!first_is_one_of(pseudo_class.identifier, CSS::ValueID::Ltr, CSS::ValueID::Rtl))
+            return false;
+        switch (element.directionality()) {
+        case DOM::Element::Directionality::Ltr:
+            return pseudo_class.identifier == CSS::ValueID::Ltr;
+        case DOM::Element::Directionality::Rtl:
+            return pseudo_class.identifier == CSS::ValueID::Rtl;
+        }
+        VERIFY_NOT_REACHED();
+    }
     }
 
     return false;