<!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>