mirror of
https://github.com/servo/servo.git
synced 2025-08-03 20:50:07 +01:00
Add tests and clean up *_mode_assign_inline_sizes
Clean up block_mode_assign_inline_sizes and inline_mode_assign_inline_sizes and add extra css tests.
This commit is contained in:
parent
90ab488d42
commit
e0454e0b65
3 changed files with 84 additions and 10 deletions
|
@ -186,14 +186,20 @@ impl FlexFlow {
|
|||
// FIXME (mbrubeck): Get correct mode for absolute containing block
|
||||
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();
|
||||
while let Some((_, kid)) = iterator.next() {
|
||||
{
|
||||
let kid_base = flow::mut_base(kid);
|
||||
kid_base.block_container_explicit_block_size = match self.available_main_size {
|
||||
AxisSize::Definite(length) => Some(length),
|
||||
_ => None
|
||||
}
|
||||
kid_base.block_container_explicit_block_size = container_block_size;
|
||||
}
|
||||
|
||||
// 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
|
||||
};
|
||||
}
|
||||
kid_base.block_container_inline_size = match self.available_main_size {
|
||||
AxisSize::Definite(length) => length,
|
||||
AxisSize::MinMax(ref constraint) => constraint.clamp(content_inline_size),
|
||||
AxisSize::Infinite => content_inline_size,
|
||||
};
|
||||
kid_base.block_container_inline_size = container_inline_size;
|
||||
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 inline_size = self.block_flow.base.block_container_inline_size;
|
||||
let container_mode = self.block_flow.base.block_container_writing_mode;
|
||||
self.block_flow.base.position.size.inline = inline_size;
|
||||
|
||||
|
|
|
@ -5709,6 +5709,12 @@
|
|||
]
|
||||
},
|
||||
"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": [
|
||||
{
|
||||
"path": "css/float_relative_to_position.html",
|
||||
|
|
|
@ -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>
|
Loading…
Add table
Add a link
Reference in a new issue