Files
yoga/gentest/fixtures/YGIntrinsicSizeTest.html
Joe Vilches e177477144 Add text based intrinsic sizing tests (#1759)
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
2024-12-02 17:29:49 -08:00

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>