<!DOCTYPE html><title>CSSOM View - scrollIntoView considers vertical-lr and rtl direction</title><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1"><linkrel="author"title="Cathie Chen"href="mailto:cathiechen@igalia.com"><linkrel="help"href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview"><linkrel="help"href="https://drafts.csswg.org/cssom-view/#scroll-an-element"><scriptsrc="/resources/testharness.js"></script><scriptsrc="/resources/testharnessreport.js"></script><style>.box{float:left;width:200px;height:200px;}#scroller{writing-mode:vertical-lr;direction:rtl;overflow:scroll;width:300px;height:300px;}#container{width:600px;height:600px;}#target{background-color:#ff0;}</style><body><divid="scroller"><divid="container"><!-- ROW-1 --><divclass="row"><divclass="box"></div><divclass="box"></div><divclass="box"></div></div><!-- ROW-2 --><divclass="row"><divclass="box"></div><divclass="box"id="target"></div><divclass="box"></div></div><!-- ROW-3 --><divclass="row"><divclass="box"></div><divclass="box"></div><divclass="box"></div></div></div></div><script>// In vertical-lr mode and rtl direction, X corresponds to the block axis// and is oriented rightward. Y corresponds to the inline axis and is oriented// upward. So the beginning edges are the bottom and left edges and the ending// edges are the top and right edges.// According to the spec, y be min(0, max(y, element padding edge height - element scrolling area height)).// So y is nonpositive and decreases upward.// This assumes that the horizontal scrollbar// is on the bottom side and the vertical scrollbar is on the right side.vartarget=document.getElementById("target");varscroller=document.getElementById("scroller");varscrollbar_width=scroller.offsetWidth-scroller.clientWidth;varscroller_width=scroller.offsetWidth;varscroller_height=scroller.offsetHeight;varbox_width=target.offsetWidth;varbox_height=target.offsetHeight;varexpectedX={blockStart:box_width,blockCenter:(3*box_width-scroller_width)/2+scrollbar_width/2,blockEnd:2*box_width-scroller_width+scrollbar_width,};varexpectedY={inlineStart:-box_height,inlineCenter:-((3*box_height-scroller_height)/2)-scrollbar_width/2,inlineEnd:-(2*box_height-scroller_height)-scrollbar_width,};[[{block:"start",inline:"start"},expectedX.blockStart,expectedY.inlineStart],[{block:"start",inline:"center"},expectedX.blockStart,expectedY.inlineCenter],[{block:"start",inline:"end"},expectedX.blockStart,expectedY.inlineEnd],[{block:"center",inline:"start"},expectedX.blockCenter,expectedY.inlineStart],[{block:"center",inline:"center"},expectedX.blockCenter,expectedY.inlineCenter],[{block:"center",inline:"end"},expectedX.blockCenter,expectedY.inlineEnd],[{block:"end",inline:"start"},expectedX.blockEnd,expectedY.inlineStart],[{block:"end",inline:"center"},expectedX.blockEnd,expectedY.inlineCenter],[{block:"end",inline:"end"},expectedX.blockEnd,expectedY.inlineEnd],].forEach(([input,expectedX,expectedY])=>{test(()=>{scroller.scrollTo(0,0);target.scrollIntoView(input);assert_approx_equals(scroller.scrollLeft,expectedX,0.5,"scrollX");assert_approx_equals(scroller.scrollTop,expectedY,0.5,"scrollY");},`scrollIntoView(${JSON.stringify(input)})`);})</script></body></html>