computed-style-percentage-top-with-position.html

<!DOCTYPE html>
<style>
.positionStatic { position: static; }
.positionRelative { position: relative; }
.positionAbsolute { position: absolute; }
.positionFixed { position: fixed; }

#outer {
    border: 10px solid red;
    margin: 20px;
    padding: 30px;
}

#outer-relative-height {
    border: 10px solid red;
    margin: 20px;
    padding: 30px;
    height: 50%;
}

#inner {
    width: 20px;
    height: 20px;
    top: 50%;
    background: blue;
}

</style>
<div id='outer'>
    <div id='inner'></div>
</div>
<script src="../../../resources/js-test.js"></script>
<script>
    var outer = document.querySelector("#outer");
    var inner = document.querySelector("#inner");
    var computedStyle = window.getComputedStyle(inner, null);

    outer.className = 'positionStatic';
    inner.className = 'positionStatic';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "50%");
    inner.className = 'positionRelative';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "10px");
    inner.className = 'positionAbsolute';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "300px");
    inner.className = 'positionFixed';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "300px");

    outer.className = 'positionRelative';
    inner.className = 'positionStatic';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "50%");
    inner.className = 'positionRelative';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "10px");
    inner.className = 'positionAbsolute';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "30px");
    inner.className = 'positionFixed';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "300px");

    outer.className = 'positionAbsolute';
    inner.className = 'positionStatic';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "50%");
    inner.className = 'positionRelative';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "10px");
    inner.className = 'positionAbsolute';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "30px");
    inner.className = 'positionFixed';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "300px");

    outer.className = 'positionFixed';
    inner.className = 'positionStatic';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "50%");
    inner.className = 'positionRelative';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "10px");
    inner.className = 'positionAbsolute';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "30px");
    inner.className = 'positionFixed';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "300px");


    outer.id = "outer-relative-height";

    outer.className = 'positionStatic';
    inner.className = 'positionStatic';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "50%");
    inner.className = 'positionRelative';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "10px");
    inner.className = 'positionAbsolute';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "300px");
    inner.className = 'positionFixed';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "300px");

    outer.className = 'positionRelative';
    inner.className = 'positionStatic';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "50%");
    inner.className = 'positionRelative';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "10px");
    inner.className = 'positionAbsolute';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "30px");
    inner.className = 'positionFixed';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "300px");

    outer.className = 'positionAbsolute';
    inner.className = 'positionStatic';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "50%");
    inner.className = 'positionRelative';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "150px");
    inner.className = 'positionAbsolute';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "180px");
    inner.className = 'positionFixed';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "300px");

    outer.className = 'positionFixed';
    inner.className = 'positionStatic';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "50%");
    inner.className = 'positionRelative';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "150px");
    inner.className = 'positionAbsolute';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "180px");
    inner.className = 'positionFixed';
    shouldBeEqualToString("computedStyle.getPropertyValue('top')", "300px");
</script>
chromium/third_party/blink/web_tests/fast/css/getComputedStyle/computed-style-percentage-top-with-position.html
