Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1759 We just have block based tests right now. Intrinsic sizing is commonly used with text so lets add a few there. Reviewed By: NickGerleman Differential Revision: D66662940 fbshipit-source-id: f8b91419c89d22d79a91d3bd8c7da70429c827fb
544 lines
24 KiB
HTML
544 lines
24 KiB
HTML
<div id="contains_inner_text_long_word" style="width:2000px;height:2000px;align-items: flex-start;">
|
|
<div style="flex-direction:row;">
|
|
LoremipsumdolorsitametconsecteturadipiscingelitSedeleifasdfettortoracauctorFuscerhoncusipsumtemporerosaliquamconsequatPraesentsoda
|
|
</div>
|
|
</div>
|
|
|
|
<div id="contains_inner_text_no_width_no_height" style="width:2000px;height:2000px;align-items: flex-start;">
|
|
<div style="flex-direction:row;">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifasd et tortor ac auctor. Integer at
|
|
volutpat
|
|
libero, sed elementum dui interdum id. Aliquam consectetur massa vel neque aliquet, quis consequat risus
|
|
fringilla. Fusce rhoncus ipsum tempor eros aliquam, vel tempus metus ullamcorper. Nam at nulla sed tellus
|
|
vestibulum fringilla vel sit amet ligula. Proin velit lectus, euismod sit amet quam vel ultricies dolor,
|
|
vitae
|
|
finibus lorem ipsum. Pellentesque molestie at mi sit amet dictum. Donec vehicula lacinia felis sit amet
|
|
consectetur. Praesent sodales enim sapien, sed varius ipsum pellentesque vel. Aenean eu mi eu justo
|
|
tincidunt
|
|
finibus vel sit amet ipsum. Sed bibasdum purus vel ipsum sagittis, quis fermentum dolor lobortis. Etiam
|
|
vulputate eleifasd lectus vel varius.
|
|
Phasellus imperdiet lectus sit amet ipsum egestas, ut bibasdum ipsum malesuada. Vestibulum ante ipsum primis
|
|
in
|
|
faucibus orci luctus et ultrices posuere cubilia Curae; Sed mollis eros sit amet elit porttitor, vel
|
|
venenatis
|
|
turpis venenatis. Nulla tempus tortor at eros efficitur, sit amet dapibus ipsum malesuada. Ut at mauris sed
|
|
nunc
|
|
malesuada convallis. Duis id sem vel magna varius eleifasd vel at est. Donec eget orci a ipsum tempor
|
|
lobortis.
|
|
Sed at consectetur ipsum.
|
|
</div>
|
|
</div>
|
|
|
|
<div id="contains_inner_text_no_width_no_height_long_word_in_paragraph"
|
|
style="width:2000px;height:2000px;align-items: flex-start;">
|
|
<div style="flex-direction:row;">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifasd et tortor ac auctor. Integer at
|
|
volutpat
|
|
libero, sed elementum dui interdum id. Aliquam consectetur massa vel neque aliquet, quis consequat risus
|
|
fringilla. Fusce rhoncus ipsum tempor eros aliquam, vel tempus metus ullamcorper. Nam at nulla sed tellus
|
|
vestibulum fringilla vel sit amet ligula. Proin velit lectus, euismod sit amet quam vel ultricies dolor,
|
|
vitae
|
|
finibus
|
|
loremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumloremipsumlorem
|
|
Pellentesque molestie at mi sit amet dictum. Donec vehicula lacinia felis sit amet
|
|
consectetur. Praesent sodales enim sapien, sed varius ipsum pellentesque vel. Aenean eu mi eu justo
|
|
tincidunt
|
|
finibus vel sit amet ipsum. Sed bibasdum purus vel ipsum sagittis, quis fermentum dolor lobortis. Etiam
|
|
vulputate eleifasd lectus vel varius.
|
|
Phasellus imperdiet lectus sit amet ipsum egestas, ut bibasdum ipsum malesuada. Vestibulum ante ipsum primis
|
|
in
|
|
faucibus orci luctus et ultrices posuere cubilia Curae; Sed mollis eros sit amet elit porttitor, vel
|
|
venenatis
|
|
turpis venenatis. Nulla tempus tortor at eros efficitur, sit amet dapibus ipsum malesuada. Ut at mauris sed
|
|
nunc
|
|
malesuada convallis. Duis id sem vel magna varius eleifasd vel at est. Donec eget orci a ipsum tempor
|
|
lobortis.
|
|
Sed at consectetur ipsum.
|
|
</div>
|
|
</div>
|
|
|
|
<div id="contains_inner_text_fixed_width" style="width:2000px;height:2000px;align-items: flex-start;">
|
|
<div style="flex-direction:row;width:100px">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifasd et tortor ac auctor. Integer at
|
|
volutpat
|
|
libero, sed elementum dui interdum id. Aliquam consectetur massa vel neque aliquet, quis consequat risus
|
|
fringilla. Fusce rhoncus ipsum tempor eros aliquam, vel tempus metus ullamcorper. Nam at nulla sed tellus
|
|
vestibulum fringilla vel sit amet ligula. Proin velit lectus, euismod sit amet quam vel ultricies dolor,
|
|
vitae
|
|
finibus lorem ipsum. Pellentesque molestie at mi sit amet dictum. Donec vehicula lacinia felis sit amet
|
|
consectetur. Praesent sodales enim sapien, sed varius ipsum pellentesque vel. Aenean eu mi eu justo
|
|
tincidunt
|
|
finibus vel sit amet ipsum. Sed bibasdum purus vel ipsum sagittis, quis fermentum dolor lobortis. Etiam
|
|
vulputate eleifasd lectus vel varius.
|
|
Phasellus imperdiet lectus sit amet ipsum egestas, ut bibasdum ipsum malesuada. Vestibulum ante ipsum primis
|
|
in
|
|
faucibus orci luctus et ultrices posuere cubilia Curae; Sed mollis eros sit amet elit porttitor, vel
|
|
venenatis
|
|
turpis venenatis. Nulla tempus tortor at eros efficitur, sit amet dapibus ipsum malesuada. Ut at mauris sed
|
|
nunc
|
|
malesuada convallis. Duis id sem vel magna varius eleifasd vel at est. Donec eget orci a ipsum tempor
|
|
lobortis.
|
|
Sed at consectetur ipsum.
|
|
</div>
|
|
</div>
|
|
|
|
<div id="contains_inner_text_no_width_fixed_height" style="width:2000px;height:2000px;align-items: flex-start;">
|
|
<div style="flex-direction:row;height:20px">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifasd et tortor ac auctor. Integer at
|
|
volutpat
|
|
libero, sed elementum dui interdum id. Aliquam consectetur massa vel neque aliquet, quis consequat risus
|
|
fringilla. Fusce rhoncus ipsum tempor eros aliquam, vel tempus metus ullamcorper. Nam at nulla sed tellus
|
|
vestibulum fringilla vel sit amet ligula. Proin velit lectus, euismod sit amet quam vel ultricies dolor,
|
|
vitae
|
|
finibus lorem ipsum. Pellentesque molestie at mi sit amet dictum. Donec vehicula lacinia felis sit amet
|
|
consectetur. Praesent sodales enim sapien, sed varius ipsum pellentesque vel. Aenean eu mi eu justo
|
|
tincidunt
|
|
finibus vel sit amet ipsum. Sed bibasdum purus vel ipsum sagittis, quis fermentum dolor lobortis. Etiam
|
|
vulputate eleifasd lectus vel varius.
|
|
Phasellus imperdiet lectus sit amet ipsum egestas, ut bibasdum ipsum malesuada. Vestibulum ante ipsum primis
|
|
in
|
|
faucibus orci luctus et ultrices posuere cubilia Curae; Sed mollis eros sit amet elit porttitor, vel
|
|
venenatis
|
|
turpis venenatis. Nulla tempus tortor at eros efficitur, sit amet dapibus ipsum malesuada. Ut at mauris sed
|
|
nunc
|
|
malesuada convallis. Duis id sem vel magna varius eleifasd vel at est. Donec eget orci a ipsum tempor
|
|
lobortis.
|
|
Sed at consectetur ipsum.
|
|
</div>
|
|
</div>
|
|
|
|
<div id="contains_inner_text_fixed_width_fixed_height" style="width:2000px;height:2000px;align-items: flex-start;">
|
|
<div style="flex-direction:row;width: 50px; height:20px">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifasd et tortor ac auctor. Integer at
|
|
volutpat
|
|
libero, sed elementum dui interdum id. Aliquam consectetur massa vel neque aliquet, quis consequat risus
|
|
fringilla. Fusce rhoncus ipsum tempor eros aliquam, vel tempus metus ullamcorper. Nam at nulla sed tellus
|
|
vestibulum fringilla vel sit amet ligula. Proin velit lectus, euismod sit amet quam vel ultricies dolor,
|
|
vitae
|
|
finibus lorem ipsum. Pellentesque molestie at mi sit amet dictum. Donec vehicula lacinia felis sit amet
|
|
consectetur. Praesent sodales enim sapien, sed varius ipsum pellentesque vel. Aenean eu mi eu justo
|
|
tincidunt
|
|
finibus vel sit amet ipsum. Sed bibasdum purus vel ipsum sagittis, quis fermentum dolor lobortis. Etiam
|
|
vulputate eleifasd lectus vel varius.
|
|
Phasellus imperdiet lectus sit amet ipsum egestas, ut bibasdum ipsum malesuada. Vestibulum ante ipsum primis
|
|
in
|
|
faucibus orci luctus et ultrices posuere cubilia Curae; Sed mollis eros sit amet elit porttitor, vel
|
|
venenatis
|
|
turpis venenatis. Nulla tempus tortor at eros efficitur, sit amet dapibus ipsum malesuada. Ut at mauris sed
|
|
nunc
|
|
malesuada convallis. Duis id sem vel magna varius eleifasd vel at est. Donec eget orci a ipsum tempor
|
|
lobortis.
|
|
Sed at consectetur ipsum.
|
|
</div>
|
|
</div>
|
|
|
|
<div id="contains_inner_text_max_width_max_height" style="width:2000px;height:2000px;align-items: flex-start;">
|
|
<div style="flex-direction:row;max-width: 50px; max-height:20px">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifasd et tortor ac auctor. Integer at
|
|
volutpat
|
|
libero, sed elementum dui interdum id. Aliquam consectetur massa vel neque aliquet, quis consequat risus
|
|
fringilla. Fusce rhoncus ipsum tempor eros aliquam, vel tempus metus ullamcorper. Nam at nulla sed tellus
|
|
vestibulum fringilla vel sit amet ligula. Proin velit lectus, euismod sit amet quam vel ultricies dolor,
|
|
vitae
|
|
finibus lorem ipsum. Pellentesque molestie at mi sit amet dictum. Donec vehicula lacinia felis sit amet
|
|
consectetur. Praesent sodales enim sapien, sed varius ipsum pellentesque vel. Aenean eu mi eu justo
|
|
tincidunt
|
|
finibus vel sit amet ipsum. Sed bibasdum purus vel ipsum sagittis, quis fermentum dolor lobortis. Etiam
|
|
vulputate eleifasd lectus vel varius.
|
|
Phasellus imperdiet lectus sit amet ipsum egestas, ut bibasdum ipsum malesuada. Vestibulum ante ipsum primis
|
|
in
|
|
faucibus orci luctus et ultrices posuere cubilia Curae; Sed mollis eros sit amet elit porttitor, vel
|
|
venenatis
|
|
turpis venenatis. Nulla tempus tortor at eros efficitur, sit amet dapibus ipsum malesuada. Ut at mauris sed
|
|
nunc
|
|
malesuada convallis. Duis id sem vel magna varius eleifasd vel at est. Donec eget orci a ipsum tempor
|
|
lobortis.
|
|
Sed at consectetur ipsum.
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="contains_inner_text_max_width" style="width:2000px;height:2000px;align-items: flex-start;">
|
|
<div style="flex-direction:row;max-width:100px">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifasd et tortor ac auctor. Integer at
|
|
volutpat
|
|
libero, sed elementum dui interdum id. Aliquam consectetur massa vel neque aliquet, quis consequat risus
|
|
fringilla. Fusce rhoncus ipsum tempor eros aliquam, vel tempus metus ullamcorper. Nam at nulla sed tellus
|
|
vestibulum fringilla vel sit amet ligula. Proin velit lectus, euismod sit amet quam vel ultricies dolor,
|
|
vitae
|
|
finibus lorem ipsum. Pellentesque molestie at mi sit amet dictum. Donec vehicula lacinia felis sit amet
|
|
consectetur. Praesent sodales enim sapien, sed varius ipsum pellentesque vel. Aenean eu mi eu justo
|
|
tincidunt
|
|
finibus vel sit amet ipsum. Sed bibasdum purus vel ipsum sagittis, quis fermentum dolor lobortis. Etiam
|
|
vulputate eleifasd lectus vel varius.
|
|
Phasellus imperdiet lectus sit amet ipsum egestas, ut bibasdum ipsum malesuada. Vestibulum ante ipsum primis
|
|
in
|
|
faucibus orci luctus et ultrices posuere cubilia Curae; Sed mollis eros sit amet elit porttitor, vel
|
|
venenatis
|
|
turpis venenatis. Nulla tempus tortor at eros efficitur, sit amet dapibus ipsum malesuada. Ut at mauris sed
|
|
nunc
|
|
malesuada convallis. Duis id sem vel magna varius eleifasd vel at est. Donec eget orci a ipsum tempor
|
|
lobortis.
|
|
Sed at consectetur ipsum.
|
|
</div>
|
|
</div>
|
|
|
|
<div id="contains_inner_text_fixed_width_shorter_text" style="width:2000px;height:2000px;align-items: flex-start;">
|
|
<div style="flex-direction:row;width:100px">
|
|
Lorem ipsum
|
|
</div>
|
|
</div>
|
|
|
|
<div id="contains_inner_text_fixed_height_shorter_text" style="width:2000px;height:2000px;align-items: flex-start;">
|
|
<div style="flex-direction:row;height:100px">
|
|
Lorem ipsum
|
|
</div>
|
|
</div>
|
|
|
|
<div id="contains_inner_text_max_height" style="width:2000px;height:2000px;align-items: flex-start;">
|
|
<div style="flex-direction:row;max-height:20px">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifasd et tortor ac auctor. Integer at
|
|
volutpat
|
|
libero, sed elementum dui interdum id. Aliquam consectetur massa vel neque aliquet, quis consequat risus
|
|
fringilla. Fusce rhoncus ipsum tempor eros aliquam, vel tempus metus ullamcorper. Nam at nulla sed tellus
|
|
vestibulum fringilla vel sit amet ligula. Proin velit lectus, euismod sit amet quam vel ultricies dolor,
|
|
vitae
|
|
finibus lorem ipsum. Pellentesque molestie at mi sit amet dictum. Donec vehicula lacinia felis sit amet
|
|
consectetur. Praesent sodales enim sapien, sed varius ipsum pellentesque vel. Aenean eu mi eu justo
|
|
tincidunt
|
|
finibus vel sit amet ipsum. Sed bibasdum purus vel ipsum sagittis, quis fermentum dolor lobortis. Etiam
|
|
vulputate eleifasd lectus vel varius.
|
|
Phasellus imperdiet lectus sit amet ipsum egestas, ut bibasdum ipsum malesuada. Vestibulum ante ipsum primis
|
|
in
|
|
faucibus orci luctus et ultrices posuere cubilia Curae; Sed mollis eros sit amet elit porttitor, vel
|
|
venenatis
|
|
turpis venenatis. Nulla tempus tortor at eros efficitur, sit amet dapibus ipsum malesuada. Ut at mauris sed
|
|
nunc
|
|
malesuada convallis. Duis id sem vel magna varius eleifasd vel at est. Donec eget orci a ipsum tempor
|
|
lobortis.
|
|
Sed at consectetur ipsum.
|
|
</div>
|
|
</div>
|
|
|
|
<div id="max_content_width" style="flex-direction: row; width:max-content; flex-wrap: wrap;">
|
|
<div style="width: 50px; height: 50px;">
|
|
</div>
|
|
<div style="width: 100px; height: 50px;">
|
|
</div>
|
|
<div style="width: 25px; height: 50px;">
|
|
</div>
|
|
</div>
|
|
|
|
<div data-disabled="true" id="fit_content_width" style="width: 90px;">
|
|
<div style="flex-direction: row; width: fit-content; flex-wrap: wrap;">
|
|
<div style="width: 50px; height: 50px;">
|
|
</div>
|
|
<div style="width: 100px; height: 50px;">
|
|
</div>
|
|
<div style="width: 25px; height: 50px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="stretch_width" style="width: 500px;">
|
|
<div style="flex-direction: row; width: -webkit-fill-available; flex-wrap: wrap;">
|
|
<div style="width: 50px; height: 50px;">
|
|
</div>
|
|
<div style="width: 100px; height: 50px;">
|
|
</div>
|
|
<div style="width: 25px; height: 50px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="max_content_height" style="height:max-content; flex-wrap: wrap;">
|
|
<div style="width: 50px; height: 50px;">
|
|
</div>
|
|
<div style="width: 50px; height: 100px;">
|
|
</div>
|
|
<div style="width: 50px; height: 25px;">
|
|
</div>
|
|
</div>
|
|
|
|
<div data-disabled="true" id="fit_content_height" style="height: 90px; ">
|
|
<div style="height: fit-content; flex-wrap: wrap;">
|
|
<div style="width: 50px; height: 50px;">
|
|
</div>
|
|
<div style="width: 50px; height: 100px;">
|
|
</div>
|
|
<div style="width: 50px; height: 25px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-disabled="true" id="stretch_height" style="height: 500px;">
|
|
<div style="height: -webkit-fill-available; flex-wrap: wrap;">
|
|
<div style="width: 50px; height: 50px;">
|
|
</div>
|
|
<div style="width: 50px; height: 100px;">
|
|
</div>
|
|
<div style="width: 50px; height: 25px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="max_content_flex_basis_column" style="flex-basis: max-content; flex-wrap: wrap;">
|
|
<div style="width: 50px; height: 50px;">
|
|
</div>
|
|
<div style="width: 50px; height: 100px;">
|
|
</div>
|
|
<div style="width: 50px; height: 25px;">
|
|
</div>
|
|
</div>
|
|
|
|
<div data-disabled="true" id="fit_content_flex_basis_column" style="height: 90px;">
|
|
<div style="flex-basis: fit-content; flex-wrap: wrap;">
|
|
<div style="width: 50px; height: 50px;">
|
|
</div>
|
|
<div style="width: 50px; height: 100px;">
|
|
</div>
|
|
<div style="width: 50px; height: 25px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="stretch_flex_basis_column" style="height: 500px;">
|
|
<div style="flex-basis: -webkit-fill-available; flex-wrap: wrap;">
|
|
<div style="width: 50px; height: 50px;">
|
|
</div>
|
|
<div style="width: 50px; height: 100px;">
|
|
</div>
|
|
<div style="width: 50px; height: 25px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-disabled="true" id="max_content_flex_basis_row" style="flex-direction: row; flex-basis: max-content; flex-wrap: wrap;">
|
|
<div style="width: 50px; height: 50px;">
|
|
</div>
|
|
<div style="width: 100px; height: 500px;">
|
|
</div>
|
|
<div style="width: 25px; height: 50px;">
|
|
</div>
|
|
</div>
|
|
|
|
<div data-disabled="true" id="fit_content_flex_basis_row" style="width: 90px;">
|
|
<div style="flex-direction: row; flex-basis: fit-content; flex-wrap: wrap;">
|
|
<div style="width: 50px; height: 50px;">
|
|
</div>
|
|
<div style="width: 100px; height: 50px;">
|
|
</div>
|
|
<div style="width: 25px; height: 50px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-disabled="true" id="stretch_flex_basis_row" style="width: 500px;">
|
|
<div style="flex-direction: row; flex-basis: -webkit-fill-available; flex-wrap: wrap;">
|
|
<div style="width: 50px; height: 50px;">
|
|
</div>
|
|
<div style="width: 100px; height: 50px;">
|
|
</div>
|
|
<div style="width: 25px; height: 50px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-disabled="true" id="max_content_max_width"
|
|
style="flex-direction: row; max-width:max-content; width: 200px; flex-wrap: wrap;">
|
|
<div style="width: 50px; height: 50px;">
|
|
</div>
|
|
<div style="width: 100px; height: 50px;">
|
|
</div>
|
|
<div style="width: 25px; height: 50px;">
|
|
</div>
|
|
</div>
|
|
|
|
<div data-disabled="true" id="fit_content_max_width" style="width: 90px;">
|
|
<div style="flex-direction: row; max-width: fit-content; width: 110px; flex-wrap: wrap;">
|
|
<div style="width: 50px; height: 50px;">
|
|
</div>
|
|
<div style="width: 100px; height: 50px;">
|
|
</div>
|
|
<div style="width: 25px; height: 50px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-disabled="true" id="stretch_max_width" style="width: 500px;">
|
|
<div style="flex-direction: row; max-width: -webkit-fill-available; width: 600px; flex-wrap: wrap;">
|
|
<div style="width: 50px; height: 50px;">
|
|
</div>
|
|
<div style="width: 100px; height: 50px;">
|
|
</div>
|
|
<div style="width: 25px; height: 50px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-disabled="true" id="max_content_min_width"
|
|
style="flex-direction: row; min-width:max-content; width: 100px; flex-wrap: wrap;">
|
|
<div style="width: 50px; height: 50px;">
|
|
</div>
|
|
<div style="width: 100px; height: 50px;">
|
|
</div>
|
|
<div style="width: 25px; height: 50px;">
|
|
</div>
|
|
</div>
|
|
|
|
<div data-disabled="true" id="fit_content_min_width" style="width: 90px;">
|
|
<div style="flex-direction: row; min-width: fit-content; width: 90px; flex-wrap: wrap;">
|
|
<div style="width: 50px; height: 50px;">
|
|
</div>
|
|
<div style="width: 100px; height: 50px;">
|
|
</div>
|
|
<div style="width: 25px; height: 50px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-disabled="true" id="stretch_min_width" style="width: 500px;">
|
|
<div style="flex-direction: row; min-width: -webkit-fill-available; width: 400px; flex-wrap: wrap;">
|
|
<div style="width: 50px; height: 50px;">
|
|
</div>
|
|
<div style="width: 100px; height: 50px;">
|
|
</div>
|
|
<div style="width: 25px; height: 50px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-disabled="true" id="max_content_max_height" style="max-height:max-content; height: 200px; flex-wrap: wrap;">
|
|
<div style="width: 50px; height: 50px;">
|
|
</div>
|
|
<div style="width: 50px; height: 100px;">
|
|
</div>
|
|
<div style="width: 50px; height: 25px;">
|
|
</div>
|
|
</div>
|
|
|
|
<div data-disabled="true" id="fit_content_max_height" style="height: 90px;">
|
|
<div style="max-height: fit-content; height: 110px; flex-wrap: wrap;">
|
|
<div style="width: 50px; height: 50px;">
|
|
</div>
|
|
<div style="width: 50px; height: 100px;">
|
|
</div>
|
|
<div style="width: 50px; height: 25px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-disabled="true" id="stretch_max_height" style="height: 500px;">
|
|
<div style="max-height: -webkit-fill-available; flex-wrap: wrap; height: 600px;">
|
|
<div style="width: 50px; height: 50px;">
|
|
</div>
|
|
<div style="width: 50px; height: 100px;">
|
|
</div>
|
|
<div style="width: 50px; height: 25px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-disabled="true" id="max_content_min_height" style="min-height:max-content; height: 100px; flex-wrap: wrap;">
|
|
<div style="width: 50px; height: 50px;">
|
|
</div>
|
|
<div style="width: 50px; height: 100px;">
|
|
</div>
|
|
<div style="width: 50px; height: 25px;">
|
|
</div>
|
|
</div>
|
|
|
|
<div data-disabled="true" id="fit_content_min_height" style="height: 90px;">
|
|
<div style="min-height: fit-content; height: 90px; flex-wrap: wrap;">
|
|
<div style="width: 50px; height: 50px;">
|
|
</div>
|
|
<div style="width: 50px; height: 100px;">
|
|
</div>
|
|
<div style="width: 50px; height: 25px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-disabled="true" id="stretch_min_height" style="height: 500px;">
|
|
<div style="min-height: -webkit-fill-available; flex-wrap: wrap; height: 400px;">
|
|
<div style="width: 50px; height: 50px;">
|
|
</div>
|
|
<div style="width: 50px; height: 100px;">
|
|
</div>
|
|
<div style="width: 50px; height: 25px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-disabled="true" id="text_max_content_width" style="width: 200px">
|
|
<div style="width: max-content;">
|
|
<div style="flex-direction:row;">
|
|
Lorem ipsum sdafhasdfkjlasdhlkajsfhasldkfhasdlkahsdflkjasdhflaksdfasdlkjhasdlfjahsdfljkasdhalsdfhas dolor sit amet
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-disabled="true" id="text_stretch_width" style="width: 200px">
|
|
<div style="width: -webkit-fill-available;">
|
|
<div style="flex-direction:row;">
|
|
Lorem ipsum dolor sit amet
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-disabled="true" id="text_fit_content_width" style="width: 200px">
|
|
<div style="width: fit-content;">
|
|
<div style="flex-direction:row;">
|
|
Lorem ipsum sdafhasdfkjlasdhlkajsfhasldkfhasdlkahsdflkjasdhflaksdfasdlkjhasdlfjahsdfljkasdhalsdfhas dolor sit amet
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-disabled="true" id="text_max_content_min_width" style="width: 200px">
|
|
<div style="min-width: max-content; width: 200px;">
|
|
<div style="flex-direction:row;">
|
|
Lorem ipsum sdafhasdfkjlasdhlkajsfhasldkfhasdlkahsdflkjasdhflaksdfasdlkjhasdlfjahsdfljkasdhalsdfhas dolor sit amet
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-disabled="true" id="text_stretch_min_width" style="width: 200px">
|
|
<div style="min-width: -webkit-fill-available; width: 100px;">
|
|
<div style="flex-direction:row;">
|
|
Lorem ipsum dolor sit amet
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-disabled="true" data-disabled="true" id="text_fit_content_min_width" style="width: 200px">
|
|
<div style="min-width: fit-content; width: 300px">
|
|
<div style="flex-direction:row;">
|
|
Lorem ipsum sdafhasdfkjlasdhlkajsfhasldkfhasdlkahsdflkjasdhflaksdfasdlkjhasdlfjahsdfljkasdhalsdfhas dolor sit amet
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-disabled="true" id="text_max_content_max_width" style="width: 200px">
|
|
<div style="max-width: max-content; width: 2000px;">
|
|
<div style="flex-direction:row;">
|
|
Lorem ipsum sdafhasdfkjlasdhlkajsfhasldkfhasdlkahsdflkjasdhflaksdfasdlkjhasdlfjahsdfljkasdhalsdfhas dolor sit amet
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-disabled="true" id="text_stretch_max_width" style="width: 200px">
|
|
<div style="max-width: -webkit-fill-available; width: 300px;">
|
|
<div style="flex-direction:row;">
|
|
Lorem ipsum dolor sit amet
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-disabled="true" id="text_fit_content_max_width" style="width: 200px">
|
|
<div style="max-width: fit-content; width: 1000px">
|
|
<div style="flex-direction:row;">
|
|
Lorem ipsum sdafhasdfkjlasdhlkajsfhasldkfhasdlkahsdflkjasdhflaksdfasdlkjhasdlfjahsdfljkasdhalsdfhas dolor sit amet
|
|
</div>
|
|
</div>
|
|
</div>
|