yoga/gentest/fixtures/YGIntrinsicSizeTest.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">
    <div style="width: 90px; position: relative;">
        <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>

<div data-disabled="true" id="stretch_width">
    <div style="width: 500px; position: relative;">
        <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>

<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">
    <div style="height: 90px; position: relative;">
        <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>

<div data-disabled="true" id="stretch_height">
    <div style="height: 500px; position: relative;">
        <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>

<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">
    <div style="height: 90px; position: relative;">
        <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>

<div data-disabled="true" id="stretch_flex_basis_column">
    <div style="height: 500px; position: relative;">
        <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>

<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">
    <div style="width: 90px; position: relative;">
        <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>

<div data-disabled="true" id="stretch_flex_basis_row">
    <div style="width: 500px; position: relative;">
        <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>

<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">
    <div style="width: 90px; position: relative;">
        <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>

<div data-disabled="true" id="stretch_max_width">
    <div style="width: 500px; position: relative;">
        <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>

<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">
    <div style="width: 90px; position: relative;">
        <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>

<div data-disabled="true" id="stretch_min_width">
    <div style="width: 500px; position: relative;">
        <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>

<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">
    <div style="height: 90px; position: relative;">
        <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>

<div data-disabled="true" id="stretch_max_height">
    <div style="height: 500px; position: relative;">
        <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>

<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">
    <div style="height: 90px; position: relative;">
        <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>

<div data-disabled="true" id="stretch_min_height">
    <div style="height: 500px; position: relative;">
        <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>