Commit b32c8582 authored by David Grogan's avatar David Grogan Committed by Commit Bot

[LayoutNG] Make table captions calculate their own margins

Before this, auto margins were always resolved as 0

Cq-Include-Trybots: luci.chromium.try:linux_layout_tests_layout_ng
Change-Id: I38f45a656d993aa12ee5afff720d4db3239bbb45
Reviewed-on: https://chromium-review.googlesource.com/1220398
Commit-Queue: David Grogan <dgrogan@chromium.org>
Reviewed-by: default avatarMorten Stenshorne <mstensho@chromium.org>
Reviewed-by: default avatarChristian Biesinger <cbiesinger@chromium.org>
Cr-Commit-Position: refs/heads/master@{#594018}
parent a1615657
...@@ -497,7 +497,6 @@ crbug.com/591099 tables/mozilla/bugs/bug23235.html [ Failure ] ...@@ -497,7 +497,6 @@ crbug.com/591099 tables/mozilla/bugs/bug23235.html [ Failure ]
crbug.com/591099 tables/mozilla/bugs/bug2973.html [ Failure ] crbug.com/591099 tables/mozilla/bugs/bug2973.html [ Failure ]
crbug.com/591099 tables/mozilla/bugs/bug50695-2.html [ Failure ] crbug.com/591099 tables/mozilla/bugs/bug50695-2.html [ Failure ]
crbug.com/591099 tables/mozilla/bugs/bug55527.html [ Failure ] crbug.com/591099 tables/mozilla/bugs/bug55527.html [ Failure ]
crbug.com/591099 tables/mozilla_expected_failures/bugs/bug3166-16.html [ Failure ]
crbug.com/591099 transforms/3d/hit-testing/backface-no-transform-hit-test.html [ Failure ] crbug.com/591099 transforms/3d/hit-testing/backface-no-transform-hit-test.html [ Failure ]
crbug.com/591099 transforms/3d/point-mapping/3d-point-mapping-deep.html [ Failure ] crbug.com/591099 transforms/3d/point-mapping/3d-point-mapping-deep.html [ Failure ]
crbug.com/591099 transforms/3d/point-mapping/3d-point-mapping-origins.html [ Failure ] crbug.com/591099 transforms/3d/point-mapping/3d-point-mapping-origins.html [ Failure ]
......
<!DOCTYPE html>
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<link rel="author" title="David Grogan" href="dgrogan@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows">
<meta name="flags" content="" />
<meta name="assert" content="caption margins are resolved against table's height when table has vertical flow" />
<style>
x-table {
display: table;
width: 300px;
height: 200px;
writing-mode: vertical-lr;
outline: 2px dashed blue;
}
x-caption {
display: table-caption;
height: 50px;
width: 120px;
writing-mode: horizontal-tb;
outline: 1px solid black;
}
</style>
<x-table>
<x-caption id=captionMarginLeft style="margin-left:20%">caption</x-caption>
</x-table>
<x-table>
<x-caption id=captionMarginTop style="margin:auto 0">caption</x-caption>
</x-table>
<p>This is a script test because of how ridiculously differently the current
engines render these cases.</p>
<script>
let caption_margin_left = getComputedStyle(id=captionMarginLeft).marginLeft;
test(() => assert_equals(caption_margin_left, "40px"), "Caption percent margins are resolved against table's height for vertical-lr tables");
let caption_margin_top = getComputedStyle(captionMarginTop).marginTop;
test(() => assert_equals(caption_margin_top, "75px"), "Caption with auto top/bottom margins is centered vertically for vertical-lr tables");
</script>
<!DOCTYPE html>
<script src='../../resources/testharness.js'></script>
<script src='../../resources/testharnessreport.js'></script>
<style>
body {
margin: 0px;
}
x-table {
display: table;
width: 300px;
outline: 2px dotted blue;
}
x-caption {
display: table-caption;
margin-left: 20px;
outline: 1px solid black;
}
</style>
<p>When implementing table captions in NG, there was no goal to change behavior.
This is a smoke test to ensure NG matches legacy when table captions's direction
differ from their containing tables. This exact behavior can change when we
implement table layout in NG, and probably should because Edge/FF treat captions
differently in general.</p>
<x-table>
<x-caption dir=rtl>Lorem ipsum dolor</x-caption>
</x-table>
<x-table dir=rtl>
<x-caption dir=ltr>Lorem ipsum dolor</x-caption>
</x-table>
<script>
let captions = document.querySelectorAll("x-caption")
let caption_num = 0;
let expected_x = [0, 20];
for (let i of captions) {
let rect = i.getBoundingClientRect();
test(() => assert_equals(rect.x, expected_x[caption_num++]), "Test caption location " + caption_num);
}
</script>
...@@ -6,8 +6,10 @@ ...@@ -6,8 +6,10 @@
#include "third_party/blink/renderer/core/layout/layout_analyzer.h" #include "third_party/blink/renderer/core/layout/layout_analyzer.h"
#include "third_party/blink/renderer/core/layout/ng/ng_block_node.h" #include "third_party/blink/renderer/core/layout/ng/ng_block_node.h"
#include "third_party/blink/renderer/core/layout/ng/ng_box_fragment.h"
#include "third_party/blink/renderer/core/layout/ng/ng_constraint_space.h" #include "third_party/blink/renderer/core/layout/ng/ng_constraint_space.h"
#include "third_party/blink/renderer/core/layout/ng/ng_layout_result.h" #include "third_party/blink/renderer/core/layout/ng/ng_layout_result.h"
#include "third_party/blink/renderer/core/layout/ng/ng_length_utils.h"
#include "third_party/blink/renderer/core/layout/ng/ng_out_of_flow_positioned_descendant.h" #include "third_party/blink/renderer/core/layout/ng/ng_out_of_flow_positioned_descendant.h"
#include "third_party/blink/renderer/core/layout/ng/ng_physical_box_fragment.h" #include "third_party/blink/renderer/core/layout/ng/ng_physical_box_fragment.h"
...@@ -16,6 +18,39 @@ namespace blink { ...@@ -16,6 +18,39 @@ namespace blink {
LayoutNGTableCaption::LayoutNGTableCaption(Element* element) LayoutNGTableCaption::LayoutNGTableCaption(Element* element)
: LayoutNGMixin<LayoutTableCaption>(element) {} : LayoutNGMixin<LayoutTableCaption>(element) {}
void LayoutNGTableCaption::CalculateAndSetMargins(
const NGConstraintSpace& constraint_space,
const NGPhysicalFragment& physical_fragment) {
const ComputedStyle& containing_block_style = ContainingBlock()->StyleRef();
NGBoxFragment box_fragment(containing_block_style.GetWritingMode(),
containing_block_style.Direction(),
ToNGPhysicalBoxFragment(physical_fragment));
NGPhysicalBoxStrut physical_margins =
ComputePhysicalMargins(constraint_space, StyleRef());
NGBoxStrut logical_margins =
physical_margins.ConvertToLogical(containing_block_style.GetWritingMode(),
containing_block_style.Direction());
LayoutUnit caption_inline_size_in_cb_writing_mode = box_fragment.InlineSize();
LayoutUnit available_inline_size_in_cb_writing_mode =
constraint_space.AvailableSize()
.ConvertToPhysical(constraint_space.GetWritingMode())
.ConvertToLogical(containing_block_style.GetWritingMode())
.inline_size;
ResolveInlineMargins(StyleRef(), containing_block_style,
available_inline_size_in_cb_writing_mode,
caption_inline_size_in_cb_writing_mode,
&logical_margins);
SetMargin(
logical_margins.ConvertToPhysical(containing_block_style.GetWritingMode(),
containing_block_style.Direction()));
}
void LayoutNGTableCaption::UpdateBlockLayout(bool relayout_children) { void LayoutNGTableCaption::UpdateBlockLayout(bool relayout_children) {
LayoutAnalyzer::BlockScope analyzer(*this); LayoutAnalyzer::BlockScope analyzer(*this);
...@@ -27,6 +62,8 @@ void LayoutNGTableCaption::UpdateBlockLayout(bool relayout_children) { ...@@ -27,6 +62,8 @@ void LayoutNGTableCaption::UpdateBlockLayout(bool relayout_children) {
scoped_refptr<NGLayoutResult> result = scoped_refptr<NGLayoutResult> result =
NGBlockNode(this).Layout(constraint_space); NGBlockNode(this).Layout(constraint_space);
CalculateAndSetMargins(constraint_space, *result->PhysicalFragment());
// Tell legacy layout there were abspos descendents we couldn't place. We know // Tell legacy layout there were abspos descendents we couldn't place. We know
// we have to pass up to legacy here because this method is legacy's entry // we have to pass up to legacy here because this method is legacy's entry
// point to LayoutNG. If our parent were LayoutNG, it wouldn't have called // point to LayoutNG. If our parent were LayoutNG, it wouldn't have called
......
...@@ -19,6 +19,10 @@ class CORE_EXPORT LayoutNGTableCaption final ...@@ -19,6 +19,10 @@ class CORE_EXPORT LayoutNGTableCaption final
void UpdateBlockLayout(bool relayout_children) override; void UpdateBlockLayout(bool relayout_children) override;
const char* GetName() const override { return "LayoutNGTableCaption"; } const char* GetName() const override { return "LayoutNGTableCaption"; }
private:
void CalculateAndSetMargins(const NGConstraintSpace&,
const NGPhysicalFragment&);
}; };
} // namespace blink } // namespace blink
......
...@@ -210,6 +210,8 @@ CORE_EXPORT NGLineBoxStrut ComputeLinePadding(const NGConstraintSpace&, ...@@ -210,6 +210,8 @@ CORE_EXPORT NGLineBoxStrut ComputeLinePadding(const NGConstraintSpace&,
// values and over-constrainedness. This uses the available size from the // values and over-constrainedness. This uses the available size from the
// constraint space and inline size to compute the margins that are auto, if // constraint space and inline size to compute the margins that are auto, if
// any, and adjusts the given NGBoxStrut accordingly. // any, and adjusts the given NGBoxStrut accordingly.
// available_inline_size, inline_size, and margins are all in the
// containing_block's writing mode.
CORE_EXPORT void ResolveInlineMargins( CORE_EXPORT void ResolveInlineMargins(
const ComputedStyle& child_style, const ComputedStyle& child_style,
const ComputedStyle& containing_block_style, const ComputedStyle& containing_block_style,
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment