Google Git
Sign in
nest-open-source / manifest_repos / chromium_src / 1389d67935ffbffe8a70c1fa06867f6cf7ecf464 / . / chromium / src / third_party / blink / web_tests / fast / css / getComputedStyle / computed-style-percentage-top-with-position.html
blob: ff70a025bcc6cf8046be4166d44fb215fb661933 [file] [log] [blame]
<!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>