mirror of
https://github.com/servo/servo.git
synced 2025-08-03 20:50:07 +01:00
For inline-block correctly use min-width
With inline-block elements set the width to max(min width, specified width) instead of only using the specified width.
This commit is contained in:
parent
2f3697f5f3
commit
a35ffe1c6e
4 changed files with 59 additions and 5 deletions
|
@ -982,10 +982,11 @@ impl Fragment {
|
|||
fn style_specified_intrinsic_inline_size(&self) -> IntrinsicISizesContribution {
|
||||
let flags = self.quantities_included_in_intrinsic_inline_size();
|
||||
let style = self.style();
|
||||
let specified = if flags.contains(INTRINSIC_INLINE_SIZE_INCLUDES_SPECIFIED) {
|
||||
MaybeAuto::from_style(style.content_inline_size(), Au(0)).specified_or_zero()
|
||||
let (min_inline_size, specified) = if flags.contains(INTRINSIC_INLINE_SIZE_INCLUDES_SPECIFIED) {
|
||||
(model::specified(style.min_inline_size(), Au(0)),
|
||||
MaybeAuto::from_style(style.content_inline_size(), Au(0)).specified_or_zero())
|
||||
} else {
|
||||
Au(0)
|
||||
(Au(0), Au(0))
|
||||
};
|
||||
|
||||
// FIXME(#2261, pcwalton): This won't work well for inlines: is this OK?
|
||||
|
@ -993,7 +994,7 @@ impl Fragment {
|
|||
|
||||
IntrinsicISizesContribution {
|
||||
content_intrinsic_sizes: IntrinsicISizes {
|
||||
minimum_inline_size: specified,
|
||||
minimum_inline_size: min_inline_size,
|
||||
preferred_inline_size: specified,
|
||||
},
|
||||
surrounding_size: surrounding_inline_size,
|
||||
|
@ -1721,7 +1722,8 @@ impl Fragment {
|
|||
SpecificFragmentInfo::InlineBlock(ref mut info) => {
|
||||
let block_flow = info.flow_ref.as_block();
|
||||
self.border_box.size.inline =
|
||||
block_flow.base.intrinsic_inline_sizes.preferred_inline_size;
|
||||
max(block_flow.base.intrinsic_inline_sizes.minimum_inline_size,
|
||||
block_flow.base.intrinsic_inline_sizes.preferred_inline_size);
|
||||
block_flow.base.block_container_inline_size = self.border_box.size.inline;
|
||||
}
|
||||
SpecificFragmentInfo::ScannedText(ref info) => {
|
||||
|
|
|
@ -156,6 +156,7 @@ fragment=top != ../html/acid2.html acid2_ref.html
|
|||
== img_block_display_a.html img_block_display_ref.html
|
||||
== after_block_iteration.html after_block_iteration_ref.html
|
||||
== inline_block_percentage_height_a.html inline_block_percentage_height_ref.html
|
||||
== inline_block_min_width.html inline_block_min_width_ref.html
|
||||
== percentage_height_float_a.html percentage_height_float_ref.html
|
||||
== img_block_maxwidth_a.html img_block_maxwidth_ref.html
|
||||
== img_block_maxwidth_b.html img_block_maxwidth_ref.html
|
||||
|
|
26
tests/ref/inline_block_min_width.html
Normal file
26
tests/ref/inline_block_min_width.html
Normal file
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
div {
|
||||
display: inline-block;
|
||||
min-width: 200px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.red {
|
||||
background-color: red;
|
||||
}
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="red"></div><div class="green"></div>
|
||||
</body>
|
||||
</html>
|
25
tests/ref/inline_block_min_width_ref.html
Normal file
25
tests/ref/inline_block_min_width_ref.html
Normal file
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
div {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
}
|
||||
.red {
|
||||
background-color: red;
|
||||
}
|
||||
.green {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="red"></div><div class="green"></div>
|
||||
</body>
|
||||
</html>
|
Loading…
Add table
Add a link
Reference in a new issue