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

Add tests and clean up *_mode_assign_inline_sizes

Browse source 
Clean up block_mode_assign_inline_sizes and
inline_mode_assign_inline_sizes and add extra css tests.
This commit is contained in:
Daniel Robertson 2016-04-08 17:51:02 -04:00
parent 90ab488d42
commit e0454e0b65
3 changed files with 84 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

21
components/layout/flex.rs
View file

@ -186,14 +186,20 @@ impl FlexFlow {
// FIXME (mbrubeck): Get correct mode for absolute containing block // FIXME (mbrubeck): Get correct mode for absolute containing block
let containing_block_mode = self.block_flow.base.writing_mode; let containing_block_mode = self.block_flow.base.writing_mode;
let container_block_size = match self.available_main_size {
AxisSize::Definite(length) => Some(length),
_ => None
};
let container_inline_size = match self.available_cross_size {
AxisSize::Definite(length) => length,
AxisSize::MinMax(ref constraint) => constraint.clamp(content_inline_size),
AxisSize::Infinite => content_inline_size
};
let mut iterator = self.block_flow.base.child_iter_mut().enumerate().peekable(); let mut iterator = self.block_flow.base.child_iter_mut().enumerate().peekable();
while let Some((_, kid)) = iterator.next() { while let Some((_, kid)) = iterator.next() {
{ {
let kid_base = flow::mut_base(kid); let kid_base = flow::mut_base(kid);
kid_base.block_container_explicit_block_size = match self.available_main_size { kid_base.block_container_explicit_block_size = container_block_size;
AxisSize::Definite(length) => Some(length),
_ => None
}
} }
// The inline-start margin edge of the child flow is at our inline-start content edge, // The inline-start margin edge of the child flow is at our inline-start content edge,
@ -210,11 +216,7 @@ impl FlexFlow {
inline_end_content_edge inline_end_content_edge
}; };
} }
kid_base.block_container_inline_size = match self.available_main_size { kid_base.block_container_inline_size = container_inline_size;
AxisSize::Definite(length) => length,
AxisSize::MinMax(ref constraint) => constraint.clamp(content_inline_size),
AxisSize::Infinite => content_inline_size,
};
kid_base.block_container_writing_mode = containing_block_mode; kid_base.block_container_writing_mode = containing_block_mode;
} }
} }
@ -247,7 +249,6 @@ impl FlexFlow {
let even_content_inline_size = inline_size / child_count; let even_content_inline_size = inline_size / child_count;
let inline_size = self.block_flow.base.block_container_inline_size;
let container_mode = self.block_flow.base.block_container_writing_mode; let container_mode = self.block_flow.base.block_container_writing_mode;
self.block_flow.base.position.size.inline = inline_size; self.block_flow.base.position.size.inline = inline_size;

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

@ -5709,6 +5709,12 @@
] ]
}, },
"testharness": { "testharness": {
"css/flex-item-assign-inline-size.html": [
{
"path": "css/flex-item-assign-inline-size.html",
"url": "/_mozilla/css/flex-item-assign-inline-size.html"
}
],
"css/float_relative_to_position.html": [ "css/float_relative_to_position.html": [
{ {
"path": "css/float_relative_to_position.html", "path": "css/float_relative_to_position.html",

67
tests/wpt/mozilla/tests/css/flex-item-assign-inline-size.html Normal file
View file

@ -0,0 +1,67 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test inline size against percentage</title>
<style>
#container {
width: 500px;
height: 500px;
background: white;
}
#container > div {
display: flex;
background: red;
}
#container > div > div {
background: green;
}
#flex-container0 {
flex-direction: column;
height: 20%;
width: 10%;
}
#flex-item0 {
width: 10%;
}
#flex-container1 {
flex-direction: row;
height: 20%;
width: 10%;
}
#flex-item1 {
width: 10%;
background: green;
}
</style>
</head>
<body>
<div id="container">
<div id="flex-container0">
<div id="flex-item0">
</div>
</div>
<div id="flex-container1">
<div id="flex-item1">
</div>
</div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
test(function() {
var flex_container0 = document.getElementById("flex-container0");
var flex_item0 = document.getElementById("flex-item0");
var flex_container1 = document.getElementById("flex-container1");
var flex_item1 = document.getElementById("flex-item1");
assert_equals(flex_container0.clientWidth, 50);
assert_equals(flex_item0.clientWidth, 5);
assert_equals(flex_container1.clientWidth, 50);
assert_equals(flex_item1.clientWidth, 5);
});
</script>
</body>
</html>