<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
#without_top {
top: auto;
}
#with_top {
top: 0px;
}
#with_bottom {
bottom: 0px;
}
.box {
position: sticky;
}
</style>
<div class="box" id="without_top"></div>
<div class="box" id="with_top"></div>
<div class="box" id="with_bottom"></div>
<script>
test(() => {
var element = document.getElementById('without_top');
assert_equals(getComputedStyle(element).top, 'auto');
}, 'top property should be auto if not specified.');
test(() => {
var element = document.getElementById('with_top');
assert_equals(getComputedStyle(element).top, '0px');
}, 'top property should be the actual value if specified.');
test(() => {
var element = document.getElementById('with_bottom');
assert_equals(getComputedStyle(element).top, 'auto');
}, 'top property should be auto if only bottom is specified.');
</script>