diff --git a/Tests/LibWeb/Layout/expected/div_align.txt b/Tests/LibWeb/Layout/expected/div_align.txt new file mode 100644 index 0000000000..1bb64d1410 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/div_align.txt @@ -0,0 +1,79 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x637.875 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x609.875 children: not-inline + BlockContainer
at (8,8) content-size 784x137.46875 children: not-inline + BlockContainer <(anonymous)> at (8,8) content-size 784x17.46875 children: inline + line 0 width: 436.625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 53, rect: [8,8 436.625x17.46875] + "This text and the green square are both left aligned:" + TextNode <#text> + BlockContainer at (28,45.46875) content-size 100x100 children: not-inline + BlockContainer <(anonymous)> at (8,165.46875) content-size 784x0 children: inline + TextNode <#text> + BlockContainer
at (8,165.46875) content-size 784x137.46875 children: not-inline + BlockContainer <(anonymous)> at (8,165.46875) content-size 784x17.46875 children: inline + line 0 width: 418.6875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 49, rect: [191,165.46875 418.6875x17.46875] + "This text and the green square are both centered:" + TextNode <#text> + BlockContainer at (350,202.9375) content-size 100x100 children: not-inline + BlockContainer <(anonymous)> at (8,322.9375) content-size 784x0 children: inline + TextNode <#text> + BlockContainer
at (8,322.9375) content-size 784x137.46875 children: not-inline + BlockContainer <(anonymous)> at (8,322.9375) content-size 784x17.46875 children: inline + line 0 width: 447.484375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 54, rect: [345,322.9375 447.484375x17.46875] + "This text and the green square are both right aligned:" + TextNode <#text> + BlockContainer at (672,360.40625) content-size 100x100 children: not-inline + BlockContainer <(anonymous)> at (8,480.40625) content-size 784x0 children: inline + TextNode <#text> + BlockContainer
at (8,480.40625) content-size 784x137.46875 children: not-inline + BlockContainer <(anonymous)> at (8,480.40625) content-size 784x17.46875 children: inline + line 0 width: 512.53125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 4, rect: [8,480.40625 35.5x17.46875] + "This" + frag 1 from TextNode start: 4, length: 1, rect: [44,480.40625 8x17.46875] + " " + frag 2 from TextNode start: 5, length: 4, rect: [52,480.40625 32.140625x17.46875] + "text" + frag 3 from TextNode start: 9, length: 1, rect: [84,480.40625 8x17.46875] + " " + frag 4 from TextNode start: 10, length: 2, rect: [92,480.40625 13.90625x17.46875] + "is" + frag 5 from TextNode start: 12, length: 1, rect: [106,480.40625 8x17.46875] + " " + frag 6 from TextNode start: 13, length: 16, rect: [114,480.40625 102.96875x17.46875] + "'full-justified'" + frag 7 from TextNode start: 29, length: 1, rect: [217,480.40625 8x17.46875] + " " + frag 8 from TextNode start: 30, length: 3, rect: [225,480.40625 26.8125x17.46875] + "and" + frag 9 from TextNode start: 33, length: 1, rect: [251,480.40625 8x17.46875] + " " + frag 10 from TextNode start: 34, length: 3, rect: [259,480.40625 24.875x17.46875] + "the" + frag 11 from TextNode start: 37, length: 1, rect: [284,480.40625 8x17.46875] + " " + frag 12 from TextNode start: 38, length: 5, rect: [292,480.40625 43.4375x17.46875] + "green" + frag 13 from TextNode start: 43, length: 1, rect: [336,480.40625 8x17.46875] + " " + frag 14 from TextNode start: 44, length: 6, rect: [344,480.40625 57.0625x17.46875] + "square" + frag 15 from TextNode start: 50, length: 1, rect: [401,480.40625 8x17.46875] + " " + frag 16 from TextNode start: 51, length: 2, rect: [409,480.40625 13.90625x17.46875] + "is" + frag 17 from TextNode start: 53, length: 1, rect: [423,480.40625 8x17.46875] + " " + frag 18 from TextNode start: 54, length: 4, rect: [431,480.40625 26.25x17.46875] + "left" + frag 19 from TextNode start: 58, length: 1, rect: [457,480.40625 8x17.46875] + " " + frag 20 from TextNode start: 59, length: 8, rect: [465,480.40625 55.671875x17.46875] + "aligned:" + TextNode <#text> + BlockContainer at (28,517.875) content-size 100x100 children: not-inline + BlockContainer <(anonymous)> at (8,637.875) content-size 784x0 children: inline + TextNode <#text> diff --git a/Tests/LibWeb/Layout/expected/div_align_nested.txt b/Tests/LibWeb/Layout/expected/div_align_nested.txt new file mode 100644 index 0000000000..4e87f49886 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/div_align_nested.txt @@ -0,0 +1,27 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x600 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x252.875 children: not-inline + BlockContainer
at (8,8) content-size 784x252.875 children: not-inline + BlockContainer <(anonymous)> at (8,8) content-size 784x17.46875 children: inline + line 0 width: 447.484375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 54, rect: [345,8 447.484375x17.46875] + "This text and the green square are both right aligned:" + TextNode <#text> + BlockContainer at (692,25.46875) content-size 100x100 children: not-inline + BlockContainer <(anonymous)> at (8,125.46875) content-size 784x0 children: inline + TextNode <#text> + BlockContainer
at (8,125.46875) content-size 784x135.40625 children: not-inline + BlockContainer <(anonymous)> at (8,125.46875) content-size 784x35.40625 children: inline + line 0 width: 711.4375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 1, length: 87, rect: [8,125.46875 711.4375x17.46875] + "This text and the green square are both left aligned despite being nested in a div with" + line 1 width: 94.296875, height: 17.9375, bottom: 35.40625, baseline: 13.53125 + frag 0 from TextNode start: 89, length: 14, rect: [8,142.46875 94.296875x17.46875] + "align="right":" + TextNode <#text> + BlockContainer at (8,160.875) content-size 100x100 children: inline + TextNode <#text> + BlockContainer <(anonymous)> at (8,260.875) content-size 784x0 children: inline + TextNode <#text> + BlockContainer <(anonymous)> at (8,260.875) content-size 784x0 children: inline + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/div_align.html b/Tests/LibWeb/Layout/input/div_align.html new file mode 100644 index 0000000000..fd60b08ad6 --- /dev/null +++ b/Tests/LibWeb/Layout/input/div_align.html @@ -0,0 +1,13 @@ + + +
This text and the green square are both left aligned:
+
This text and the green square are both centered:
+
This text and the green square are both right aligned:
+
This text is 'full-justified' and the green square is left aligned:
diff --git a/Tests/LibWeb/Layout/input/div_align_nested.html b/Tests/LibWeb/Layout/input/div_align_nested.html new file mode 100644 index 0000000000..d0246337c9 --- /dev/null +++ b/Tests/LibWeb/Layout/input/div_align_nested.html @@ -0,0 +1,15 @@ + + + +
This text and the green square are both right aligned:
+
+ This text and the green square are both left aligned despite being nested in a div with align="right": +
+
+
diff --git a/Userland/Libraries/LibWeb/HTML/HTMLDivElement.cpp b/Userland/Libraries/LibWeb/HTML/HTMLDivElement.cpp index 3ebd7580b6..1395fb80f5 100644 --- a/Userland/Libraries/LibWeb/HTML/HTMLDivElement.cpp +++ b/Userland/Libraries/LibWeb/HTML/HTMLDivElement.cpp @@ -5,6 +5,8 @@ */ #include +#include +#include #include namespace Web::HTML { @@ -16,6 +18,23 @@ HTMLDivElement::HTMLDivElement(DOM::Document& document, DOM::QualifiedName quali HTMLDivElement::~HTMLDivElement() = default; +// https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3 +void HTMLDivElement::apply_presentational_hints(CSS::StyleProperties& style) const +{ + for_each_attribute([&](auto& name, auto& value) { + if (name.equals_ignoring_ascii_case("align"sv)) { + if (value.equals_ignoring_ascii_case("left"sv)) + style.set_property(CSS::PropertyID::TextAlign, CSS::IdentifierStyleValue::create(CSS::ValueID::LibwebLeft).release_value_but_fixme_should_propagate_errors()); + else if (value.equals_ignoring_ascii_case("right"sv)) + style.set_property(CSS::PropertyID::TextAlign, CSS::IdentifierStyleValue::create(CSS::ValueID::LibwebRight).release_value_but_fixme_should_propagate_errors()); + else if (value.equals_ignoring_ascii_case("center"sv)) + style.set_property(CSS::PropertyID::TextAlign, CSS::IdentifierStyleValue::create(CSS::ValueID::LibwebCenter).release_value_but_fixme_should_propagate_errors()); + else if (value.equals_ignoring_ascii_case("justify"sv)) + style.set_property(CSS::PropertyID::TextAlign, CSS::IdentifierStyleValue::create(CSS::ValueID::Justify).release_value_but_fixme_should_propagate_errors()); + } + }); +} + JS::ThrowCompletionOr HTMLDivElement::initialize(JS::Realm& realm) { MUST_OR_THROW_OOM(Base::initialize(realm)); diff --git a/Userland/Libraries/LibWeb/HTML/HTMLDivElement.h b/Userland/Libraries/LibWeb/HTML/HTMLDivElement.h index 9bb16ebf3d..ec47b18873 100644 --- a/Userland/Libraries/LibWeb/HTML/HTMLDivElement.h +++ b/Userland/Libraries/LibWeb/HTML/HTMLDivElement.h @@ -25,6 +25,7 @@ protected: private: virtual JS::ThrowCompletionOr initialize(JS::Realm&) override; + virtual void apply_presentational_hints(CSS::StyleProperties&) const override; }; }