LibWeb: Implement the :dir() selector pseudo-class
This commit is contained in:
Sam Atkins
Andreas Kling
parent
5b125811f1
commit
b8e694c0f2
Notes:
sideshowbarker
2024-07-16 21:45:42 +09:00
Author: https://github.com/AtkinsSJ Commit: https://github.com/SerenityOS/serenity/commit/b8e694c0f2 Pull-request: https://github.com/SerenityOS/serenity/pull/20593 Reviewed-by: https://github.com/awesomekling
4 changed files with 152 additions and 0 deletions
111
Tests/LibWeb/Layout/expected/css-dir-selector.txt
Normal file
111
Tests/LibWeb/Layout/expected/css-dir-selector.txt
Normal file
|
|
@ -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
Tests/LibWeb/Layout/input/css-dir-selector.html
Normal file
24
Tests/LibWeb/Layout/input/css-dir-selector.html
Normal file
|
|
@ -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>
|
||||
|
|
@ -11,6 +11,9 @@
|
|||
"defined": {
|
||||
"argument": ""
|
||||
},
|
||||
"dir": {
|
||||
"argument": "<ident>"
|
||||
},
|
||||
"disabled": {
|
||||
"argument": ""
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue