mirror of
https://github.com/servo/servo.git
synced 2025-09-18 19:08:22 +01:00
layout: Make lines non-phantom if they have inline padding/border/margin (#39058)
According to https://drafts.csswg.org/css-inline/#invisible-line-boxes, if a line box contains non-zero inline-axis margins, padding or borders, then it can't be phantom. Therefore, this patch makes adds a `has_inline_pbm` flag to the line. Note that we can't use the `has_content` flag, because that would add a soft wrap opportunity between the padding/border/margin and the first content of the line. The patch also renames `InlineFormattingContext::had_inflow_content` to `has_line_boxes`, which is what we care about for collapsing margins through. Testing: Adding new tests Fixes: #39057 Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau
GitHub
parent
4451ce0ef1
commit
18b3e5fe21
8 changed files with 416 additions and 15 deletions
|
|
@ -333,6 +333,10 @@ struct LineUnderConstruction {
|
|||
/// indicates that the next run that exceeds the line length can cause a line break.
|
||||
has_content: bool,
|
||||
|
||||
/// Whether any active linebox has added some inline-axis padding, border or margin
|
||||
/// to this line.
|
||||
has_inline_pbm: bool,
|
||||
|
||||
/// Whether or not there are floats that did not fit on the current line. Before
|
||||
/// the [`LineItem`]s of this line are laid out, these floats will need to be
|
||||
/// placed directly below this line, but still as children of this line's Fragments.
|
||||
|
|
@ -356,6 +360,7 @@ impl LineUnderConstruction {
|
|||
start_position,
|
||||
max_block_size: LineBlockSizes::zero(),
|
||||
has_content: false,
|
||||
has_inline_pbm: false,
|
||||
has_floats_waiting_to_be_placed: false,
|
||||
placement_among_floats: OnceCell::new(),
|
||||
line_items: Vec::new(),
|
||||
|
|
@ -558,6 +563,10 @@ struct UnbreakableSegmentUnderConstruction {
|
|||
/// a line break.
|
||||
has_content: bool,
|
||||
|
||||
/// Whether any active linebox has added some inline-axis padding, border or margin
|
||||
/// to this line segment.
|
||||
has_inline_pbm: bool,
|
||||
|
||||
/// The inline size of any trailing whitespace in this segment.
|
||||
trailing_whitespace_size: Au,
|
||||
}
|
||||
|
|
@ -574,6 +583,7 @@ impl UnbreakableSegmentUnderConstruction {
|
|||
line_items: Vec::new(),
|
||||
inline_box_hierarchy_depth: None,
|
||||
has_content: false,
|
||||
has_inline_pbm: false,
|
||||
trailing_whitespace_size: Au::zero(),
|
||||
}
|
||||
}
|
||||
|
|
@ -732,8 +742,9 @@ pub(super) struct InlineFormattingContextLayout<'layout_data> {
|
|||
/// is encountered.
|
||||
pub have_deferred_soft_wrap_opportunity: bool,
|
||||
|
||||
/// Whether or not this InlineFormattingContext has processed any in flow content at all.
|
||||
had_inflow_content: bool,
|
||||
/// Whether or not this InlineFormattingContext contains line boxes, excluding
|
||||
/// [phantom line boxes](https://drafts.csswg.org/css-inline-3/#phantom-line-box).
|
||||
has_line_boxes: bool,
|
||||
|
||||
/// Whether or not the layout of this InlineFormattingContext depends on the block size
|
||||
/// of its container for the purposes of flexbox layout.
|
||||
|
|
@ -837,9 +848,15 @@ impl InlineFormattingContextLayout<'_> {
|
|||
}
|
||||
|
||||
if inline_box.is_first_split {
|
||||
self.current_line_segment.inline_size += inline_box_state.pbm.padding.inline_start +
|
||||
inline_box_state.pbm.border.inline_start +
|
||||
inline_box_state.pbm.margin.inline_start.auto_is(Au::zero);
|
||||
let padding = inline_box_state.pbm.padding.inline_start;
|
||||
let border = inline_box_state.pbm.border.inline_start;
|
||||
let margin = inline_box_state.pbm.margin.inline_start.auto_is(Au::zero);
|
||||
// We can't just check if the sum is zero because the margin can be negative,
|
||||
// we need to check the values separately.
|
||||
if !padding.is_zero() || !border.is_zero() || !margin.is_zero() {
|
||||
self.current_line_segment.has_inline_pbm = true;
|
||||
}
|
||||
self.current_line_segment.inline_size += padding + border + margin;
|
||||
self.current_line_segment
|
||||
.line_items
|
||||
.push(LineItem::InlineStartBoxPaddingBorderMargin(
|
||||
|
|
@ -881,10 +898,15 @@ impl InlineFormattingContextLayout<'_> {
|
|||
}
|
||||
|
||||
if inline_box_state.is_last_fragment {
|
||||
let pbm_end = inline_box_state.pbm.padding.inline_end +
|
||||
inline_box_state.pbm.border.inline_end +
|
||||
inline_box_state.pbm.margin.inline_end.auto_is(Au::zero);
|
||||
self.current_line_segment.inline_size += pbm_end;
|
||||
let padding = inline_box_state.pbm.padding.inline_end;
|
||||
let border = inline_box_state.pbm.border.inline_end;
|
||||
let margin = inline_box_state.pbm.margin.inline_end.auto_is(Au::zero);
|
||||
// We can't just check if the sum is zero because the margin can be negative,
|
||||
// we need to check the values separately.
|
||||
if !padding.is_zero() || !border.is_zero() || !margin.is_zero() {
|
||||
self.current_line_segment.has_inline_pbm = true;
|
||||
}
|
||||
self.current_line_segment.inline_size += padding + border + margin;
|
||||
self.current_line_segment
|
||||
.line_items
|
||||
.push(LineItem::InlineEndBoxPaddingBorderMargin(
|
||||
|
|
@ -984,10 +1006,16 @@ impl InlineFormattingContextLayout<'_> {
|
|||
justification_adjustment,
|
||||
);
|
||||
|
||||
if line_to_layout.has_content {
|
||||
// https://drafts.csswg.org/css-inline-3/#invisible-line-boxes
|
||||
// > Line boxes that contain no text, no preserved white space, no inline boxes with non-zero
|
||||
// > inline-axis margins, padding, or borders, and no other in-flow content (such as atomic
|
||||
// > inlines or ruby annotations), and do not end with a forced line break are phantom line boxes.
|
||||
// > Such boxes [...] must be treated as not existing for any other layout or rendering purpose.
|
||||
if line_to_layout.has_content || line_to_layout.has_inline_pbm {
|
||||
let baseline = baseline_offset + block_start_position;
|
||||
self.baselines.first.get_or_insert(baseline);
|
||||
self.baselines.last = Some(baseline);
|
||||
self.has_line_boxes = true;
|
||||
}
|
||||
|
||||
// If the line doesn't have any fragments, we don't need to add a containing fragment for it.
|
||||
|
|
@ -1350,8 +1378,6 @@ impl InlineFormattingContextLayout<'_> {
|
|||
SegmentContentFlags::empty(),
|
||||
);
|
||||
}
|
||||
|
||||
self.had_inflow_content = true;
|
||||
}
|
||||
|
||||
pub(super) fn possibly_flush_deferred_forced_line_break(&mut self) {
|
||||
|
|
@ -1486,7 +1512,6 @@ impl InlineFormattingContextLayout<'_> {
|
|||
}
|
||||
if !flags.is_collapsible_whitespace() {
|
||||
self.current_line_segment.has_content = true;
|
||||
self.had_inflow_content = true;
|
||||
}
|
||||
|
||||
// This may or may not include the size of the strut depending on the quirks mode setting.
|
||||
|
|
@ -1601,6 +1626,7 @@ impl InlineFormattingContextLayout<'_> {
|
|||
|
||||
self.current_line.line_items.extend(segment_items);
|
||||
self.current_line.has_content |= self.current_line_segment.has_content;
|
||||
self.current_line.has_inline_pbm |= self.current_line_segment.has_inline_pbm;
|
||||
|
||||
self.current_line_segment.reset();
|
||||
}
|
||||
|
|
@ -1792,7 +1818,7 @@ impl InlineFormattingContext {
|
|||
linebreak_before_new_content: false,
|
||||
deferred_br_clear: Clear::None,
|
||||
have_deferred_soft_wrap_opportunity: false,
|
||||
had_inflow_content: false,
|
||||
has_line_boxes: false,
|
||||
depends_on_block_constraints: false,
|
||||
white_space_collapse: style_text.white_space_collapse,
|
||||
text_wrap_mode: style_text.text_wrap_mode,
|
||||
|
|
@ -1846,7 +1872,7 @@ impl InlineFormattingContext {
|
|||
|
||||
let mut collapsible_margins_in_children = CollapsedBlockMargins::zero();
|
||||
let content_block_size = layout.current_line.start_position.block;
|
||||
collapsible_margins_in_children.collapsed_through = !layout.had_inflow_content &&
|
||||
collapsible_margins_in_children.collapsed_through = !layout.has_line_boxes &&
|
||||
content_block_size.is_zero() &&
|
||||
collapsible_with_parent_start_margin.0;
|
||||
|
||||
|
|
|
|||
80
tests/wpt/meta/MANIFEST.json
vendored
80
tests/wpt/meta/MANIFEST.json
vendored
|
|
@ -210635,6 +210635,86 @@
|
|||
]
|
||||
]
|
||||
},
|
||||
"model": {
|
||||
"phantom-line-boxes-001.html": [
|
||||
"da0e9095b7a37e6b4a897269e753175c68039a34",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/css/reference/ref-filled-green-200px-square.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"phantom-line-boxes-002.html": [
|
||||
"c180a9bf3b5c4cda3e281d84bb36b6d8b2bae91c",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/css/reference/ref-filled-green-200px-square.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"phantom-line-boxes-003.html": [
|
||||
"633aa9dfba8d81d515c807c66074b77c73dbfee4",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/css/reference/ref-filled-green-200px-square.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"phantom-line-boxes-004.html": [
|
||||
"0b4f7737ee21b4490e951ce1677772b9d1ae2d71",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/css/reference/ref-filled-green-200px-square.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"phantom-line-boxes-005.html": [
|
||||
"dd2620294412fab68af218f30e470a3003255dd4",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/css/reference/ref-filled-green-200px-square.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"phantom-line-boxes-006.html": [
|
||||
"7b5a43cbf811680087429abe5b0236d1221f28d4",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/css/reference/ref-filled-green-200px-square.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
]
|
||||
},
|
||||
"text-box-trim": {
|
||||
"border-padding-001.html": [
|
||||
"9c25c42a1def684b364e98dc9d6233cd5c700519",
|
||||
|
|
|
|||
49
tests/wpt/tests/css/css-inline/model/phantom-line-boxes-001.html
vendored
Normal file
49
tests/wpt/tests/css/css-inline/model/phantom-line-boxes-001.html
vendored
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Inline Layout Model: Phantom Line Boxes</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#invisible-line-boxes">
|
||||
<link rel="help" href="https://drafts.csswg.org/css2/#collapsing-margins">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9344">
|
||||
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
|
||||
<meta name="assert" content="Non-zero inline-axis margins, padding, or borders
|
||||
prevent a line box from becoming a phantom line box, and therefore prevent
|
||||
the inline formatting context from collapsing margins through.
|
||||
This test checks non-zero padding.">
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
float: left;
|
||||
width: 50px;
|
||||
background: red;
|
||||
}
|
||||
.wrapper.phantom {
|
||||
background: green;
|
||||
}
|
||||
.wrapper > div {
|
||||
line-height: 0;
|
||||
background: green;
|
||||
}
|
||||
.wrapper.phantom > div {
|
||||
background: red
|
||||
}
|
||||
.wrapper > div::after {
|
||||
content: "";
|
||||
display: flow-root;
|
||||
margin-top: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div class="wrapper phantom">
|
||||
<div><span style="padding-top: 1px"></span></div>
|
||||
</div>
|
||||
<div class="wrapper phantom">
|
||||
<div><span style="padding-bottom: 1px"></span></div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div><span style="padding-left: 1px"></span></div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div><span style="padding-right: 1px"></span></div>
|
||||
</div>
|
||||
49
tests/wpt/tests/css/css-inline/model/phantom-line-boxes-002.html
vendored
Normal file
49
tests/wpt/tests/css/css-inline/model/phantom-line-boxes-002.html
vendored
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Inline Layout Model: Phantom Line Boxes</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#invisible-line-boxes">
|
||||
<link rel="help" href="https://drafts.csswg.org/css2/#collapsing-margins">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9344">
|
||||
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
|
||||
<meta name="assert" content="Non-zero inline-axis margins, padding, or borders
|
||||
prevent a line box from becoming a phantom line box, and therefore prevent
|
||||
the inline formatting context from collapsing margins through.
|
||||
This test checks non-zero borders.">
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
float: left;
|
||||
width: 50px;
|
||||
background: red;
|
||||
}
|
||||
.wrapper.phantom {
|
||||
background: green;
|
||||
}
|
||||
.wrapper > div {
|
||||
line-height: 0;
|
||||
background: green;
|
||||
}
|
||||
.wrapper.phantom > div {
|
||||
background: red
|
||||
}
|
||||
.wrapper > div::after {
|
||||
content: "";
|
||||
display: flow-root;
|
||||
margin-top: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div class="wrapper phantom">
|
||||
<div><span style="border-top: 1px solid transparent"></span></div>
|
||||
</div>
|
||||
<div class="wrapper phantom">
|
||||
<div><span style="border-bottom: 1px solid transparent"></span></div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div><span style="border-left: 1px solid transparent"></span></div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div><span style="border-right: 1px solid transparent"></span></div>
|
||||
</div>
|
||||
49
tests/wpt/tests/css/css-inline/model/phantom-line-boxes-003.html
vendored
Normal file
49
tests/wpt/tests/css/css-inline/model/phantom-line-boxes-003.html
vendored
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Inline Layout Model: Phantom Line Boxes</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#invisible-line-boxes">
|
||||
<link rel="help" href="https://drafts.csswg.org/css2/#collapsing-margins">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9344">
|
||||
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
|
||||
<meta name="assert" content="Non-zero inline-axis margins, padding, or borders
|
||||
prevent a line box from becoming a phantom line box, and therefore prevent
|
||||
the inline formatting context from collapsing margins through.
|
||||
This test checks positive margins.">
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
float: left;
|
||||
width: 50px;
|
||||
background: red;
|
||||
}
|
||||
.wrapper.phantom {
|
||||
background: green;
|
||||
}
|
||||
.wrapper > div {
|
||||
line-height: 0;
|
||||
background: green;
|
||||
}
|
||||
.wrapper.phantom > div {
|
||||
background: red
|
||||
}
|
||||
.wrapper > div::after {
|
||||
content: "";
|
||||
display: flow-root;
|
||||
margin-top: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div class="wrapper phantom">
|
||||
<div><span style="margin-top: 1px"></span></div>
|
||||
</div>
|
||||
<div class="wrapper phantom">
|
||||
<div><span style="margin-bottom: 1px"></span></div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div><span style="margin-left: 1px"></span></div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div><span style="margin-right: 1px"></span></div>
|
||||
</div>
|
||||
49
tests/wpt/tests/css/css-inline/model/phantom-line-boxes-004.html
vendored
Normal file
49
tests/wpt/tests/css/css-inline/model/phantom-line-boxes-004.html
vendored
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Inline Layout Model: Phantom Line Boxes</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#invisible-line-boxes">
|
||||
<link rel="help" href="https://drafts.csswg.org/css2/#collapsing-margins">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9344">
|
||||
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
|
||||
<meta name="assert" content="Non-zero inline-axis margins, padding, or borders
|
||||
prevent a line box from becoming a phantom line box, and therefore prevent
|
||||
the inline formatting context from collapsing margins through.
|
||||
This test checks negative margins.">
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
float: left;
|
||||
width: 50px;
|
||||
background: red;
|
||||
}
|
||||
.wrapper.phantom {
|
||||
background: green;
|
||||
}
|
||||
.wrapper > div {
|
||||
line-height: 0;
|
||||
background: green;
|
||||
}
|
||||
.wrapper.phantom > div {
|
||||
background: red
|
||||
}
|
||||
.wrapper > div::after {
|
||||
content: "";
|
||||
display: flow-root;
|
||||
margin-top: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div class="wrapper phantom">
|
||||
<div><span style="margin-top: -1px"></span></div>
|
||||
</div>
|
||||
<div class="wrapper phantom">
|
||||
<div><span style="margin-bottom: -1px"></span></div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div><span style="margin-left: -1px"></span></div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div><span style="margin-right: -1px"></span></div>
|
||||
</div>
|
||||
49
tests/wpt/tests/css/css-inline/model/phantom-line-boxes-005.html
vendored
Normal file
49
tests/wpt/tests/css/css-inline/model/phantom-line-boxes-005.html
vendored
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Inline Layout Model: Phantom Line Boxes</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#invisible-line-boxes">
|
||||
<link rel="help" href="https://drafts.csswg.org/css2/#collapsing-margins">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9344">
|
||||
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
|
||||
<meta name="assert" content="Non-zero inline-axis margins, padding, or borders
|
||||
prevent a line box from becoming a phantom line box, and therefore prevent
|
||||
the inline formatting context from collapsing margins through.
|
||||
This test checks non-zero margins that add up to zero in that axis.">
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
float: left;
|
||||
width: 50px;
|
||||
background: red;
|
||||
}
|
||||
.wrapper.phantom {
|
||||
background: green;
|
||||
}
|
||||
.wrapper > div {
|
||||
line-height: 0;
|
||||
background: green;
|
||||
}
|
||||
.wrapper.phantom > div {
|
||||
background: red
|
||||
}
|
||||
.wrapper > div::after {
|
||||
content: "";
|
||||
display: flow-root;
|
||||
margin-top: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div class="wrapper phantom">
|
||||
<div><span style="margin-top: 1px; margin-bottom: -1px"></span></div>
|
||||
</div>
|
||||
<div class="wrapper phantom">
|
||||
<div><span style="margin-top: -1px; margin-bottom: 1px"></span></div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div><span style="margin-left: 1px; margin-right: -1px"></span></div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div><span style="margin-left: -1px; margin-right: 1px"></span></div>
|
||||
</div>
|
||||
50
tests/wpt/tests/css/css-inline/model/phantom-line-boxes-006.html
vendored
Normal file
50
tests/wpt/tests/css/css-inline/model/phantom-line-boxes-006.html
vendored
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Inline Layout Model: Phantom Line Boxes</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-inline/#invisible-line-boxes">
|
||||
<link rel="help" href="https://drafts.csswg.org/css2/#collapsing-margins">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9344">
|
||||
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
|
||||
<meta name="assert" content="Non-zero inline-axis margins, padding, or borders
|
||||
prevent a line box from becoming a phantom line box, and therefore prevent
|
||||
the inline formatting context from collapsing margins through.
|
||||
This test checks non-zero margins and padding in the same box side, which
|
||||
add up to zero.">
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
float: left;
|
||||
width: 50px;
|
||||
background: red;
|
||||
}
|
||||
.wrapper.phantom {
|
||||
background: green;
|
||||
}
|
||||
.wrapper > div {
|
||||
line-height: 0;
|
||||
background: green;
|
||||
}
|
||||
.wrapper.phantom > div {
|
||||
background: red
|
||||
}
|
||||
.wrapper > div::after {
|
||||
content: "";
|
||||
display: flow-root;
|
||||
margin-top: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div class="wrapper phantom">
|
||||
<div><span style="padding-top: 1px; margin-top: -1px"></span></div>
|
||||
</div>
|
||||
<div class="wrapper phantom">
|
||||
<div><span style="padding-bottom: 1px; padding-bottom: -1px"></span></div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div><span style="padding-left: 1px; margin-left: -1px"></span></div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div><span style="padding-right: 1px; margin-right: -1px"></span></div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue