third_party/WebKit/LayoutTests/fast/multicol/client-rect-overflowing-multicol-2-columns.html - Issue 2750153002: getClientRects() shouldn't clip against any ancestors.

Unified Diff: third_party/WebKit/LayoutTests/fast/multicol/client-rect-overflowing-multicol-2-columns.html

Issue 2750153002: getClientRects() shouldn't clip against any ancestors. (Closed)

Patch Set: Document tests. Use width/height instead of right/bottom, since that's easier to follow. Created 3 years, 9 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

« no previous file with comments | « third_party/WebKit/LayoutTests/fast/multicol/client-rect-overflowing-multicol.html ('k') | third_party/WebKit/Source/core/layout/FragmentainerIterator.h » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: third_party/WebKit/LayoutTests/fast/multicol/client-rect-overflowing-multicol-2-columns.html

diff --git a/third_party/WebKit/LayoutTests/fast/multicol/client-rect-overflowing-multicol-2-columns.html b/third_party/WebKit/LayoutTests/fast/multicol/client-rect-overflowing-multicol-2-columns.html

new file mode 100644

index 0000000000000000000000000000000000000000..d4512d025b88508b8fffe63392fb9b1ff829ad0a

--- /dev/null

+++ b/third_party/WebKit/LayoutTests/fast/multicol/client-rect-overflowing-multicol-2-columns.html

@@ -0,0 +1,43 @@

+<!DOCTYPE html>

+<style>body { margin:8px; }</style>

+<div style="columns:2; width:25px; column-gap:5px; height:10px; column-fill:auto;">

+ <div id="elm" style="margin-left:-20px; margin-top:-25px; width:4000px; height:40px;"></div>

+</div>

+<script src="../../resources/testharness.js"></script>

+<script src="../../resources/testharnessreport.js"></script>

+<script>

+ test(() => {

+ var elm = document.getElementById("elm");

+ var rects = elm.getClientRects();

+ assert_equals(rects.length, 2);

+ // #elm is offset -20px,-25px relatively to its multicol container, due

+ // to negative margins. BODY is offset 8px,8px due to its margin. So the

+ // absolute offset will be (-20px+8px),(-25px+8px) = -12px,-17px. The

+ // width will be the unclipped bounding box of #elm, while the height

+ // will be as much as it can fit in the first column. Since there's a

+ // top margin of -25px, and column height is 10px, we're going to be

+ // able to fit 10px - (-25px) = 35px.

+ assert_equals(rects[0].left, -12);

+ assert_equals(rects[0].top, -17);

+ assert_equals(rects[0].width, 4000);

+ assert_equals(rects[0].height, 35);

+ // Since the first column could fit 35px of #elm's height, there's 5px

+ // left for it here in the second column.

+ assert_equals(rects[1].left, 3);

+ assert_equals(rects[1].top, 8);

+ assert_equals(rects[1].width, 4000);

+ assert_equals(rects[1].height, 5);

+ // Check that the getBoundingClientRect() agrees with the union of the

+ // two rects above.

+ var boundingClientRect = elm.getBoundingClientRect();

+ var left = Math.min(rects[0].left, rects[1].left);

+ var right = Math.max(rects[0].right, rects[1].right);

+ var top = Math.min(rects[0].top, rects[1].top);

+ var bottom = Math.max(rects[0].bottom, rects[1].bottom);

+ assert_equals(boundingClientRect.left, left);

+ assert_equals(boundingClientRect.right, right);

+ assert_equals(boundingClientRect.top, top);

+ assert_equals(boundingClientRect.bottom, bottom);

+ }, "getClientRects should include overflow");

+</script>