Auto merge of #5587 - pcwalton:list-style-image-sizing-redux, r=glennw

Improves Wikipedia.

r? @glennw
This commit is contained in:
bors-servo 2015-04-08 04:48:30 -05:00
commit 267badae69
4 changed files with 102 additions and 17 deletions

View file

@ -15,6 +15,8 @@ use flow::{Flow, FlowClass};
use fragment::{CoordinateSystem, Fragment, FragmentBorderBoxIterator, GeneratedContentInfo};
use generated_content;
use incremental::RESOLVE_GENERATED_CONTENT;
use inline::InlineMetrics;
use text;
use wrapper::ThreadSafeLayoutNode;
use geom::{Point2D, Rect};
@ -84,30 +86,38 @@ impl Flow for ListItemFlow {
fn assign_inline_sizes(&mut self, layout_context: &LayoutContext) {
self.block_flow.assign_inline_sizes(layout_context);
match self.marker {
None => {}
Some(ref mut marker) => {
// Do this now. There's no need to do this in bubble-widths, since markers do not
// contribute to the inline size of this flow.
let intrinsic_inline_sizes = marker.compute_intrinsic_inline_sizes();
if let Some(ref mut marker) = self.marker {
let containing_block_inline_size = self.block_flow.base.block_container_inline_size;
marker.assign_replaced_inline_size_if_necessary(containing_block_inline_size);
marker.border_box.size.inline =
intrinsic_inline_sizes.content_intrinsic_sizes.preferred_inline_size;
marker.border_box.start.i = self.block_flow.fragment.border_box.start.i -
marker.border_box.size.inline;
}
// Do this now. There's no need to do this in bubble-widths, since markers do not
// contribute to the inline size of this flow.
let intrinsic_inline_sizes = marker.compute_intrinsic_inline_sizes();
marker.border_box.size.inline =
intrinsic_inline_sizes.content_intrinsic_sizes.preferred_inline_size;
marker.border_box.start.i = self.block_flow.fragment.border_box.start.i -
marker.border_box.size.inline;
}
}
fn assign_block_size<'a>(&mut self, layout_context: &'a LayoutContext<'a>) {
self.block_flow.assign_block_size(layout_context);
match self.marker {
None => {}
Some(ref mut marker) => {
marker.border_box.start.b = Au(0);
marker.border_box.size.block = marker.calculate_line_height(layout_context);
}
if let Some(ref mut marker) = self.marker {
let containing_block_block_size =
self.block_flow.base.block_container_explicit_block_size.unwrap_or(Au(0));
marker.assign_replaced_block_size_if_necessary(containing_block_block_size);
let font_metrics =
text::font_metrics_for_style(layout_context.font_context(),
marker.style.get_font_arc());
let line_height = text::line_height_from_style(&*marker.style, &font_metrics);
let item_inline_metrics = InlineMetrics::from_font_metrics(&font_metrics, line_height);
let marker_inline_metrics = marker.inline_metrics(layout_context);
marker.border_box.start.b = item_inline_metrics.block_size_above_baseline -
marker_inline_metrics.block_size_above_baseline;
marker.border_box.size.block = marker_inline_metrics.block_size_above_baseline;
}
}

View file

@ -195,6 +195,7 @@ flaky_cpu == linebreak_simple_a.html linebreak_simple_b.html
# Fails intermittently (#3636)
# == link_style_dynamic_addition.html link_style_dynamic_addition_ref.html
== link_style_order.html link_style_order_ref.html
== list_style_image_sizing_a.html list_style_image_sizing_ref.html
== list_style_position_a.html list_style_position_ref.html
!= list_style_type_a.html list_style_type_ref.html
== many_brs_a.html many_brs_ref.html

View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<!--
Tests that the list style image doesn't get stretched vertically. It should be completely
covered up by the black absolutely-positioned div.
-->
<link rel="stylesheet" type="text/css" href="css/ahem.css">
<style>
* {
margin: 0;
padding: 0;
}
li {
margin-left: 128px;
list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAANAQMAAABb8jbLAAAABlBMVEX///8AUow5QSOjAAAAAXRSTlMAQObYZgAAABNJREFUCB1jYEABBQw/wLCAgQEAGpIDyT0IVcsAAAAASUVORK5CYII=);
font-size: 256px;
font-family: Ahem, monospace;
}
#coverup {
position: absolute;
background: black;
top: 176px;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<ul>
<li>x</li>
</ul>
<div id=coverup></div>
</body>
</html>

View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<!--
Tests that the list style image doesn't get stretched vertically. It should be completely
covered up by the black absolutely-positioned div.
-->
<link rel="stylesheet" type="text/css" href="css/ahem.css">
<style>
* {
margin: 0;
padding: 0;
}
li {
margin-left: 128px;
list-style-image: none;
font-size: 256px;
font-family: Ahem, monospace;
}
#coverup {
position: absolute;
background: black;
top: 176px;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<ul>
<li>x</li>
</ul>
<div id=coverup></div>
</body>
</html>