<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../resources/testdriver.js"></script>
<script src="../../../resources/testdriver-vendor.js"></script>
<script src="../../../resources/gesture-util.js"></script>
<style>
fieldset {
height: 200px;
overflow: scroll;
padding: 0;
}
.content {
height: 400px;
}
</style>
<fieldset id="fs1">
<legend>Legend</legend>
<div class="content"></div>
</fieldset>
<fieldset id="fs2">
<legend>Legend</legend>
<div class="content"></div>
</fieldset>
<script>
function eventPromise(target, type) {
return new Promise((resolve, reject) => {
target.addEventListener(type, resolve);
});
}
promise_test(async () => {
const fieldset = document.querySelector('#fs1');
assert_equals(fieldset.scrollHeight, 400);
await test_driver.click(fieldset);
assert_equals(fieldset.scrollTop, 0);
await test_driver.send_keys(fieldset, ' ');
await eventPromise(fieldset, 'scroll');
assert_greater_than(fieldset.scrollTop, 0);
}, 'Pressing the space bar should scroll up');
promise_test(async () => {
const fieldset = document.querySelector('#fs2');
assert_equals(fieldset.scrollHeight, 400);
assert_equals(fieldset.scrollTop, 0);
await wheelTick(0, 10, elementCenter(fieldset));
assert_greater_than(fieldset.scrollTop, 0);
}, 'Wheel scroll should work');
</script>