Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-07-22 23:03:42 +01:00
Code Issues Projects Releases Packages Wiki Activity

Auto merge of #10557 - emilio:inline-block-max-width, r=pcwalton

Browse source 
layout: Take in account max and min inline size for inline fragments

Improves MDN.

r? @mbrubeck or @pcwalton

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="35" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/10557)
<!-- Reviewable:end -->
This commit is contained in:
bors-servo 2016-04-14 00:09:52 +05:30
commit 66c20b2ced
8 changed files with 202 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

31
components/layout/fragment.rs
View file

@ -1029,12 +1029,15 @@ 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) {
max(model::specified(style.min_inline_size(), Au(0)),
MaybeAuto::from_style(style.content_inline_size(), Au(0)).specified_or_zero())
} else {
Au(0)
};
let mut specified = Au(0);
if flags.contains(INTRINSIC_INLINE_SIZE_INCLUDES_SPECIFIED) {
specified = MaybeAuto::from_style(style.content_inline_size(), Au(0)).specified_or_zero();
specified = max(model::specified(style.min_inline_size(), Au(0)), specified);
if let Some(max) = model::specified_or_none(style.max_inline_size(), Au(0)) {
specified = min(specified, max)
}
}
// FIXME(#2261, pcwalton): This won't work well for inlines: is this OK?
let surrounding_inline_size = self.surrounding_intrinsic_inline_size();
@ -1375,7 +1378,7 @@ impl Fragment {
result.union_block(&block_flow.base.intrinsic_inline_sizes)
}
SpecificFragmentInfo::Image(ref mut image_fragment_info) => {
let image_inline_size = match self.style.content_inline_size() {
let mut image_inline_size = match self.style.content_inline_size() {
LengthOrPercentageOrAuto::Auto |
LengthOrPercentageOrAuto::Percentage(_) => {
image_fragment_info.image_inline_size()
@ -1383,13 +1386,19 @@ impl Fragment {
LengthOrPercentageOrAuto::Length(length) => length,
LengthOrPercentageOrAuto::Calc(calc) => calc.length(),
};
image_inline_size = max(model::specified(self.style.min_inline_size(), Au(0)), image_inline_size);
if let Some(max) = model::specified_or_none(self.style.max_inline_size(), Au(0)) {
image_inline_size = min(image_inline_size, max)
}
result.union_block(&IntrinsicISizes {
minimum_inline_size: image_inline_size,
preferred_inline_size: image_inline_size,
});
}
SpecificFragmentInfo::Canvas(ref mut canvas_fragment_info) => {
let canvas_inline_size = match self.style.content_inline_size() {
let mut canvas_inline_size = match self.style.content_inline_size() {
LengthOrPercentageOrAuto::Auto |
LengthOrPercentageOrAuto::Percentage(_) => {
canvas_fragment_info.canvas_inline_size()
@ -1397,6 +1406,12 @@ impl Fragment {
LengthOrPercentageOrAuto::Length(length) => length,
LengthOrPercentageOrAuto::Calc(calc) => calc.length(),
};
canvas_inline_size = max(model::specified(self.style.min_inline_size(), Au(0)), canvas_inline_size);
if let Some(max) = model::specified_or_none(self.style.max_inline_size(), Au(0)) {
canvas_inline_size = min(canvas_inline_size, max)
}
result.union_block(&IntrinsicISizes {
minimum_inline_size: canvas_inline_size,
preferred_inline_size: canvas_inline_size,

3
tests/wpt/metadata-css/css21_dev/html4/max-width-110.htm.ini
View file

@ -1,3 +0,0 @@
[max-width-110.htm]
type: reftest
expected: FAIL

96
tests/wpt/mozilla/meta/MANIFEST.json
View file

@ -3179,6 +3179,54 @@
"url": "/_mozilla/css/marker_block_direction_placement_a.html"
}
],
"css/max_inline_block_size.html": [
{
"path": "css/max_inline_block_size.html",
"references": [
[
"/_mozilla/css/max_inline_block_size_ref.html",
"=="
]
],
"url": "/_mozilla/css/max_inline_block_size.html"
}
],
"css/max_inline_block_size_canvas.html": [
{
"path": "css/max_inline_block_size_canvas.html",
"references": [
[
"/_mozilla/css/max_inline_block_size_ref.html",
"=="
]
],
"url": "/_mozilla/css/max_inline_block_size_canvas.html"
}
],
"css/max_inline_block_size_image.html": [
{
"path": "css/max_inline_block_size_image.html",
"references": [
[
"/_mozilla/css/max_inline_block_size_ref.html",
"=="
]
],
"url": "/_mozilla/css/max_inline_block_size_image.html"
}
],
"css/max_inline_block_size_ref.html": [
{
"path": "css/max_inline_block_size_ref.html",
"references": [
[
"/_mozilla/css/max_inline_block_size_ref.html",
"=="
]
],
"url": "/_mozilla/css/max_inline_block_size_ref.html"
}
],
"css/max_width_float_simple_a.html": [
{
"path": "css/max_width_float_simple_a.html",
@ -9709,6 +9757,54 @@
"url": "/_mozilla/css/marker_block_direction_placement_a.html"
}
],
"css/max_inline_block_size.html": [
{
"path": "css/max_inline_block_size.html",
"references": [
[
"/_mozilla/css/max_inline_block_size_ref.html",
"=="
]
],
"url": "/_mozilla/css/max_inline_block_size.html"
}
],
"css/max_inline_block_size_canvas.html": [
{
"path": "css/max_inline_block_size_canvas.html",
"references": [
[
"/_mozilla/css/max_inline_block_size_ref.html",
"=="
]
],
"url": "/_mozilla/css/max_inline_block_size_canvas.html"
}
],
"css/max_inline_block_size_image.html": [
{
"path": "css/max_inline_block_size_image.html",
"references": [
[
"/_mozilla/css/max_inline_block_size_ref.html",
"=="
]
],
"url": "/_mozilla/css/max_inline_block_size_image.html"
}
],
"css/max_inline_block_size_ref.html": [
{
"path": "css/max_inline_block_size_ref.html",
"references": [
[
"/_mozilla/css/max_inline_block_size_ref.html",
"=="
]
],
"url": "/_mozilla/css/max_inline_block_size_ref.html"
}
],
"css/max_width_float_simple_a.html": [
{
"path": "css/max_width_float_simple_a.html",

BIN
tests/wpt/mozilla/tests/css/250x250_green.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 628 B

21
tests/wpt/mozilla/tests/css/max_inline_block_size.html Normal file
View file

@ -0,0 +1,21 @@
<!doctype html>
<meta charset="utf-8">
<title>Max inline-block size inside another inline-block element</title>
<link rel="match" href="max_inline_block_size_ref.html">
<style>
html, body { margin: 0; padding: 0; }
div { display: inline-block; }
#a {
background: red;
}
#b {
background: rgb(0, 255, 0);
width: 500px;
max-width: 250px;
height: 250px;
}
</style>
<div id="a"><div id="b"></div></div>

24
tests/wpt/mozilla/tests/css/max_inline_block_size_canvas.html Normal file
View file

@ -0,0 +1,24 @@
<!doctype html>
<meta charset="utf-8">
<title>Max inline-block size inside another inline-block element</title>
<link rel="match" href="max_inline_block_size_ref.html">
<style>
html, body { margin: 0; padding: 0; }
div, canvas { display: inline-block; }
#a {
background: red;
}
#c {
max-width: 250px;
height: 250px;
}
</style>
<div id="a"><canvas width="500" height="250" id="c"></canvas></div>
<script>
var c = document.getElementById("c").getContext("2d");
c.fillStyle = "rgb(0, 255, 0)";
c.fillRect(0, 0, c.canvas.width, c.canvas.height);
</script>

18
tests/wpt/mozilla/tests/css/max_inline_block_size_image.html Normal file
View file

@ -0,0 +1,18 @@
<!doctype html>
<meta charset="utf-8">
<title>Max inline-block size inside another inline-block element</title>
<link rel="match" href="max_inline_block_size_ref.html">
<style>
html, body { margin: 0; padding: 0; }
div, img { display: inline-block; }
#a {
background: red;
}
#b {
max-width: 250px;
}
</style>
<div id="a"><img id="b" width="500" height="250" src="250x250_green.png"></div>

20
tests/wpt/mozilla/tests/css/max_inline_block_size_ref.html Normal file
View file

@ -0,0 +1,20 @@
<!doctype html>
<meta charset="utf-8">
<title>Max inline-block size inside another inline-block element</title>
<link rel="match" href="max_inline_block_size_ref.html">
<style>
html, body { margin: 0; padding: 0; }
div { display: inline-block; }
#a {
background: red;
}
#b {
background: rgb(0, 255, 0);
width: 250px;
height: 250px;
}
</style>
<div id="a"><div id="b"></div></div>