<!DOCTYPE html> <title>CSSOM View - scrollIntoView considers vertical-lr writing mode</title> <meta charset="utf-8"> <link rel="author" title="Cathie Chen" href="mailto:cathiechen@igalia.com"> <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <style> .box { float: left; width: 200px; height: 200px; } #scroller { writing-mode: vertical-lr; overflow: scroll; width: 300px; height: 300px; } #container{ width: 600px; height: 600px; } #target { background-color: #ff0; } </style> <body> <div id="scroller"> <div id="container"> <!-- ROW-1 --> <div class="row"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <!-- ROW-2 --> <div class="row"> <div class="box"></div> <div class="box" id="target"></div> <div class="box"></div> </div> <!-- ROW-3 --> <div class="row"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </div> </div> <script> // In vertical-lr mode, X corresponds to the block axis and is oriented // rightward. Y corresponds to the inline axis and is oriented downward. // So the beginning edges are the top and left edges and the ending // edges are the bottom and right edges. // This assumes that the horizontal scrollbar is on the bottom side and // the vertical scrollbar is on the right side. var target = document.getElementById("target"); var scroller = document.getElementById("scroller"); var scrollbar_width = scroller.offsetWidth - scroller.clientWidth; var scroller_width = scroller.offsetWidth; var scroller_height = scroller.offsetHeight; var box_width = target.offsetWidth; var box_height = target.offsetHeight; var expectedX = { blockStart: box_width, blockCenter: (3*box_width - scroller_width)/2 + (scrollbar_width/2), blockEnd: (2*box_width) - scroller_width + scrollbar_width, }; var expectedY = { 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>