We use cookies to ensure you get the best experience on our website
Etusivu Tutki Apua
Rekisteröidy Kirjaudu sisään
0ct0pu5
/
ladybird
1
0
Fork 0
Tiedostot Ongelmat 0 Pull-pyynnöt 0 Wiki
Selaa lähdekoodia

LibWeb: Account for margin and padding of justified abspos flex items

implicitfield 1 vuosi sitten
vanhempi
3888a91c5b
commit
54d8e58a68
3 muutettua tiedostoa jossa 49 lisäystä ja 2 poistoa
Yhdistetty näkymä Näytä diff tilastot
  1. 16 0
      Tests/LibWeb/Layout/expected/abspos-flex-margin-limits-2.txt
  2. 23 0
      Tests/LibWeb/Layout/input/abspos-flex-margin-limits-2.html
  3. 10 2
      Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp

+ 16 - 0
Tests/LibWeb/Layout/expected/abspos-flex-margin-limits-2.txt
Näytä tiedosto 

@@ -0,0 +1,16 @@
 
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
+  BlockContainer <html> at (0,0) content-size 800x16 [BFC] children: not-inline
 
+    BlockContainer <body> at (8,8) content-size 784x0 children: inline
 
+      Box <div.container> at (8,8) content-size 100x100 positioned flex-container(row) [FFC] children: not-inline
 
+        BlockContainer <(anonymous)> (not painted) [BFC] children: inline
 
+          TextNode <#text>
 
+        BlockContainer <div.top-right> at (48,18) content-size 50x50 positioned [BFC] children: not-inline
 
+        BlockContainer <(anonymous)> (not painted) [BFC] children: inline
 
+          TextNode <#text>
 
+      TextNode <#text>
 
+
 
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
 
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x16]
 
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x0]
 
+      PaintableBox (Box<DIV>.container) [8,8 100x100]
 
+        PaintableWithLines (BlockContainer<DIV>.top-right) [38,8 70x70]

+ 23 - 0
Tests/LibWeb/Layout/input/abspos-flex-margin-limits-2.html
Näytä tiedosto 

@@ -0,0 +1,23 @@
 
+<!DOCTYPE html>
 
+<style>
 
+.container {
 
+    position: absolute;
 
+    width: 100px;
 
+    height: 100px;
 
+    background: red;
 
+    display: flex;
 
+    justify-content: end;
 
+}
 
+.top-right {
 
+    position: absolute;
 
+    width: 50px;
 
+    height: 50px;
 
+    margin-left: 500px;
 
+    background: green;
 
+    border: 5px solid black;
 
+    padding: 5px;
 
+}
 
+</style>
 
+<div class="container">
 
+  <div class="top-right"></div>
 
+</div>

+ 10 - 2
Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
Näytä tiedosto 

@@ -2110,6 +2110,10 @@ CSSPixelPoint FlexFormattingContext::calculate_static_position(Box const& box) c
 
         return length_percentage.to_px(box, m_flex_container_state.content_width());
 
         return length_percentage.to_px(box, m_flex_container_state.content_width());
 
     };
 
     };
 
 
 
+    auto main_to_px = [&](CSS::LengthPercentage const& length_percentage) -> CSSPixels {
 
+        return length_percentage.to_px(box, m_flex_container_state.content_width());
 
+    };
 
+
 
     auto const& box_state = m_state.get(box);
 
     auto const& box_state = m_state.get(box);
 
     CSSPixels cross_margin_before = is_row_layout() ? cross_to_px(box.computed_values().margin().top()) : cross_to_px(box.computed_values().margin().left());
 
     CSSPixels cross_margin_before = is_row_layout() ? cross_to_px(box.computed_values().margin().top()) : cross_to_px(box.computed_values().margin().left());
 
     CSSPixels cross_margin_after = is_row_layout() ? cross_to_px(box.computed_values().margin().bottom()) : cross_to_px(box.computed_values().margin().right());
 
     CSSPixels cross_margin_after = is_row_layout() ? cross_to_px(box.computed_values().margin().bottom()) : cross_to_px(box.computed_values().margin().right());
 
@@ -2117,8 +2121,12 @@ CSSPixelPoint FlexFormattingContext::calculate_static_position(Box const& box) c
 
     CSSPixels cross_border_after = is_row_layout() ? box.computed_values().border_bottom().width : box.computed_values().border_right().width;
 
     CSSPixels cross_border_after = is_row_layout() ? box.computed_values().border_bottom().width : box.computed_values().border_right().width;
 
     CSSPixels cross_padding_before = is_row_layout() ? cross_to_px(box.computed_values().padding().top()) : cross_to_px(box.computed_values().padding().left());
 
     CSSPixels cross_padding_before = is_row_layout() ? cross_to_px(box.computed_values().padding().top()) : cross_to_px(box.computed_values().padding().left());
 
     CSSPixels cross_padding_after = is_row_layout() ? cross_to_px(box.computed_values().padding().bottom()) : cross_to_px(box.computed_values().padding().right());
 
     CSSPixels cross_padding_after = is_row_layout() ? cross_to_px(box.computed_values().padding().bottom()) : cross_to_px(box.computed_values().padding().right());
 
+    CSSPixels main_margin_before = is_row_layout() ? main_to_px(box.computed_values().margin().left()) : main_to_px(box.computed_values().margin().top());
 
+    CSSPixels main_margin_after = is_row_layout() ? main_to_px(box.computed_values().margin().right()) : main_to_px(box.computed_values().margin().bottom());
 
     CSSPixels main_border_before = is_row_layout() ? box.computed_values().border_left().width : box.computed_values().border_top().width;
 
     CSSPixels main_border_before = is_row_layout() ? box.computed_values().border_left().width : box.computed_values().border_top().width;
 
     CSSPixels main_border_after = is_row_layout() ? box.computed_values().border_right().width : box.computed_values().border_bottom().width;
 
     CSSPixels main_border_after = is_row_layout() ? box.computed_values().border_right().width : box.computed_values().border_bottom().width;
 
+    CSSPixels main_padding_before = is_row_layout() ? main_to_px(box.computed_values().padding().left()) : main_to_px(box.computed_values().padding().top());
 
+    CSSPixels main_padding_after = is_row_layout() ? main_to_px(box.computed_values().padding().right()) : main_to_px(box.computed_values().padding().bottom());
 
 
 
     switch (alignment_for_item(box)) {
 
     switch (alignment_for_item(box)) {
 
     case CSS::AlignItems::Baseline:
 
     case CSS::AlignItems::Baseline:
 
@@ -2172,12 +2180,12 @@ CSSPixelPoint FlexFormattingContext::calculate_static_position(Box const& box) c
 
     case CSS::JustifyContent::SpaceAround:
 
     case CSS::JustifyContent::SpaceAround:
 
     case CSS::JustifyContent::SpaceEvenly:
 
     case CSS::JustifyContent::SpaceEvenly:
 
         pack_from_end = false;
 
         pack_from_end = false;
 
-        main_offset = (inner_main_size(m_flex_container_state) - inner_main_size(box_state) - main_border_before - main_border_after) / 2;
 
+        main_offset = (inner_main_size(m_flex_container_state) - inner_main_size(box_state) - main_margin_before - main_margin_after - main_border_before - main_border_after - main_padding_before - main_padding_after) / 2;
 
         break;
 
         break;
 
     }
 
     }
 
 
 
     if (pack_from_end)
 
     if (pack_from_end)
 
-        main_offset += inner_main_size(m_flex_container_state) - inner_main_size(box_state) - main_border_before - main_border_after;
 
+        main_offset += inner_main_size(m_flex_container_state) - inner_main_size(box_state) - main_margin_before - main_margin_after - main_border_before - main_border_after - main_padding_before - main_padding_after;
 
 
 
     auto static_position_offset = is_row_layout() ? CSSPixelPoint { main_offset, cross_offset } : CSSPixelPoint { cross_offset, main_offset };
 
     auto static_position_offset = is_row_layout() ? CSSPixelPoint { main_offset, cross_offset } : CSSPixelPoint { cross_offset, main_offset };

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