<h4>Tests that scroll-boundary-behavior prevents scroll-propagation in the area and direction as specified.</h4>

<ol>

<liid="i1">Make two scrolls on <spanstyle="color: blue">BLUE</span>, in this order: scroll UP (or drag down), then scroll LEFT (or drag right). Scroll (or drag) until nothing is scrolling. Then tap on DONE.</li>

<liid="i2">Repeat the same scrolls as in step 1 and then tap on DONE.</li>

<liid="i3">Repeat the same scrolls as in step 1 and then tap on DONE.</li>

<liid="i4">Make two separate scrolls on <spanstyle="color: green">GREEN</span>, in this order: scroll UP (or drag down), then scroll LEFT (or drag right). Scroll (or drag) until nothing is scrolling. Then tap on DONE.</li>

</ol>

<script>

const container = document.getElementById('container');

const non_scrollable = document.getElementById('non_scrollable');

const root = document.getElementById('root');

var test = async_test("scroll-boundary-behavior prevents scroll-propagation in the area and direction as specified");

var instruction1 = document.getElementById("i1");

var instruction2 = document.getElementById("i2");

var instruction3 = document.getElementById("i3");

var instruction4 = document.getElementById("i4");

function setUpForRoot(offset){

root.scrollTop = offset;

root.scrollLeft = offset;

}

function setUpForContainer(offset){

container.scrollTop = offset;

container.scrollLeft = offset

}

function set_boundary_prevents_y(){

instruction1.style.color ='red';

instruction1.style.fontWeight ='bold';

container.style.scrollBoundaryBehaviorX ='auto';

container.style.scrollBoundaryBehaviorY ='none';

setUpForRoot(100);

setUpForContainer(0);

}

function verify_y_prevented_and_set_boundary_prevents_x(){

instruction1.style.fontWeight ='normal';

instruction2.style.fontWeight ='bold';

test.step(function(){

assert_equals(root.scrollTop,100);

assert_equals(root.scrollLeft,0);

},"scroll-boundary-behavior-y: none should only prevent scroll propagation on y axis.");

container.style.scrollBoundaryBehaviorX ='none';

container.style.scrollBoundaryBehaviorY ='auto';

setUpForRoot(100);

setUpForContainer(0);

}

function verify_x_prevented_and_set_boundary_allows_inner(){

instruction2.style.fontWeight ='normal';

instruction3.style.fontWeight ='bold';

test.step(function(){

assert_equals(root.scrollTop,0);

assert_equals(root.scrollLeft,100);

},"scroll-boundary-behavior-x: none should only prevent scroll propagation on x axis.");