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

layout: Ignore indefinite stretch on min and max sizing properties (#35630)

Browse source 
We were always treating an indefinite `stretch` as the automatic size.
This instead treats it as `0px` on min sizing properties, and as `none`
on max sizing properties, aligning with Blink and this recent CSSWG
resolution: https://github.com/w3c/csswg-drafts/issues/11006

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau 2025-02-24 14:51:08 +01:00 • committed by GitHub
parent e74bb8de15
commit 41c2422a66
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
15 changed files with 266 additions and 145 deletions
Download patch file Download diff file Expand all files Collapse all files

45
components/layout_2020/flexbox/layout.rs
View file

@ -2753,14 +2753,11 @@ impl FlexItemBox {
} }
}); });
let flex_base_size = if let Some(container_size) = container_definite_inner_size.main { let stretch_size = container_definite_inner_size
let stretch_size = Au::zero().max(container_size - pbm_auto_is_zero.main); .main
used_flex_basis.resolve(Size::MaxContent, stretch_size, &content_size) .map(|container_size| Au::zero().max(container_size - pbm_auto_is_zero.main));
} else if matches!(used_flex_basis, Size::Stretch | Size::FitContent) { let flex_base_size =
content_size.max_content used_flex_basis.resolve_for_preferred(Size::MaxContent, stretch_size, &content_size);
} else {
used_flex_basis.resolve(Size::MaxContent, Au::zero(), &content_size)
};
(flex_base_size, flex_base_size_is_definite) (flex_base_size, flex_base_size_is_definite)
} }
@ -2849,7 +2846,7 @@ impl FlexItemBox {
}); });
content_box_size content_box_size
.inline .inline
.resolve(initial_behavior, stretch_size, &content_size) .resolve_for_preferred(initial_behavior, Some(stretch_size), &content_size)
.clamp_between_extremums(min_size.inline, max_size.inline) .clamp_between_extremums(min_size.inline, max_size.inline)
}; };
let item_as_containing_block = ContainingBlock { let item_as_containing_block = ContainingBlock {
@ -2891,31 +2888,31 @@ impl FlexItemBox {
}); });
content_block_size content_block_size
}; };
let content_block_size = LazyCell::new(|| ContentSizes::from(content_block_size()));
match intrinsic_sizing_mode { match intrinsic_sizing_mode {
IntrinsicSizingMode::Contribution => { IntrinsicSizingMode::Contribution => {
let stretch_size = flex_context let stretch_size =
.containing_block flex_context.containing_block.size.block.to_definite().map(
.size |block_size| {
.block block_size -
.to_definite() padding_border_margin.padding_border_sums.block -
.map(|block_size| { padding_border_margin.margin.block_start.auto_is(Au::zero) -
block_size - padding_border_margin.margin.block_end.auto_is(Au::zero)
padding_border_margin.padding_border_sums.block - },
padding_border_margin.margin.block_start.auto_is(Au::zero) - );
padding_border_margin.margin.block_end.auto_is(Au::zero)
})
.unwrap_or_else(|| content_block_size.max_content);
let inner_block_size = content_box_size let inner_block_size = content_box_size
.block .block
.resolve(Size::FitContent, stretch_size, &content_block_size) .resolve_for_preferred(
Size::FitContent,
stretch_size,
&LazyCell::new(|| ContentSizes::from(content_block_size())),
)
.clamp_between_extremums(min_size.block, max_size.block); .clamp_between_extremums(min_size.block, max_size.block);
inner_block_size + inner_block_size +
padding_border_margin.padding_border_sums.block + padding_border_margin.padding_border_sums.block +
padding_border_margin.margin.block_start.auto_is(Au::zero) + padding_border_margin.margin.block_start.auto_is(Au::zero) +
padding_border_margin.margin.block_end.auto_is(Au::zero) padding_border_margin.margin.block_end.auto_is(Au::zero)
}, },
IntrinsicSizingMode::Size => content_block_size.max_content, IntrinsicSizingMode::Size => content_block_size(),
} }
}, },
} }

20
components/layout_2020/flow/mod.rs
View file

@ -171,7 +171,7 @@ impl BlockLevelBox {
Direction::Inline, Direction::Inline,
Size::Stretch, Size::Stretch,
Au::zero(), Au::zero(),
available_inline_size, Some(available_inline_size),
get_inline_content_sizes, get_inline_content_sizes,
false, /* is_table */ false, /* is_table */
); );
@ -996,7 +996,7 @@ fn layout_in_flow_non_replaced_block_level_same_formatting_context(
Direction::Block, Direction::Block,
Size::FitContent, Size::FitContent,
Au::zero(), Au::zero(),
available_block_size.unwrap_or(content_block_size), available_block_size,
|| content_block_size.into(), || content_block_size.into(),
false, /* is_table */ false, /* is_table */
); );
@ -1117,7 +1117,7 @@ impl IndependentNonReplacedContents {
Direction::Block, Direction::Block,
Size::FitContent, Size::FitContent,
Au::zero(), Au::zero(),
available_block_size.unwrap_or(layout.content_block_size), available_block_size,
|| layout.content_block_size.into(), || layout.content_block_size.into(),
layout_style.is_table(), layout_style.is_table(),
); );
@ -1251,7 +1251,7 @@ impl IndependentNonReplacedContents {
Direction::Inline, Direction::Inline,
automatic_inline_size, automatic_inline_size,
Au::zero(), Au::zero(),
stretch_size, Some(stretch_size),
get_inline_content_sizes, get_inline_content_sizes,
is_table, is_table,
) )
@ -1262,7 +1262,7 @@ impl IndependentNonReplacedContents {
Direction::Block, Direction::Block,
Size::FitContent, Size::FitContent,
Au::zero(), Au::zero(),
available_block_size.unwrap_or(layout.content_block_size), available_block_size,
|| layout.content_block_size.into(), || layout.content_block_size.into(),
is_table, is_table,
) )
@ -1699,7 +1699,7 @@ fn solve_containing_block_padding_and_border_for_in_flow_box<'a>(
Direction::Inline, Direction::Inline,
automatic_inline_size, automatic_inline_size,
Au::zero(), Au::zero(),
available_inline_size, Some(available_inline_size),
get_inline_content_sizes, get_inline_content_sizes,
is_table, is_table,
); );
@ -2175,12 +2175,12 @@ impl IndependentFormattingContext {
IndependentFormattingContextContents::NonReplaced(non_replaced) => { IndependentFormattingContextContents::NonReplaced(non_replaced) => {
let writing_mode = self.style().writing_mode; let writing_mode = self.style().writing_mode;
let available_inline_size = let available_inline_size =
(containing_block.size.inline - pbm_sums.inline_sum()).max(Au::zero()); Au::zero().max(containing_block.size.inline - pbm_sums.inline_sum());
let available_block_size = containing_block let available_block_size = containing_block
.size .size
.block .block
.to_definite() .to_definite()
.map(|block_size| (block_size - pbm_sums.block_sum()).max(Au::zero())); .map(|block_size| Au::zero().max(block_size - pbm_sums.block_sum()));
let tentative_block_size = content_box_sizes_and_pbm let tentative_block_size = content_box_sizes_and_pbm
.content_box_sizes .content_box_sizes
.block .block
@ -2201,7 +2201,7 @@ impl IndependentFormattingContext {
Direction::Inline, Direction::Inline,
Size::FitContent, Size::FitContent,
Au::zero(), Au::zero(),
available_inline_size, Some(available_inline_size),
get_content_size, get_content_size,
is_table, is_table,
); );
@ -2232,7 +2232,7 @@ impl IndependentFormattingContext {
Direction::Block, Direction::Block,
Size::FitContent, Size::FitContent,
Au::zero(), Au::zero(),
available_block_size.unwrap_or(independent_layout.content_block_size), available_block_size,
|| independent_layout.content_block_size.into(), || independent_layout.content_block_size.into(),
is_table, is_table,
); );

87
components/layout_2020/geom.rs
View file

@ -7,7 +7,7 @@ use std::convert::From;
use std::fmt; use std::fmt;
use std::ops::{Add, AddAssign, Neg, Sub, SubAssign}; use std::ops::{Add, AddAssign, Neg, Sub, SubAssign};
use app_units::Au; use app_units::{Au, MAX_AU};
use style::logical_geometry::{BlockFlowDirection, Direction, InlineBaseDirection, WritingMode}; use style::logical_geometry::{BlockFlowDirection, Direction, InlineBaseDirection, WritingMode};
use style::values::computed::{ use style::values::computed::{
CSSPixelLength, LengthPercentage, MaxSize as StyleMaxSize, Percentage, Size as StyleSize, CSSPixelLength, LengthPercentage, MaxSize as StyleMaxSize, Percentage, Size as StyleSize,
@ -779,39 +779,65 @@ impl LogicalVec2<Size<LengthPercentage>> {
} }
impl Size<Au> { impl Size<Au> {
/// Resolves any size into a numerical value. /// Resolves a preferred size into a numerical value.
/// <https://www.w3.org/TR/css-sizing-3/#preferred-size-properties>
#[inline] #[inline]
pub(crate) fn resolve<F: FnOnce() -> ContentSizes>( pub(crate) fn resolve_for_preferred<F: FnOnce() -> ContentSizes>(
&self, &self,
initial_behavior: Self, automatic_size: Size<Au>,
stretch_size: Au, stretch_size: Option<Au>,
content_size: &LazyCell<ContentSizes, F>, content_size: &LazyCell<ContentSizes, F>,
) -> Au { ) -> Au {
if self.is_initial() { match self {
assert!(!initial_behavior.is_initial()); Self::Initial => {
initial_behavior.resolve_non_initial(stretch_size, content_size) assert!(!automatic_size.is_initial());
} else { automatic_size.resolve_for_preferred(automatic_size, stretch_size, content_size)
self.resolve_non_initial(stretch_size, content_size) },
Self::MinContent => content_size.min_content,
Self::MaxContent => content_size.max_content,
Self::FitContent => {
content_size.shrink_to_fit(stretch_size.unwrap_or_else(|| content_size.max_content))
},
Self::Stretch => stretch_size.unwrap_or_else(|| content_size.max_content),
Self::Numeric(numeric) => *numeric,
} }
.unwrap()
} }
/// Resolves a non-initial size into a numerical value. /// Resolves a minimum size into a numerical value.
/// Returns `None` if the size is the initial one. /// <https://www.w3.org/TR/css-sizing-3/#min-size-properties>
#[inline] #[inline]
pub(crate) fn resolve_non_initial<F: FnOnce() -> ContentSizes>( pub(crate) fn resolve_for_min<F: FnOnce() -> ContentSizes>(
&self, &self,
stretch_size: Au, automatic_minimum_size: Au,
stretch_size: Option<Au>,
content_size: &LazyCell<ContentSizes, F>,
) -> Au {
match self {
Self::Initial => automatic_minimum_size,
Self::MinContent => content_size.min_content,
Self::MaxContent => content_size.max_content,
Self::FitContent => content_size.shrink_to_fit(stretch_size.unwrap_or_default()),
Self::Stretch => stretch_size.unwrap_or_default(),
Self::Numeric(numeric) => *numeric,
}
}
/// Resolves a maximum size into a numerical value.
/// <https://www.w3.org/TR/css-sizing-3/#max-size-properties>
#[inline]
pub(crate) fn resolve_for_max<F: FnOnce() -> ContentSizes>(
&self,
stretch_size: Option<Au>,
content_size: &LazyCell<ContentSizes, F>, content_size: &LazyCell<ContentSizes, F>,
) -> Option<Au> { ) -> Option<Au> {
match self { Some(match self {
Self::Initial => None, Self::Initial => return None,
Self::MinContent => Some(content_size.min_content), Self::MinContent => content_size.min_content,
Self::MaxContent => Some(content_size.max_content), Self::MaxContent => content_size.max_content,
Self::FitContent => Some(content_size.shrink_to_fit(stretch_size)), Self::FitContent => content_size.shrink_to_fit(stretch_size.unwrap_or(MAX_AU)),
Self::Stretch => Some(stretch_size), Self::Stretch => return stretch_size,
Self::Numeric(numeric) => Some(*numeric), Self::Numeric(numeric) => *numeric,
} })
} }
/// Tries to resolve an extrinsic size into a numerical value. /// Tries to resolve an extrinsic size into a numerical value.
@ -915,7 +941,7 @@ impl Sizes {
axis: Direction, axis: Direction,
automatic_size: Size<Au>, automatic_size: Size<Au>,
automatic_minimum_size: Au, automatic_minimum_size: Au,
stretch_size: Au, stretch_size: Option<Au>,
get_content_size: impl FnOnce() -> ContentSizes, get_content_size: impl FnOnce() -> ContentSizes,
is_table: bool, is_table: bool,
) -> Au { ) -> Au {
@ -937,7 +963,7 @@ impl Sizes {
axis: Direction, axis: Direction,
automatic_size: Size<Au>, automatic_size: Size<Au>,
automatic_minimum_size: Au, automatic_minimum_size: Au,
stretch_size: Au, stretch_size: Option<Au>,
get_content_size: impl FnOnce() -> ContentSizes, get_content_size: impl FnOnce() -> ContentSizes,
is_table: bool, is_table: bool,
) -> (Au, Au, Option<Au>) { ) -> (Au, Au, Option<Au>) {
@ -953,13 +979,12 @@ impl Sizes {
return (content_size.max_content, content_size.min_content, None); return (content_size.max_content, content_size.min_content, None);
} }
let preferred = self let preferred =
.preferred self.preferred
.resolve(automatic_size, stretch_size, &content_size); .resolve_for_preferred(automatic_size, stretch_size, &content_size);
let mut min = self let mut min = self
.min .min
.resolve_non_initial(stretch_size, &content_size) .resolve_for_min(automatic_minimum_size, stretch_size, &content_size);
.unwrap_or(automatic_minimum_size);
if is_table { if is_table {
// In addition to the specified minimum, the inline size of a table is forced to be // In addition to the specified minimum, the inline size of a table is forced to be
// at least as big as its min-content size. // at least as big as its min-content size.
@ -968,7 +993,7 @@ impl Sizes {
// This is being discussed in https://github.com/w3c/csswg-drafts/issues/11408 // This is being discussed in https://github.com/w3c/csswg-drafts/issues/11408
min.max_assign(content_size.min_content); min.max_assign(content_size.min_content);
} }
let max = self.max.resolve_non_initial(stretch_size, &content_size); let max = self.max.resolve_for_max(stretch_size, &content_size);
(preferred, min, max) (preferred, min, max)
} }

2
components/layout_2020/positioned.rs
View file

@ -822,7 +822,7 @@ impl AbsoluteAxisSolver<'_> {
self.axis, self.axis,
initial_behavior, initial_behavior,
Au::zero(), Au::zero(),
stretch_size, Some(stretch_size),
get_content_size, get_content_size,
self.is_table, self.is_table,
)) ))

4
components/layout_2020/replaced.rs
View file

@ -536,7 +536,7 @@ impl ReplacedContents {
Direction::Inline, Direction::Inline,
automatic_size.inline, automatic_size.inline,
Au::zero(), Au::zero(),
inline_stretch_size, Some(inline_stretch_size),
get_inline_content_size, get_inline_content_size,
false, /* is_table */ false, /* is_table */
); );
@ -565,7 +565,7 @@ impl ReplacedContents {
Direction::Block, Direction::Block,
automatic_size.block, automatic_size.block,
Au::zero(), Au::zero(),
block_stretch_size.unwrap_or_else(|| block_content_size.max_content), block_stretch_size,
|| *block_content_size, || *block_content_size,
false, /* is_table */ false, /* is_table */
); );

10
tests/wpt/meta/MANIFEST.json vendored
View file

@ -592760,35 +592760,35 @@
] ]
], ],
"keyword-sizes-on-flex-item-001.html": [ "keyword-sizes-on-flex-item-001.html": [
"5989de812e6a17bb4fa2f9ea5df634a3bfbaaccc", "04c4bddbbd19c3a2942e56d54dba9a3f4a3dd44e",
[ [
null, null,
{} {}
] ]
], ],
"keyword-sizes-on-flex-item-002.html": [ "keyword-sizes-on-flex-item-002.html": [
"4a8cf76b253d2302da59c4020d370f870fa4a0c7", "73c6cb0c3d50b37488ed1d2a4cdaa8e434b0093d",
[ [
null, null,
{} {}
] ]
], ],
"keyword-sizes-on-floated-element.html": [ "keyword-sizes-on-floated-element.html": [
"e3da8bee7eb7b613e457d00eb88a677c35698d08", "44f75194794f0495febeecf02418fa5d023db35e",
[ [
null, null,
{} {}
] ]
], ],
"keyword-sizes-on-inline-block.html": [ "keyword-sizes-on-inline-block.html": [
"519081349c61e63da5f0a261da74dc985afb7c49", "e80df2343843220c97d6c760fcf595a7e9c4936a",
[ [
null, null,
{} {}
] ]
], ],
"keyword-sizes-on-replaced-element.html": [ "keyword-sizes-on-replaced-element.html": [
"8863ef491570c4d194bbb4b1d03a6e12367d4ff3", "497f87ca5fca68e6423c6aba94a34d3de938c1b1",
[ [
null, null,
{} {}

21
tests/wpt/meta/css/css-sizing/keyword-sizes-on-flex-item-001.html.ini vendored
View file

@ -125,20 +125,29 @@
[.test 59] [.test 59]
expected: FAIL expected: FAIL
[.test 60] [.test 66]
expected: FAIL expected: FAIL
[.test 61] [.test 67]
expected: FAIL expected: FAIL
[.test 62] [.test 68]
expected: FAIL expected: FAIL
[.test 63] [.test 69]
expected: FAIL expected: FAIL
[.test 64] [.test 70]
expected: FAIL expected: FAIL
[.test 65] [.test 71]
expected: FAIL
[.test 72]
expected: FAIL
[.test 73]
expected: FAIL
[.test 74]
expected: FAIL expected: FAIL

12
tests/wpt/meta/css/css-sizing/keyword-sizes-on-flex-item-002.html.ini vendored
View file

@ -131,20 +131,20 @@
[.test 54] [.test 54]
expected: FAIL expected: FAIL
[.test 60] [.test 69]
expected: FAIL expected: FAIL
[.test 61] [.test 70]
expected: FAIL expected: FAIL
[.test 62] [.test 71]
expected: FAIL expected: FAIL
[.test 63] [.test 72]
expected: FAIL expected: FAIL
[.test 64] [.test 73]
expected: FAIL expected: FAIL
[.test 65] [.test 74]
expected: FAIL expected: FAIL

3
tests/wpt/meta/css/css-sizing/stretch/indefinite-2.html.ini vendored
View file

@ -1,3 +0,0 @@
[indefinite-2.html]
[[data-expected-client-height\] 1]
expected: FAIL

3
tests/wpt/meta/css/css-sizing/stretch/indefinite-3.html.ini vendored
View file

@ -1,3 +0,0 @@
[indefinite-3.html]
[[data-expected-client-height\] 1]
expected: FAIL

34
tests/wpt/tests/css/css-sizing/keyword-sizes-on-flex-item-001.html vendored
View file

@ -129,20 +129,34 @@
<div class="test height min-height max-height stretch" data-expected-height="10"></div> <div class="test height min-height max-height stretch" data-expected-height="10"></div>
</div> </div>
<!-- Indefinite stretch --> <!-- Indefinite stretch -->
<div class="wrapper" style="width: 100px; max-height: 100px"> <div class="wrapper" style="width: 100px; max-height: 100px">
<div class="test height stretch indefinite" data-expected-height="30">X X</div> <div class="test height stretch" data-expected-height="30">X X</div>
<div class="test height stretch indefinite" data-expected-height="30">XXX XXX</div> <div class="test height stretch" data-expected-height="30">XXX XXX</div>
<div class="test height stretch indefinite" data-expected-height="30">XXXXX XXXXX</div> <div class="test height stretch" data-expected-height="30">XXXXX XXXXX</div>
<div class="test min-height stretch indefinite" data-expected-height="30">X X</div> <div class="test min-height stretch" data-expected-height="10">X X</div>
<div class="test min-height stretch indefinite" data-expected-height="30">XXX XXX</div> <div class="test min-height stretch" data-expected-height="10">XXX XXX</div>
<div class="test min-height stretch indefinite" data-expected-height="30">XXXXX XXXXX</div> <div class="test min-height stretch" data-expected-height="10">XXXXX XXXXX</div>
<div class="test max-height stretch indefinite" data-expected-height="30">X X</div> <div class="test max-height stretch" data-expected-height="510">X X</div>
<div class="test max-height stretch indefinite" data-expected-height="30">XXX XXX</div> <div class="test max-height stretch" data-expected-height="510">XXX XXX</div>
<div class="test max-height stretch indefinite" data-expected-height="30">XXXXX XXXXX</div> <div class="test max-height stretch" data-expected-height="510">XXXXX XXXXX</div>
</div>
<!-- Fit-content with indefinite stretch -->
<div class="wrapper" style="width: 100px; max-height: 100px">
<div class="test height" style="height: fit-content" data-expected-height="30">X X</div>
<div class="test height" style="height: fit-content" data-expected-height="30">XXX XXX</div>
<div class="test height" style="height: fit-content" data-expected-height="30">XXXXX XXXXX</div>
<div class="test min-height" style="min-height: fit-content" data-expected-height="30">X X</div>
<div class="test min-height" style="min-height: fit-content" data-expected-height="30">XXX XXX</div>
<div class="test min-height" style="min-height: fit-content" data-expected-height="30">XXXXX XXXXX</div>
<div class="test max-height" style="max-height: fit-content" data-expected-height="30">X X</div>
<div class="test max-height" style="max-height: fit-content" data-expected-height="30">XXX XXX</div>
<div class="test max-height" style="max-height: fit-content" data-expected-height="30">XXXXX XXXXX</div>
</div> </div>
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>

38
tests/wpt/tests/css/css-sizing/keyword-sizes-on-flex-item-002.html vendored
View file

@ -10,8 +10,10 @@
<style> <style>
.wrapper { .wrapper {
display: flex; display: inline-flex;
flex-direction: column; flex-direction: column;
vertical-align: top;
margin-right: 150px;
} }
.test { .test {
flex: none; flex: none;
@ -129,20 +131,34 @@
<div class="test height min-height max-height stretch" data-expected-height="10"></div> <div class="test height min-height max-height stretch" data-expected-height="10"></div>
</div> </div>
<!-- Indefinite stretch --> <!-- Indefinite stretch -->
<div class="wrapper" style="width: 100px; max-height: 100px"> <div class="wrapper" style="width: 100px; max-height: 100px">
<div class="test height stretch indefinite" data-expected-height="30">X X</div> <div class="test height stretch" data-expected-height="30">X X</div>
<div class="test height stretch indefinite" data-expected-height="50">XXX XXX</div> <div class="test height stretch" data-expected-height="50">XXX XXX</div>
<div class="test height stretch indefinite" data-expected-height="50">XXXXX XXXXX</div> <div class="test height stretch" data-expected-height="50">XXXXX XXXXX</div>
<div class="test min-height stretch indefinite" data-expected-height="30">X X</div> <div class="test min-height stretch" data-expected-height="10">X X</div>
<div class="test min-height stretch indefinite" data-expected-height="50">XXX XXX</div> <div class="test min-height stretch" data-expected-height="10">XXX XXX</div>
<div class="test min-height stretch indefinite" data-expected-height="50">XXXXX XXXXX</div> <div class="test min-height stretch" data-expected-height="10">XXXXX XXXXX</div>
<div class="test max-height stretch indefinite" data-expected-height="30">X X</div> <div class="test max-height stretch" data-expected-height="510">X X</div>
<div class="test max-height stretch indefinite" data-expected-height="50">XXX XXX</div> <div class="test max-height stretch" data-expected-height="510">XXX XXX</div>
<div class="test max-height stretch indefinite" data-expected-height="50">XXXXX XXXXX</div> <div class="test max-height stretch" data-expected-height="510">XXXXX XXXXX</div>
</div>
<!-- Fit-content with indefinite stretch -->
<div class="wrapper" style="width: 100px; max-height: 100px">
<div class="test height" style="height: fit-content" data-expected-height="30">X X</div>
<div class="test height" style="height: fit-content" data-expected-height="50">XXX XXX</div>
<div class="test height" style="height: fit-content" data-expected-height="50">XXXXX XXXXX</div>
<div class="test min-height" style="min-height: fit-content" data-expected-height="30">X X</div>
<div class="test min-height" style="min-height: fit-content" data-expected-height="50">XXX XXX</div>
<div class="test min-height" style="min-height: fit-content" data-expected-height="50">XXXXX XXXXX</div>
<div class="test max-height" style="max-height: fit-content" data-expected-height="30">X X</div>
<div class="test max-height" style="max-height: fit-content" data-expected-height="50">XXX XXX</div>
<div class="test max-height" style="max-height: fit-content" data-expected-height="50">XXXXX XXXXX</div>
</div> </div>
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>

45
tests/wpt/tests/css/css-sizing/keyword-sizes-on-floated-element.html vendored
View file

@ -9,6 +9,12 @@
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style> <style>
.wrapper {
display: inline-block;
vertical-align: top;
margin-right: 150px;
}
.test { .test {
float: left; float: left;
margin: 5px; margin: 5px;
@ -36,7 +42,7 @@
<div id="log"></div> <div id="log"></div>
<!-- Intrinsic keywords --> <!-- Intrinsic keywords -->
<div style="width: 100px; height: 100px"> <div class="wrapper" style="width: 100px; height: 100px">
<div class="test width" style="width: min-content" data-expected-width="30">X X</div> <div class="test width" style="width: min-content" data-expected-width="30">X X</div>
<div class="test width" style="width: fit-content" data-expected-width="70">X X</div> <div class="test width" style="width: fit-content" data-expected-width="70">X X</div>
<div class="test width" style="width: max-content" data-expected-width="70">X X</div> <div class="test width" style="width: max-content" data-expected-width="70">X X</div>
@ -93,7 +99,7 @@
</div> </div>
<!-- Definite stretch --> <!-- Definite stretch -->
<div style="width: 100px; height: 100px"> <div class="wrapper" style="width: 100px; height: 100px">
<div class="test width stretch" data-expected-width="90">X X</div> <div class="test width stretch" data-expected-width="90">X X</div>
<div class="test width stretch" data-expected-width="90">XXX XXX</div> <div class="test width stretch" data-expected-width="90">XXX XXX</div>
<div class="test width stretch" data-expected-width="90">XXXXX XXXXX</div> <div class="test width stretch" data-expected-width="90">XXXXX XXXXX</div>
@ -126,18 +132,33 @@
</div> </div>
<!-- Indefinite stretch --> <!-- Indefinite stretch -->
<div style="width: 100px; max-height: 100px"> <div class="wrapper" style="width: 100px; max-height: 100px">
<div class="test height stretch indefinite" data-expected-height="30">X X</div> <div class="test height stretch" data-expected-height="30">X X</div>
<div class="test height stretch indefinite" data-expected-height="50">XXX XXX</div> <div class="test height stretch" data-expected-height="50">XXX XXX</div>
<div class="test height stretch indefinite" data-expected-height="50">XXXXX XXXXX</div> <div class="test height stretch" data-expected-height="50">XXXXX XXXXX</div>
<div class="test min-height stretch indefinite" data-expected-height="30">X X</div> <div class="test min-height stretch" data-expected-height="10">X X</div>
<div class="test min-height stretch indefinite" data-expected-height="50">XXX XXX</div> <div class="test min-height stretch" data-expected-height="10">XXX XXX</div>
<div class="test min-height stretch indefinite" data-expected-height="50">XXXXX XXXXX</div> <div class="test min-height stretch" data-expected-height="10">XXXXX XXXXX</div>
<div class="test max-height stretch indefinite" data-expected-height="30">X X</div> <div class="test max-height stretch" data-expected-height="510">X X</div>
<div class="test max-height stretch indefinite" data-expected-height="50">XXX XXX</div> <div class="test max-height stretch" data-expected-height="510">XXX XXX</div>
<div class="test max-height stretch indefinite" data-expected-height="50">XXXXX XXXXX</div> <div class="test max-height stretch" data-expected-height="510">XXXXX XXXXX</div>
</div>
<!-- Fit-content with indefinite stretch -->
<div class="wrapper" style="width: 100px; max-height: 100px">
<div class="test height" style="height: fit-content" data-expected-height="30">X X</div>
<div class="test height" style="height: fit-content" data-expected-height="50">XXX XXX</div>
<div class="test height" style="height: fit-content" data-expected-height="50">XXXXX XXXXX</div>
<div class="test min-height" style="min-height: fit-content" data-expected-height="30">X X</div>
<div class="test min-height" style="min-height: fit-content" data-expected-height="50">XXX XXX</div>
<div class="test min-height" style="min-height: fit-content" data-expected-height="50">XXXXX XXXXX</div>
<div class="test max-height" style="max-height: fit-content" data-expected-height="30">X X</div>
<div class="test max-height" style="max-height: fit-content" data-expected-height="50">XXX XXX</div>
<div class="test max-height" style="max-height: fit-content" data-expected-height="50">XXXXX XXXXX</div>
</div> </div>
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>

33
tests/wpt/tests/css/css-sizing/keyword-sizes-on-inline-block.html vendored
View file

@ -133,17 +133,32 @@
<!-- Indefinite stretch --> <!-- Indefinite stretch -->
<div class="wrapper" style="width: 100px; max-height: 100px"> <div class="wrapper" style="width: 100px; max-height: 100px">
<div class="test height stretch indefinite" data-expected-height="30">X X</div> <div class="test height stretch" data-expected-height="30">X X</div>
<div class="test height stretch indefinite" data-expected-height="50">XXX XXX</div> <div class="test height stretch" data-expected-height="50">XXX XXX</div>
<div class="test height stretch indefinite" data-expected-height="50">XXXXX XXXXX</div> <div class="test height stretch" data-expected-height="50">XXXXX XXXXX</div>
<div class="test min-height stretch indefinite" data-expected-height="30">X X</div> <div class="test min-height stretch" data-expected-height="10">X X</div>
<div class="test min-height stretch indefinite" data-expected-height="50">XXX XXX</div> <div class="test min-height stretch" data-expected-height="10">XXX XXX</div>
<div class="test min-height stretch indefinite" data-expected-height="50">XXXXX XXXXX</div> <div class="test min-height stretch" data-expected-height="10">XXXXX XXXXX</div>
<div class="test max-height stretch indefinite" data-expected-height="30">X X</div> <div class="test max-height stretch" data-expected-height="510">X X</div>
<div class="test max-height stretch indefinite" data-expected-height="50">XXX XXX</div> <div class="test max-height stretch" data-expected-height="510">XXX XXX</div>
<div class="test max-height stretch indefinite" data-expected-height="50">XXXXX XXXXX</div> <div class="test max-height stretch" data-expected-height="510">XXXXX XXXXX</div>
</div>
<!-- Fit-content with indefinite stretch -->
<div class="wrapper" style="width: 100px; max-height: 100px">
<div class="test height" style="height: fit-content" data-expected-height="30">X X</div>
<div class="test height" style="height: fit-content" data-expected-height="50">XXX XXX</div>
<div class="test height" style="height: fit-content" data-expected-height="50">XXXXX XXXXX</div>
<div class="test min-height" style="min-height: fit-content" data-expected-height="30">X X</div>
<div class="test min-height" style="min-height: fit-content" data-expected-height="50">XXX XXX</div>
<div class="test min-height" style="min-height: fit-content" data-expected-height="50">XXXXX XXXXX</div>
<div class="test max-height" style="max-height: fit-content" data-expected-height="30">X X</div>
<div class="test max-height" style="max-height: fit-content" data-expected-height="50">XXX XXX</div>
<div class="test max-height" style="max-height: fit-content" data-expected-height="50">XXXXX XXXXX</div>
</div> </div>
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>

54
tests/wpt/tests/css/css-sizing/keyword-sizes-on-replaced-element.html vendored
View file

@ -8,6 +8,12 @@
<meta assert="The various keyword sizes work as expected on replaced elements."> <meta assert="The various keyword sizes work as expected on replaced elements.">
<style> <style>
.wrapper {
display: inline-block;
vertical-align: top;
margin-right: 150px;
}
.test { .test {
margin: 5px; margin: 5px;
border: 3px solid; border: 3px solid;
@ -35,7 +41,7 @@
<div id="log"></div> <div id="log"></div>
<!-- Intrinsic keywords --> <!-- Intrinsic keywords -->
<div style="width: 200px; height: 100px"> <div class="wrapper" style="width: 200px; height: 100px">
<canvas width="100" height="100" class="test width height" style="width: 50px; height: 50px" <canvas width="100" height="100" class="test width height" style="width: 50px; height: 50px"
data-expected-width="60" data-expected-height="60"></canvas> data-expected-width="60" data-expected-height="60"></canvas>
<canvas width="100" height="100" class="test width height" style="width: 50px; height: min-content" <canvas width="100" height="100" class="test width height" style="width: 50px; height: min-content"
@ -141,7 +147,7 @@
</div> </div>
<!-- Definite stretch --> <!-- Definite stretch -->
<div style="width: 200px; height: 100px"> <div class="wrapper" style="width: 200px; height: 100px">
<canvas width="100" height="100" class="test width stretch" <canvas width="100" height="100" class="test width stretch"
data-expected-width="190" data-expected-height="190"></canvas> data-expected-width="190" data-expected-height="190"></canvas>
<canvas width="100" height="100" class="test min-width stretch" <canvas width="100" height="100" class="test min-width stretch"
@ -167,26 +173,50 @@
</div> </div>
<!-- Indefinite stretch --> <!-- Indefinite stretch -->
<div style="width: 200px; max-height: 100px"> <div class="wrapper" style="width: 200px; max-height: 100px">
<canvas width="100" height="100" class="test height stretch indefinite" <canvas width="100" height="100" class="test height stretch"
data-expected-width="110" data-expected-height="110"></canvas> data-expected-width="110" data-expected-height="110"></canvas>
<canvas width="100" height="100" class="test min-height stretch indefinite" <canvas width="100" height="100" class="test min-height stretch"
data-expected-width="10" data-expected-height="10"></canvas>
<canvas width="100" height="100" class="test max-height stretch"
data-expected-width="510" data-expected-height="510"></canvas>
<canvas width="100" height="100" class="test height stretch" style="max-width: 50px"
data-expected-width="60" data-expected-height="60"></canvas>
<canvas width="100" height="100" class="test min-height stretch" style="min-width: 50px"
data-expected-width="60" data-expected-height="10"></canvas>
<canvas width="100" height="100" class="test max-height stretch" style="max-width: 50px"
data-expected-width="60" data-expected-height="510"></canvas>
<canvas width="100" height="100" class="test height stretch" style="min-width: 150px"
data-expected-width="160" data-expected-height="160"></canvas>
<canvas width="100" height="100" class="test min-height stretch" style="min-width: 150px"
data-expected-width="160" data-expected-height="10"></canvas>
<canvas width="100" height="100" class="test max-height stretch" style="max-width: 150px"
data-expected-width="160" data-expected-height="510"></canvas>
</div>
<!-- Fit-content with indefinite stretch -->
<div class="wrapper" style="width: 200px; max-height: 100px">
<canvas width="100" height="100" class="test height" style="height: fit-content"
data-expected-width="110" data-expected-height="110"></canvas>
<canvas width="100" height="100" class="test min-height" style="min-height: fit-content"
data-expected-width="10" data-expected-height="110"></canvas> data-expected-width="10" data-expected-height="110"></canvas>
<canvas width="100" height="100" class="test max-height stretch indefinite" <canvas width="100" height="100" class="test max-height" style="max-height: fit-content"
data-expected-width="510" data-expected-height="110"></canvas> data-expected-width="510" data-expected-height="110"></canvas>
<canvas width="100" height="100" class="test height stretch indefinite" style="max-width: 50px" <canvas width="100" height="100" class="test height" style="max-width: 50px; height: fit-content"
data-expected-width="60" data-expected-height="60"></canvas> data-expected-width="60" data-expected-height="60"></canvas>
<canvas width="100" height="100" class="test min-height stretch indefinite" style="min-width: 50px" <canvas width="100" height="100" class="test min-height" style="min-width: 50px; min-height: fit-content"
data-expected-width="60" data-expected-height="110"></canvas> data-expected-width="60" data-expected-height="110"></canvas>
<canvas width="100" height="100" class="test max-height stretch indefinite" style="max-width: 50px" <canvas width="100" height="100" class="test max-height" style="max-width: 50px; max-height: fit-content"
data-expected-width="60" data-expected-height="60"></canvas> data-expected-width="60" data-expected-height="60"></canvas>
<canvas width="100" height="100" class="test height stretch indefinite" style="min-width: 150px" <canvas width="100" height="100" class="test height" style="min-width: 150px; height: fit-content"
data-expected-width="160" data-expected-height="160"></canvas> data-expected-width="160" data-expected-height="160"></canvas>
<canvas width="100" height="100" class="test min-height stretch indefinite" style="min-width: 150px" <canvas width="100" height="100" class="test min-height" style="min-width: 150px; min-height: fit-content"
data-expected-width="160" data-expected-height="160"></canvas> data-expected-width="160" data-expected-height="160"></canvas>
<canvas width="100" height="100" class="test max-height stretch indefinite" style="max-width: 150px" <canvas width="100" height="100" class="test max-height" style="max-width: 150px; max-height: fit-content"
data-expected-width="160" data-expected-height="110"></canvas> data-expected-width="160" data-expected-height="110"></canvas>
</div> </div>