Browse Source

LibWeb: Exclude table-wrapper margins from table available width

Table should not take up more width than is available inside wrapper
after margins are taken in account.
Aliaksandr Kalenik 2 years ago
parent
commit
09d698e0a0

+ 12 - 0
Tests/LibWeb/Layout/expected/table/auto-margins.txt

@@ -0,0 +1,12 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x33.46875 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x17.46875 children: not-inline
+      BlockContainer <div.wrapper> at (8,8) content-size 784x17.46875 children: not-inline
+        TableWrapper <(anonymous)> at (235.265625,8) content-size 329.46875x17.46875 [BFC] children: not-inline
+          TableBox <div.box> at (235.265625,8) content-size 329.46875x17.46875 [TFC] children: not-inline
+            TableRowBox <(anonymous)> at (235.265625,8) content-size 329.46875x17.46875 children: not-inline
+              TableCellBox <div.cell> at (235.265625,8) content-size 329.46875x17.46875 [BFC] children: inline
+                line 0 width: 329.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+                  frag 0 from TextNode start: 0, length: 34, rect: [235.265625,8 329.46875x17.46875]
+                    "DaTa DisplaYiNg CSS WeBpaGE ScReEn"
+                TextNode <#text>

+ 15 - 0
Tests/LibWeb/Layout/expected/table/fixed-margins.txt

@@ -0,0 +1,15 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x51.40625 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x35.40625 children: not-inline
+      BlockContainer <div.wrapper> at (8,8) content-size 784x35.40625 children: not-inline
+        TableWrapper <(anonymous)> at (108,8) content-size 584x35.40625 [BFC] children: not-inline
+          TableBox <div.box> at (108,8) content-size 584x35.40625 [TFC] children: not-inline
+            TableRowBox <(anonymous)> at (108,8) content-size 584x35.40625 children: not-inline
+              TableCellBox <div.cell> at (108,8) content-size 584x35.40625 [BFC] children: inline
+                line 0 width: 569.859375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+                  frag 0 from TextNode start: 0, length: 58, rect: [108,8 569.859375x17.46875]
+                    "DaTa DisplaYiNg CSS WeBpaGE ScReEn OF aR AddITioN COmmOnLY"
+                line 1 width: 399.9375, height: 17.9375, bottom: 35.40625, baseline: 13.53125
+                  frag 0 from TextNode start: 59, length: 40, rect: [108,25 399.9375x17.46875]
+                    "To AdJuSt PRiCiNG sTYLiNG ceLL oF TAbLeS"
+                TextNode <#text>

+ 22 - 0
Tests/LibWeb/Layout/input/table/auto-margins.html

@@ -0,0 +1,22 @@
+<style>
+* {
+    font-family: 'SerenitySans';
+}
+
+.wrapper {
+    background-color: mediumturquoise;
+}
+
+.box {
+    display: table;
+    background-color: orange;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.cell {
+    display: table-cell;
+}
+</style>
+<div class="wrapper"><div class="box"><div class="cell">DaTa DisplaYiNg CSS WeBpaGE ScReEn 
+</div></div></div>

+ 22 - 0
Tests/LibWeb/Layout/input/table/fixed-margins.html

@@ -0,0 +1,22 @@
+<style>
+* {
+    font-family: 'SerenitySans';
+}
+
+.wrapper {
+    background-color: mediumturquoise;
+}
+
+.box {
+    display: table;
+    background-color: orange;
+    margin-left: 100px;
+    margin-right: 100px;
+}
+
+.cell {
+    display: table-cell;
+}
+  </style>
+  <div class="wrapper"><div class="box"><div class="cell">DaTa DisplaYiNg CSS WeBpaGE ScReEn OF aR AddITioN COmmOnLY To AdJuSt PRiCiNG sTYLiNG ceLL oF TAbLeS  
+  </div></div></div>

+ 23 - 1
Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp

@@ -342,12 +342,34 @@ CSSPixels BlockFormattingContext::compute_width_for_table_wrapper(Box const& box
 {
     // 17.5.2
     // Table wrapper width should be equal to width of table box it contains
+
+    auto const& computed_values = box.computed_values();
+
+    auto width_of_containing_block = available_space.width.to_px();
+    auto width_of_containing_block_as_length_for_resolve = available_space.width.is_definite() ? CSS::Length::make_px(width_of_containing_block) : CSS::Length::make_px(0);
+
+    auto zero_value = CSS::Length::make_px(0);
+
+    auto margin_left = computed_values.margin().left().resolved(box, width_of_containing_block_as_length_for_resolve).resolved(box);
+    auto margin_right = computed_values.margin().right().resolved(box, width_of_containing_block_as_length_for_resolve).resolved(box);
+
+    // If 'margin-left', or 'margin-right' are computed as 'auto', their used value is '0'.
+    if (margin_left.is_auto())
+        margin_left = zero_value;
+    if (margin_right.is_auto())
+        margin_right = zero_value;
+
+    // table-wrapper can't have borders or paddings but it might have margin taken from table-root.
+    auto available_width = width_of_containing_block - margin_left.to_px(box) - margin_right.to_px(box);
+
     LayoutState throwaway_state(&m_state);
     auto context = create_independent_formatting_context_if_needed(throwaway_state, box);
     VERIFY(context);
     context->run(box, LayoutMode::IntrinsicSizing, m_state.get(box).available_inner_space_or_constraints_from(available_space));
     auto const* table_box = box.first_child_of_type<TableBox>();
-    return throwaway_state.get(*table_box).content_width();
+
+    auto table_used_width = throwaway_state.get(*table_box).content_width();
+    return table_used_width > available_width ? available_width : table_used_width;
 }
 
 void BlockFormattingContext::compute_height(Box const& box, AvailableSpace const& available_space)