We use cookies to ensure you get the best experience on our website
Начало Каталог Помощ
Регистрация Вход
0ct0pu5
/
ladybird
1
0
Разклонения 0
Файлове Задачи 0 Заявки за сливане 0 Уики
Преглед на файлове

LibWeb: Implement the align attribute for divs

As specified in section 15.3.3 of the HTML spec.
kamp преди 2 години
родител
4ac7c41483
ревизия
23aae7c7f3
променени са 6 файла, в които са добавени 154 реда и са изтрити 0 реда
Разделен изглед Покажи статистика за разликите
  1. 79 0
      Tests/LibWeb/Layout/expected/div_align.txt
  2. 27 0
      Tests/LibWeb/Layout/expected/div_align_nested.txt
  3. 13 0
      Tests/LibWeb/Layout/input/div_align.html
  4. 15 0
      Tests/LibWeb/Layout/input/div_align_nested.html
  5. 19 0
      Userland/Libraries/LibWeb/HTML/HTMLDivElement.cpp
  6. 1 0
      Userland/Libraries/LibWeb/HTML/HTMLDivElement.h

+ 79 - 0
Tests/LibWeb/Layout/expected/div_align.txt
Целия файл 

@@ -0,0 +1,79 @@
 
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
+  BlockContainer <html> at (0,0) content-size 800x637.875 [BFC] children: not-inline
 
+    BlockContainer <body> at (8,8) content-size 784x609.875 children: not-inline
 
+      BlockContainer <div> 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 <div.square> at (28,45.46875) content-size 100x100 children: not-inline
 
+      BlockContainer <(anonymous)> at (8,165.46875) content-size 784x0 children: inline
 
+        TextNode <#text>
 
+      BlockContainer <div> 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 <div.square> at (350,202.9375) content-size 100x100 children: not-inline
 
+      BlockContainer <(anonymous)> at (8,322.9375) content-size 784x0 children: inline
 
+        TextNode <#text>
 
+      BlockContainer <div> 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 <div.square> at (672,360.40625) content-size 100x100 children: not-inline
 
+      BlockContainer <(anonymous)> at (8,480.40625) content-size 784x0 children: inline
 
+        TextNode <#text>
 
+      BlockContainer <div> 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 <div.square> at (28,517.875) content-size 100x100 children: not-inline
 
+      BlockContainer <(anonymous)> at (8,637.875) content-size 784x0 children: inline
 
+        TextNode <#text>

+ 27 - 0
Tests/LibWeb/Layout/expected/div_align_nested.txt
Целия файл 

@@ -0,0 +1,27 @@
 
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
+  BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
 
+    BlockContainer <body> at (8,8) content-size 784x252.875 children: not-inline
 
+      BlockContainer <div> 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 <div.square> at (692,25.46875) content-size 100x100 children: not-inline
 
+        BlockContainer <(anonymous)> at (8,125.46875) content-size 784x0 children: inline
 
+          TextNode <#text>
 
+        BlockContainer <div> 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 <div.square> 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>

+ 13 - 0
Tests/LibWeb/Layout/input/div_align.html
Целия файл 

@@ -0,0 +1,13 @@
 
+<style>
 
+    .square {
 
+        width: 100px; 
+        height: 100px;
 
+        background-color:green;
 
+        margin: 20px;
 
+    }
 
+</style>
 
+
 
+<div align="left">This text and the green square are both left aligned: <div class="square"></div></div>
 
+<div align="center">This text and the green square are both centered: <div class="square"></div></div>
 
+<div align="right">This text and the green square are both right aligned: <div class="square"></div></div>
 
+<div align="justify">This text is 'full-justified' and the green square is left aligned: <div class="square"></div></div>

+ 15 - 0
Tests/LibWeb/Layout/input/div_align_nested.html
Целия файл 

@@ -0,0 +1,15 @@
 
+<style>
 
+    .square {
 
+        width: 100px; 
+        height: 100px;
 
+        background-color:green
 
+    }
 
+</style>
 
+
 
+
 
+<div align="right">This text and the green square are both right aligned: <div class="square"></div>
 
+    <div align="left">
 
+        This text and the green square are both left aligned despite being nested in a div with align="right":
 
+        <div class="square"/>
 
+    </div>
 
+</div>

+ 19 - 0
Userland/Libraries/LibWeb/HTML/HTMLDivElement.cpp
Целия файл 

@@ -5,6 +5,8 @@
 
  */
 
 
 #include <LibWeb/Bindings/Intrinsics.h>
 
+#include <LibWeb/CSS/StyleProperties.h>
 
+#include <LibWeb/CSS/StyleValues/IdentifierStyleValue.h>
 
 #include <LibWeb/HTML/HTMLDivElement.h>
 
 
 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<void> HTMLDivElement::initialize(JS::Realm& realm)
 
 {
 
     MUST_OR_THROW_OOM(Base::initialize(realm));

+ 1 - 0
Userland/Libraries/LibWeb/HTML/HTMLDivElement.h
Целия файл 

@@ -25,6 +25,7 @@ protected:
 
 
 private:
 
     virtual JS::ThrowCompletionOr<void> initialize(JS::Realm&) override;
 
+    virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
 
 };
 
 
 }

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5