yoga/gentest/fixtures/YGStaticPositionTest.html

<!-- The top level divs in each test are needed so that each div overlays each
     other and the top measurement is accurate -->
<div id="static_position_insets_have_no_effect_left_top">
    <div style="width: 100px; height: 100px; position: static; top: 50px; left: 50px;">
    </div>
</div>

<div id="static_position_insets_have_no_effect_right_bottom">
    <div style="width: 100px; height: 100px; position: static; bottom: 50px; right: 50px;">
    </div>
</div>

<div id="static_position_absolute_child_insets_relative_to_positioned_ancestor">
    <div style="width: 200px; height: 200px; position: relative">
        <div style="height: 100px; width: 100px; margin-left: 100px; position: static">
            <div style="height: 50px; width: 50px; position: absolute; top: 50px; left: 50px;">
            </div>
        </div>
    </div>
</div>

<div id="static_position_absolute_child_insets_relative_to_positioned_ancestor_deep">
    <div style="width: 200px; height: 200px; position: relative">
        <div style="height: 100px; width: 100px; margin-left: 100px; position: static">
            <div style="height: 100px; width: 100px; margin-left: 100px; position: static">
                <div style="height: 100px; width: 100px; margin-left: 100px; position: static">
                    <div style="height: 100px; width: 100px; margin-left: 100px; position: static">
                        <div style="height: 50px; width: 50px; position: absolute; top: 50px; left: 50px;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="static_position_absolute_child_width_percentage">
    <div style="width: 200px; height: 200px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50px; width: 50%; position: absolute">
            </div>
        </div>
    </div>
</div>

<div id="static_position_relative_child_width_percentage">
    <div style="width: 200px; height: 200px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50px; width: 50%; position: relative">
            </div>
        </div>
    </div>
</div>

<div id="static_position_static_child_width_percentage">
    <div style="width: 200px; height: 200px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50px; width: 50%; position: static">
            </div>
        </div>
    </div>
</div>

<div id="static_position_absolute_child_height_percentage">
    <div style="width: 200px; height: 200px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50%; width: 50px; position: absolute">
            </div>
        </div>
    </div>
</div>

<div id="static_position_relative_child_height_percentage">
    <div style="width: 200px; height: 200px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50%; width: 50px; position: relative">
            </div>
        </div>
    </div>
</div>

<div id="static_position_static_child_height_percentage">
    <div style="width: 200px; height: 200px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50%; width: 50px; position: static">
            </div>
        </div>
    </div>
</div>

<div id="static_position_absolute_child_left_percentage">
    <div style="width: 200px; height: 200px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50px; width: 50px; left: 50%; position: absolute">
            </div>
        </div>
    </div>
</div>

<div id="static_position_relative_child_left_percentage">
    <div style="width: 200px; height: 200px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50px; width: 50px; left: 50%; position: relative">
            </div>
        </div>
    </div>
</div>

<div id="static_position_static_child_left_percentage">
    <div style="width: 200px; height: 200px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50px; width: 50px; left: 50%; position: static">
            </div>
        </div>
    </div>
</div>

<div id="static_position_absolute_child_right_percentage">
    <div style="width: 200px; height: 200px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50px; width: 50px; right: 50%; position: absolute">
            </div>
        </div>
    </div>
</div>

<div id="static_position_relative_child_right_percentage">
    <div style="width: 200px; height: 200px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50px; width: 50px; right: 50%; position: relative">
            </div>
        </div>
    </div>
</div>

<div id="static_position_static_child_right_percentage">
    <div style="width: 200px; height: 200px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50px; width: 50px; right: 50%; position: static">
            </div>
        </div>
    </div>
</div>

<div id="static_position_absolute_child_top_percentage">
    <div style="width: 200px; height: 200px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50px; width: 50px; top: 50%; position: absolute">
            </div>
        </div>
    </div>
</div>

<div id="static_position_relative_child_top_percentage">
    <div style="width: 200px; height: 200px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50px; width: 50px; top: 50%; position: relative">
            </div>
        </div>
    </div>
</div>

<div id="static_position_static_child_top_percentage">
    <div style="width: 200px; height: 200px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50px; width: 50px; top: 50%; position: static">
            </div>
        </div>
    </div>
</div>

<div id="static_position_absolute_child_bottom_percentage">
    <div style="width: 200px; height: 200px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50px; width: 50px; bottom: 50%; position: absolute">
            </div>
        </div>
    </div>
</div>

<div id="static_position_relative_child_bottom_percentage">
    <div style="width: 200px; height: 200px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50px; width: 50px; bottom: 50%; position: relative">
            </div>
        </div>
    </div>
</div>

<div id="static_position_static_child_bottom_percentage">
    <div style="width: 200px; height: 200px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50px; width: 50px; bottom: 50%; position: static">
            </div>
        </div>
    </div>
</div>

<div id="static_position_absolute_child_margin_percentage">
    <div style="width: 200px; height: 200px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50px; width: 50px; margin: 50%; position: absolute">
            </div>
        </div>
    </div>
</div>

<div id="static_position_relative_child_margin_percentage">
    <div style="width: 200px; height: 200px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50px; width: 50px; margin: 50%; position: relative">
            </div>
        </div>
    </div>
</div>

<div id="static_position_static_child_margin_percentage">
    <div style="width: 200px; height: 200px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50px; width: 50px; margin: 50%; position: static">
            </div>
        </div>
    </div>
</div>

<div id="static_position_absolute_child_padding_percentage">
    <div style="width: 200px; height: 200px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50px; width: 50px; padding: 50%; position: absolute">
            </div>
        </div>
    </div>
</div>

<div id="static_position_relative_child_padding_percentage">
    <div style="width: 200px; height: 200px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50px; width: 50px; padding: 50%; position: relative">
            </div>
        </div>
    </div>
</div>

<div id="static_position_static_child_padding_percentage">
    <div style="width: 200px; height: 200px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50px; width: 50px; padding: 50%; position: static">
            </div>
        </div>
    </div>
</div>

<div id="static_position_absolute_child_border_percentage">
    <div style="width: 200px; height: 200px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50px; width: 50px; border: 50%; position: absolute">
            </div>
        </div>
    </div>
</div>

<div id="static_position_relative_child_border_percentage">
    <div style="width: 200px; height: 200px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50px; width: 50px; border: 50%; position: relative">
            </div>
        </div>
    </div>
</div>

<div id="static_position_static_child_border_percentage">
    <div style="width: 200px; height: 200px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50px; width: 50px; border: 50%; position: static">
            </div>
        </div>
    </div>
</div>

<div id="static_position_absolute_child_containing_block_padding_box">
    <div style="width: 400px; height: 400px; padding: 100px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50px; width: 50%; position: absolute">
            </div>
        </div>
    </div>
</div>

<div id="static_position_relative_child_containing_block_padding_box">
    <div style="width: 400px; height: 400px; padding: 100px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50px; width: 50%; position: relative">
            </div>
        </div>
    </div>
</div>

<div id="static_position_static_child_containing_block_padding_box">
    <div style="width: 400px; height: 400px; padding: 100px; position: relative">
        <div style="height:100px; width: 100px; position: static">
            <div style="height: 50px; width: 50%; position: static">
            </div>
        </div>
    </div>
</div>

<div id="static_position_absolute_child_containing_block_content_box" data-disabled="true">
    <div style="width: 400px; height: 400px; padding: 100px; position: relative">
        <div style="height:50px; width: 50%; position: absolute">
        </div>
    </div>
</div>

<div id="static_position_relative_child_containing_block_content_box">
    <div style="width: 400px; height: 400px; padding: 100px; position: relative">
        <div style="height:50px; width: 50%; position: relative">
        </div>
    </div>
</div>

<div id="static_position_static_child_containing_block_content_box">
    <div style="width: 400px; height: 400px; padding: 100px; position: relative">
        <div style="height:50px; width: 50%; position: static">
        </div>
    </div>
</div>