We use cookies to ensure you get the best experience on our website
首頁 探索 說明
註冊 登入
0ct0pu5
/
ladybird
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

LibWeb: CSS: Add "position: absolute" with top and left

This momentarily handles the CSS property "position: absolute;" in
combination with the properties "top" and "left", so that elements can
be placed anywhere on the page independently from their parents.

Statically positioned elements ignore absolute positioned elements when
calculating their position as they don't take up space.
myphs 5 年之前
父節點
494df52961
當前提交
f42f300ba3
共有 7 個文件被更改，包括 138 次插入 和 11 次删除
分割檢視 顯示文件統計
  1. 67 0
      Base/home/anon/www/position-absolute-top-left.html
  2. 1 0
      Base/home/anon/www/welcome.html
  3. 16 0
      Libraries/LibWeb/CSS/StyleProperties.cpp
  4. 2 0
      Libraries/LibWeb/CSS/StyleProperties.h
  5. 10 0
      Libraries/LibWeb/CSS/StyleValue.h
  6. 3 0
      Libraries/LibWeb/Layout/BoxModelMetrics.h
  7. 39 11
      Libraries/LibWeb/Layout/LayoutBlock.cpp

+ 67 - 0
Base/home/anon/www/position-absolute-top-left.html
查看文件 

@@ -0,0 +1,67 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>absolute</title>
 
+    <style>
 
+        div {
 
+            width: 100px;
 
+            height: 100px;
 
+        }
 
+        .absolute {
 
+            position: absolute;
 
+        }
 
+        .blue {
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: blue;
 
+            top: 208px;
 
+            left: 208px;
 
+        }
 
+        .yellow {
 
+            background-color: yellow;
 
+            top: 50px;
 
+            left: 50px;
 
+        }
 
+        .red {
 
+            background-color: red;
 
+            top: 100px;
 
+            left: 100px;
 
+        }
 
+        .green {
 
+            background-color: green;
 
+            top: 300px;
 
+            left: 300px;
 
+        }
 
+        .black {
 
+            background-color: black;
 
+            width: 50px;
 
+            height: 50px;
 
+            top: 50px;
 
+            left: 50px;   
+        }
 
+        .blue_margin {
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: blue;
 
+            margin-top: 200px;
 
+            margin-left: 400px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="blue absolute">
 
+        <div class="red absolute"></div>
 
+        <div class="yellow absolute">
 
+            <div class="black absolute"></div>
 
+        </div>
 
+        <div class="green absolute"></div>
 
+    </div>
 
+    <div class="blue">
 
+        <div class="red"></div>
 
+        <div class="yellow"></div>
 
+        <div class="green"></div>
 
+    </div>
 
+    <div class="blue_margin"></div>
 
+</body>
 
+</html>

+ 1 - 0
Base/home/anon/www/welcome.html
查看文件 

@@ -23,6 +23,7 @@ h1 {
 
     <p>This is a very simple browser built on the LibWeb engine.</p>
 
     <p>Some small test pages:</p>
 
     <ul>
 
+        <li><a href="position-absolute-top-left.html">position: absolute; for top and left</a></li>
 
         <li><a href="demo.html">fun demo</a></li>
 
         <li><a href="raf.html">requestAnimationFrame test</a></li>
 
         <li><a href="canvas.html">canvas 2D test</a></li>

+ 16 - 0
Libraries/LibWeb/CSS/StyleProperties.cpp
查看文件 

@@ -162,6 +162,22 @@ float StyleProperties::line_height() const
 
     return (float)font().glyph_height() * 1.4f;
 
 }
 
 
+CSS::Position StyleProperties::position() const
 
+{
 
+    if (property(CSS::PropertyID::Position).has_value()) {
 
+        String position_string = string_or_fallback(CSS::PropertyID::Position, "static");
 
+        if (position_string == "relative")
 
+            return CSS::Position::Relative;
 
+        if (position_string == "absolute")
 
+            return CSS::Position::Absolute;
 
+        if (position_string == "sticky")
 
+            return CSS::Position::Sticky;
 
+        if (position_string == "fixed")
 
+            return CSS::Position::Fixed;
 
+    }
 
+    return CSS::Position::Static;
 
+}
 
+
 
 bool StyleProperties::operator==(const StyleProperties& other) const
 
 {
 
     if (m_property_values.size() != other.m_property_values.size())

+ 2 - 0
Libraries/LibWeb/CSS/StyleProperties.h
查看文件 

@@ -70,6 +70,8 @@ public:
 
     bool operator==(const StyleProperties&) const;
 
     bool operator!=(const StyleProperties& other) const { return !(*this == other); }
 
 
+    CSS::Position position() const;
 
+
 
 private:
 
     HashMap<unsigned, NonnullRefPtr<StyleValue>> m_property_values;

+ 10 - 0
Libraries/LibWeb/CSS/StyleValue.h
查看文件 

@@ -50,6 +50,14 @@ enum class ValueID {
 
     Right,
 
     Justify,
 
 };
 
+
 
+enum class Position {
 
+    Static,
 
+    Relative,
 
+    Absolute,
 
+    Fixed,
 
+    Sticky,
 
+};
 
 }
 
 
 class StyleValue : public RefCounted<StyleValue> {
 
@@ -65,6 +73,7 @@ public:
 
         Color,
 
         Identifier,
 
         Image,
 
+        Position,
 
     };
 
 
     Type type() const { return m_type; }
 
@@ -76,6 +85,7 @@ public:
 
     bool is_image() const { return type() == Type::Image; }
 
     bool is_string() const { return type() == Type::String; }
 
     bool is_length() const { return type() == Type::Length; }
 
+    bool is_position() const { return type() == Type::Position; }
 
 
     virtual String to_string() const = 0;
 
     virtual Length to_length() const { return {}; }

+ 3 - 0
Libraries/LibWeb/Layout/BoxModelMetrics.h
查看文件 

@@ -39,10 +39,12 @@ public:
 
     LengthBox& margin() { return m_margin; }
 
     LengthBox& padding() { return m_padding; }
 
     LengthBox& border() { return m_border; }
 
+    LengthBox& offset() { return m_offset; }
 
 
     const LengthBox& margin() const { return m_margin; }
 
     const LengthBox& padding() const { return m_padding; }
 
     const LengthBox& border() const { return m_border; }
 
+    const LengthBox& offset() const { return m_offset; }
 
 
     struct PixelBox {
 
         float top;
 
@@ -57,6 +59,7 @@ private:
 
     LengthBox m_margin;
 
     LengthBox m_padding;
 
     LengthBox m_border;
 
+    LengthBox m_offset;
 
 };
 
 
 }

+ 39 - 11
Libraries/LibWeb/Layout/LayoutBlock.cpp
查看文件 

@@ -296,24 +296,52 @@ void LayoutBlock::compute_position()
 
 
     auto width = style.length_or_fallback(CSS::PropertyID::Width, auto_value);
 
 
+    if (style.position() == CSS::Position::Absolute) {
 
+        box_model().offset().top = style.length_or_fallback(CSS::PropertyID::Top, zero_value);
 
+        box_model().offset().right = style.length_or_fallback(CSS::PropertyID::Right, zero_value);
 
+        box_model().offset().bottom = style.length_or_fallback(CSS::PropertyID::Bottom, zero_value);
 
+        box_model().offset().left = style.length_or_fallback(CSS::PropertyID::Left, zero_value);
 
+    }
 
+
 
     box_model().margin().top = style.length_or_fallback(CSS::PropertyID::MarginTop, zero_value);
 
     box_model().margin().bottom = style.length_or_fallback(CSS::PropertyID::MarginBottom, zero_value);
 
     box_model().border().top = style.length_or_fallback(CSS::PropertyID::BorderTopWidth, zero_value);
 
     box_model().border().bottom = style.length_or_fallback(CSS::PropertyID::BorderBottomWidth, zero_value);
 
     box_model().padding().top = style.length_or_fallback(CSS::PropertyID::PaddingTop, zero_value);
 
     box_model().padding().bottom = style.length_or_fallback(CSS::PropertyID::PaddingBottom, zero_value);
 
-    rect().set_x(containing_block()->x() + box_model().margin().left.to_px() + box_model().border().left.to_px() + box_model().padding().left.to_px());
 
-
 
-    float top_border = -1;
 
-    if (previous_sibling() != nullptr) {
 
-        auto& previous_sibling_rect = previous_sibling()->rect();
 
-        auto& previous_sibling_style = previous_sibling()->box_model();
 
-        top_border = previous_sibling_rect.y() + previous_sibling_rect.height();
 
-        top_border += previous_sibling_style.full_margin().bottom;
 
-    } else {
 
-        top_border = containing_block()->y();
 
+
 
+    float position_x = box_model().margin().left.to_px()
 
+        + box_model().border().left.to_px()
 
+        + box_model().padding().left.to_px()
 
+        + box_model().offset().left.to_px();
 
+
 
+    if (style.position() != CSS::Position::Absolute || containing_block()->style().position() == CSS::Position::Absolute)
 
+        position_x += containing_block()->x();
 
+
 
+    rect().set_x(position_x);
 
+
 
+    float position_y = box_model().full_margin().top
 
+        + box_model().offset().top.to_px();
 
+
 
+    if (style.position() != CSS::Position::Absolute || containing_block()->style().position() == CSS::Position::Absolute) {
 
+        LayoutBlock* relevant_sibling = previous_sibling();
 
+        while (relevant_sibling != nullptr) {
 
+            if (relevant_sibling->style().position() != CSS::Position::Absolute)
 
+                break;
 
+            relevant_sibling = relevant_sibling->previous_sibling();
 
+        }
 
+
 
+        if (relevant_sibling == nullptr) {
 
+            position_y += containing_block()->y();
 
+        } else {
 
+            auto& previous_sibling_rect = relevant_sibling->rect();
 
+            auto& previous_sibling_style = relevant_sibling->box_model();
 
+            position_y += previous_sibling_rect.y() + previous_sibling_rect.height();
 
+            position_y += previous_sibling_style.full_margin().bottom;
 
+        }
 
     }
 
-    rect().set_y(top_border + box_model().full_margin().top);
 
+
 
+    rect().set_y(position_y);
 
 }
 
 
 void LayoutBlock::compute_height()

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