<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
body {
    margin: 0;
}

#scroller {
    height: 100px;
    width: 200px;
    overflow-y: scroll;
}

.paddingBefore {
    height: 150px;
}

#sticky {
    height: 50px;
    position: sticky;
    top: 20px;
}

.paddingAfter {
    height: 500px;
}
</style>

<div id="scroller">
  <div class="paddingBefore"></div>
  <div id="writer"></div>
  <div id="sticky"></div>
  <div class="paddingAfter"></div>
</div>

<script>
// These tests currently mimic the behavior of Firefox for the interaction
// between scrollIntoView() and position:sticky, where the offset location of
// the sticky element is used to determine how far to scroll. This means that
// scrollIntoView() may scroll even when the sticky is already 'in view', and
// attempts to scroll so that the offset position of the sticky is at the top
// of the screen.
//
// TODO(smcgruer): Update tests once http://crbug.com/664246 is resolved.

test(function() {
    var scroller = document.getElementById('scroller');
    var sticky = document.getElementById('sticky');
    var writer = document.getElementById('writer');

    // Clean the writer.
    writer.innerHTML = '';

    // With no scroll, the sticky element is outside the scroller viewport.
    scroller.scrollTop = 0;

    // Deliberately dirty layout to make sure that scrollIntoView() still works.
    writer.innerHTML = '<div style="height: 50px;"></div>';

    sticky.scrollIntoView();
    assert_equals(scroller.scrollTop, 200);
}, "scrollIntoView should scroll when sticky is not visible");

test(function() {
    var scroller = document.getElementById('scroller');
    var sticky = document.getElementById('sticky');
    var writer = document.getElementById('writer');

    // Clean the writer.
    writer.innerHTML = '';

    // Scroll so that the sticky element is past the top of the scroller
    // viewport, and is thus sticking.
    scroller.scrollTop = 200;

    // Deliberately dirty layout to make sure that scrollIntoView() still works.
    writer.innerHTML = '<div style="height: 10px;"></div>';

    // See comment above tests for why this shifts by an additional 20 pixels.
    sticky.scrollIntoView();
    assert_equals(scroller.scrollTop, 230);
}, "scrollIntoView should scroll when sticky is already in view");

test(function() {
    var scroller = document.getElementById('scroller');
    var sticky = document.getElementById('sticky');
    var writer = document.getElementById('writer');

    // Clean the writer.
    writer.innerHTML = '';

    // With no scroll, the sticky element is outside the scroller viewport.
    scroller.scrollTop = 0;

    // Deliberately dirty layout to make sure that scrollIntoViewIfNeeded()
    // still works.
    writer.innerHTML = '<div style="height: 70px;"></div>';

    sticky.scrollIntoViewIfNeeded();
    assert_equals(scroller.scrollTop, 195);
}, "scrollIntoViewIfNeeded should scroll when sticky is not visible");

test(function() {
    var scroller = document.getElementById('scroller');
    var sticky = document.getElementById('sticky');
    var writer = document.getElementById('writer');

    // Clean the writer.
    writer.innerHTML = '';

    // Scroll so that the sticky element is at the top of the scroller viewport.
    scroller.scrollTop = 150;

    // Deliberately dirty layout to make sure that scrollIntoViewIfNeeded()
    // still works.
    writer.innerHTML = '<div style="height: 20px;"></div>';

    // The scroll top moves to 170 due to scroll-anchoring, but should then not
    // shift if we call scrollIntoViewIfNeeded.
    assert_equals(scroller.scrollTop, 170);
    sticky.scrollIntoViewIfNeeded();
    assert_equals(scroller.scrollTop, 170);
}, "scrollIntoViewIfNeeded should not scroll when sticky is already in view");
</script>