Element::scrollIntoViewIfNeeded computes the scroll bounding box by calling...

Element::scrollIntoViewIfNeeded computes the scroll bounding box by calling containerNode::boundingBox(), for performing autoscroll.
This bounding box rect is passed to RenderLayerScrollableArea::exposeRect(), where actual
scroll parent rect to be scrolled is computed.

This bound is computed by using two factors.
current Scroll Offset and the target Scroll Offset.

target scroll offset is Y position of the element which has to be
scrolled into view. This Y position computation includes top border
of the parent container.
for example. in the bug reported page.
Parent grid has border of 5 px so,
the position of first  child would be 5  and
the position of second child would be 55 and so on

But [current]scroll offset is independent of top border.
When target bounding box is computed, target scroll offset is
substracted from current scroll offset which results in incorrect
scroll offset.
for example. in the bug reported page
1. When page loads grid is scrolled to 200.
2. Parents top border is      5,
3. Position of 2nd child is  55
4. so the target scroll offset is computed as,
   55 - 200 = -145 , which is incorrect &
   should be,  50 - 200 = -150
5. Hence the borderTop included in the position causes the issue, and needs to be removed from computed scroll offset value.

BUG=295848

Review URL: https://codereview.chromium.org/568453002

git-svn-id: svn://svn.chromium.org/blink/trunk@183917 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent a6646b64
......@@ -175,6 +175,16 @@ crbug.com/321607 [ Win Debug ] fast/forms/submit-to-blank-multiple-times.html [
# crbug.com/366437 fast/repaint/box-shadow-h.html [ Pass ImageOnlyFailure ]
# crbug.com/366437 fast/repaint/box-shadow-v.html [ Pass ImageOnlyFailure ]
crbug.com/295848 fast/forms/listbox-hit-test-zoomed.html [ NeedsRebaseline ]
crbug.com/295848 fast/forms/select-initial-position.html [ NeedsRebaseline ]
crbug.com/295848 fast/forms/select/menulist-appearance-basic.html [ NeedsRebaseline ]
crbug.com/295848 fast/forms/suggestion-picker/date-suggestion-picker-appearance-with-scroll-bar.html [ NeedsRebaseline ]
crbug.com/295848 fast/forms/suggestion-picker/month-suggestion-picker-appearance-with-scroll-bar.html [ NeedsRebaseline ]
crbug.com/295848 fast/forms/suggestion-picker/week-suggestion-picker-appearance-with-scroll-bar.html [ NeedsRebaseline ]
crbug.com/295848 editing/input/reveal-caret-of-multiline-contenteditable.html [ NeedsRebaseline ]
crbug.com/295848 editing/input/reveal-caret-of-multiline-input.html [ NeedsRebaseline ]
crbug.com/295848 editing/input/caret-at-the-edge-of-contenteditable.html [ NeedsRebaseline ]
# ThemePainter-related diffs, could rebaseline them or implement the clipping/transform code.
crbug.com/229207 [ Win ] fast/forms/datalist/input-appearance-range-with-transform.html [ ImageOnlyFailure ]
......
......@@ -8,8 +8,8 @@ PASS selectionPattern("sl1") is "01000000000000000"
PASS selectionPattern("sl1") is "00000010000000000"
PASS selectionPattern("sl1") is "00000001000000000"
PASS selectionPattern("sl1") is "00000001000000000"
PASS selectionPattern("sl1") is "01000000000000000"
PASS selectionPattern("sl1") is "00000000000000001"
PASS selectionPattern("sl1") is "10000000000000000"
PASS selectionPattern("sl1") is "00000001000000000"
PASS selectionPattern("sl2") is "010"
PASS selectionPattern("sl2") is "010"
PASS selectionPattern("sl2") is "001"
......
......@@ -80,11 +80,11 @@ mouseDownOnSelect("sl1", 8);
shouldBe('selectionPattern("sl1")', '"00000001000000000"');
mouseDownOnSelect("sl1", 0);
shouldBe('selectionPattern("sl1")', '"01000000000000000"');
shouldBe('selectionPattern("sl1")', '"10000000000000000"');
for (i = 0; i < 9; i++)
mouseDownOnSelect("sl1", 7);
shouldBe('selectionPattern("sl1")', '"00000000000000001"');
shouldBe('selectionPattern("sl1")', '"00000001000000000"');
mouseDownOnSelect("sl2", 1);
shouldBe('selectionPattern("sl2")', '"010"');
......
Issue crbug.com/295848: element.scrollIntoViewIfNeeded() does not scroll the entire element render box into view.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS parent.scrollTop is 50
PASS parent.scrollLeft is 50
PASS parent.scrollTop is 0
PASS parent.scrollLeft is 0
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE HTML>
<script src="../../resources/js-test.js"></script>
<style>
td {
width: 48px;
height: 48px;
outline: solid 1px red;
}
</style>
<div id="parent" style="width: 65px; height: 65px; border: solid 5px black; overflow: scroll;">
<table id="Grid" style="width: 150px; border-collapse: collapse;">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<script>
description('Issue crbug.com/295848: element.scrollIntoViewIfNeeded() does not scroll the entire element render box into view.');
if (window.testRunner)
testRunner.dumpAsText(true);
var parent = document.getElementById("parent");
var table = document.getElementById("Grid");
table.rows[1].cells[1].scrollIntoViewIfNeeded(false);
shouldBeEqualToNumber('parent.scrollTop', 50);
shouldBeEqualToNumber('parent.scrollLeft', 50);
table.rows[0].cells[0].scrollIntoViewIfNeeded(false);
shouldBeEqualToNumber('parent.scrollTop', 0);
shouldBeEqualToNumber('parent.scrollLeft', 0);
</script>
......@@ -14,8 +14,8 @@ PASS gFocusedDocument.activeElement.getAttribute("id") is "f2"
PASS gFocusedDocument.activeElement.getAttribute("id") is "f3"
PASS gFocusedDocument.activeElement.getAttribute("id") is "f3"
PASS gFocusedDocument.activeElement.getAttribute("id") is "f4"
FAIL gFocusedDocument.activeElement.getAttribute("id") should be f4. Was f5.
FAIL gFocusedDocument.activeElement.getAttribute("id") should be f5. Was f6.
PASS gFocusedDocument.activeElement.getAttribute("id") is "f4"
PASS gFocusedDocument.activeElement.getAttribute("id") is "f5"
PASS gFocusedDocument.activeElement.getAttribute("id") is "f6"
PASS gFocusedDocument.activeElement.getAttribute("id") is "f9"
This test is testing that div with overflow:auto would scroll, by div with overflow:hidden would not.
......@@ -6,7 +6,7 @@ layer at (0,0) size 800x58
RenderBlock {DIV} at (0,0) size 784x20
RenderText {#text} at (0,0) size 784x19
text run at (0,0) width 784: "When the caret reaches the edge of the input box or content editable div, on the next input if must jump to the center of the control."
layer at (8,28) size 82x22 clip at (9,29) size 80x20 scrollX 42.00 scrollWidth 337
layer at (8,28) size 82x22 clip at (9,29) size 80x20 scrollX 41 scrollWidth 337
RenderBlock {DIV} at (0,20) size 82x22 [border: (1px solid #000000)]
RenderText {#text} at (1,1) size 336x19
text run at (1,1) width 336: "012345678901012345678901234567890123456789"
......
......@@ -6,7 +6,7 @@ layer at (0,0) size 800x238
RenderBlock {DIV} at (0,0) size 784x20
RenderText {#text} at (0,0) size 568x19
text run at (0,0) width 568: "When the caret is scrolled out, on starting typing it must be brought to the center of the control."
layer at (8,28) size 784x202 clip at (9,29) size 767x185 scrollY 278.00 scrollHeight 620
layer at (8,28) size 784x202 clip at (9,29) size 767x185 scrollY 277 scrollHeight 620
RenderBlock {DIV} at (0,20) size 784x202 [border: (1px solid #000000)]
RenderText {#text} at (1,1) size 16x19
text run at (1,1) width 16: "00"
......
......@@ -9,7 +9,7 @@ layer at (0,0) size 800x207
RenderBlock (anonymous) at (0,20) size 784x171
RenderText {#text} at (0,0) size 0x0
RenderText {#text} at (0,0) size 0x0
layer at (8,28) size 101x166 clip at (9,29) size 84x164 scrollY 121.00 scrollHeight 516
layer at (8,28) size 101x166 clip at (9,29) size 84x164 scrollY 120 scrollHeight 516
RenderTextControl {TEXTAREA} at (0,0) size 101x166 [bgcolor=#FFFFFF] [border: (1px solid #A9A9A9)]
RenderBlock {DIV} at (3,3) size 80x512
RenderText {#text} at (0,0) size 16x16
......
......@@ -22,7 +22,7 @@ layer at (0,0) size 800x600
RenderBR {BR} at (0,0) size 0x0
RenderText {#text} at (0,18) size 1130x18
text run at (0,18) width 1130: " Actual: false,false,false,false,false,true,false,false,false,false,false,false,false,false,false,false,false"
layer at (10,10) size 139x162 clip at (22,22) size 99x138 scrollY 8.00 scrollHeight 370
layer at (10,10) size 139x162 clip at (22,22) size 99x138 scrollHeight 370
RenderListBox {SELECT} at (0,0) size 138.78x162 [bgcolor=#FFFFFF] [border: (12px solid #000000)]
RenderBlock {OPTION} at (24,24) size 75.78x20.38
RenderText {#text} at (2,0) size 27x18
......
......@@ -51,7 +51,7 @@ layer at (0,0) size 800x600
RenderText at (4,1) size 134x16
text run at (4,1) width 134: "this should be selected"
RenderText {#text} at (0,0) size 0x0
layer at (8,28) size 155x70 clip at (9,29) size 138x68 scrollY 120.00 scrollHeight 238
layer at (8,28) size 155x70 clip at (9,29) size 138x68 scrollY 119 scrollHeight 238
RenderListBox {SELECT} at (0,20) size 155x70 [bgcolor=#FFFFFF] [border: (1px solid #A9A9A9)]
RenderBlock {OPTION} at (1,1) size 138x17
RenderText {#text} at (2,0) size 18x16
......@@ -95,7 +95,7 @@ layer at (8,28) size 155x70 clip at (9,29) size 138x68 scrollY 120.00 scrollHeig
RenderBlock {OPTION} at (1,222) size 138x17
RenderText {#text} at (2,0) size 18x16
text run at (2,0) width 18: "opt"
layer at (8,119) size 155x70 clip at (9,120) size 138x68 scrollY 120.00 scrollHeight 238
layer at (8,119) size 155x70 clip at (9,120) size 138x68 scrollY 119 scrollHeight 238
RenderListBox {SELECT} at (0,111) size 155x70 [bgcolor=#FFFFFF] [border: (1px solid #A9A9A9)]
RenderBlock {OPTION} at (1,1) size 138x17
RenderText {#text} at (2,0) size 18x16
......
......@@ -125,7 +125,7 @@ layer at (12,281) size 200x25 clip at (13,282) size 183x23 scrollHeight 51
RenderBlock {OPTION} at (1,35) size 183x17
RenderText {#text} at (2,0) size 36x16
text run at (2,0) width 36: "Item 3"
layer at (12,315) size 200x25 clip at (13,316) size 183x23 scrollY 12.00 scrollHeight 51
layer at (12,315) size 200x25 clip at (13,316) size 183x23 scrollY 11 scrollHeight 51
RenderListBox {SELECT} at (4,307) size 200x25 [bgcolor=#FFFFFF] [border: (1px solid #A9A9A9)]
RenderBlock {OPTION} at (1,1) size 183x17
RenderText {#text} at (2,0) size 36x16
......@@ -136,7 +136,7 @@ layer at (12,315) size 200x25 clip at (13,316) size 183x23 scrollY 12.00 scrollH
RenderBlock {OPTION} at (1,35) size 183x17
RenderText {#text} at (2,0) size 36x16
text run at (2,0) width 36: "Item 3"
layer at (12,349) size 200x25 clip at (13,350) size 183x23 scrollY 12.00 scrollHeight 51
layer at (12,349) size 200x25 clip at (13,350) size 183x23 scrollY 11 scrollHeight 51
RenderListBox {SELECT} at (4,341) size 200x25 [bgcolor=#FFFFFF] [border: (1px solid #A9A9A9)]
RenderBlock {OPTION} at (1,1) size 183x17
RenderText {#text} at (2,0) size 36x16
......
......@@ -1403,6 +1403,7 @@ void RenderLayerScrollableArea::resize(const PlatformEvent& evt, const LayoutSiz
LayoutRect RenderLayerScrollableArea::exposeRect(const LayoutRect& rect, const ScrollAlignment& alignX, const ScrollAlignment& alignY)
{
LayoutRect localExposeRect(box().absoluteToLocalQuad(FloatQuad(FloatRect(rect)), UseTransforms).boundingBox());
localExposeRect.move(-box().borderLeft(), -box().borderTop());
LayoutRect layerBounds(0, 0, box().clientWidth(), box().clientHeight());
LayoutRect r = ScrollAlignment::getRectToExpose(layerBounds, localExposeRect, alignX, alignY);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment