Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-05 13:40:08 +01:00
Code Issues Projects Releases Packages Wiki Activity

For inline-block correctly use min-width

Browse source 
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:
Bryan Bell 2015-03-02 20:39:04 -08:00
parent 2f3697f5f3
commit a35ffe1c6e
4 changed files with 59 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

12
components/layout/fragment.rs
View file

@ -982,10 +982,11 @@ impl Fragment {
fn style_specified_intrinsic_inline_size(&self) -> IntrinsicISizesContribution { fn style_specified_intrinsic_inline_size(&self) -> IntrinsicISizesContribution {
let flags = self.quantities_included_in_intrinsic_inline_size(); let flags = self.quantities_included_in_intrinsic_inline_size();
let style = self.style(); let style = self.style();
let specified = if flags.contains(INTRINSIC_INLINE_SIZE_INCLUDES_SPECIFIED) { let (min_inline_size, specified) = if flags.contains(INTRINSIC_INLINE_SIZE_INCLUDES_SPECIFIED) {
MaybeAuto::from_style(style.content_inline_size(), Au(0)).specified_or_zero() (model::specified(style.min_inline_size(), Au(0)),
MaybeAuto::from_style(style.content_inline_size(), Au(0)).specified_or_zero())
} else { } else {
Au(0) (Au(0), Au(0))
}; };
// FIXME(#2261, pcwalton): This won't work well for inlines: is this OK? // FIXME(#2261, pcwalton): This won't work well for inlines: is this OK?
@ -993,7 +994,7 @@ impl Fragment {
IntrinsicISizesContribution { IntrinsicISizesContribution {
content_intrinsic_sizes: IntrinsicISizes { content_intrinsic_sizes: IntrinsicISizes {
minimum_inline_size: specified, minimum_inline_size: min_inline_size,
preferred_inline_size: specified, preferred_inline_size: specified,
}, },
surrounding_size: surrounding_inline_size, surrounding_size: surrounding_inline_size,
@ -1721,7 +1722,8 @@ impl Fragment {
SpecificFragmentInfo::InlineBlock(ref mut info) => { SpecificFragmentInfo::InlineBlock(ref mut info) => {
let block_flow = info.flow_ref.as_block(); let block_flow = info.flow_ref.as_block();
self.border_box.size.inline = 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; block_flow.base.block_container_inline_size = self.border_box.size.inline;
} }
SpecificFragmentInfo::ScannedText(ref info) => { SpecificFragmentInfo::ScannedText(ref info) => {

1
tests/ref/basic.list
View file

@ -156,6 +156,7 @@ fragment=top != ../html/acid2.html acid2_ref.html
== img_block_display_a.html img_block_display_ref.html == img_block_display_a.html img_block_display_ref.html
== after_block_iteration.html after_block_iteration_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_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 == percentage_height_float_a.html percentage_height_float_ref.html
== img_block_maxwidth_a.html img_block_maxwidth_ref.html == img_block_maxwidth_a.html img_block_maxwidth_ref.html
== img_block_maxwidth_b.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
View 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
View 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>