[New Multicolumn] Add support for offsetLeft and offsetTop.
authorhyatt@apple.com <hyatt@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 25 Apr 2014 16:21:38 +0000 (16:21 +0000)
committerhyatt@apple.com <hyatt@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 25 Apr 2014 16:21:38 +0000 (16:21 +0000)
https://bugs.webkit.org/show_bug.cgi?id=132080

Reviewed by Andrei Bucur.

Source/WebCore:
Added fast/multicol/client-spanners-complex.html and offset-top-left.html

* rendering/RenderBoxModelObject.cpp:
(WebCore::RenderBoxModelObject::adjustedPositionRelativeToOffsetParent):
Patch the offsetLeft/Top loop to handle calling into RenderMultiColumnFlowThread
in order to adjust the coordinates for the new multicolumn layout.

* rendering/RenderMultiColumnFlowThread.cpp:
(WebCore::RenderMultiColumnFlowThread::mapFromFlowToRegion):
Modified to use a helper that can be shared by offsetLeft/Top code. This code
ran for client rects, and I'm moving/refactoring it for more sharing.

(WebCore::RenderMultiColumnFlowThread::physicalTranslationOffsetFromFlowToRegion):
(WebCore::RenderMultiColumnFlowThread::physicalTranslationFromFlowToRegion):
* rendering/RenderMultiColumnFlowThread.h:
New functions that beef up what was in mapFromFlowToRegion and fix some bugs
with the translation code.

* rendering/RenderMultiColumnSet.cpp:
(WebCore::RenderMultiColumnSet::columnTranslationForOffset):
Patched to factor in the flow thread portion rect of the specific multicolumn set.

* rendering/RenderObject.h:
(WebCore::RenderObject::isRenderMultiColumnFlowThread):
Added for toRenderMultiColumnFlowThread capability.

LayoutTests:
* fast/multicol/client-rects-spanners-complex.html: Added.
* fast/multicol/client-rects-spanners.html:
* fast/multicol/offset-top-left-expected.txt: Added.
* fast/multicol/offset-top-left.html: Added.
* platform/mac/fast/multicol/client-rects-spanners-complex-expected.png: Added.
* platform/mac/fast/multicol/client-rects-spanners-complex-expected.txt: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@167808 268f45cc-cd09-0410-ab3c-d52691b4dbfc

12 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/multicol/client-rects-spanners-complex.html [new file with mode: 0644]
LayoutTests/fast/multicol/offset-top-left-expected.txt [new file with mode: 0644]
LayoutTests/fast/multicol/offset-top-left.html [new file with mode: 0644]
LayoutTests/platform/mac/fast/multicol/client-rects-spanners-complex-expected.png [new file with mode: 0644]
LayoutTests/platform/mac/fast/multicol/client-rects-spanners-complex-expected.txt [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderBoxModelObject.cpp
Source/WebCore/rendering/RenderMultiColumnFlowThread.cpp
Source/WebCore/rendering/RenderMultiColumnFlowThread.h
Source/WebCore/rendering/RenderMultiColumnSet.cpp
Source/WebCore/rendering/RenderObject.h

index 4a70bdb..2d69d2a 100644 (file)
@@ -1,3 +1,17 @@
+2014-04-24  David Hyatt  <hyatt@apple.com>
+
+        [New Multicolumn] Add support for offsetLeft and offsetTop.
+        https://bugs.webkit.org/show_bug.cgi?id=132080
+
+        Reviewed by Andrei Bucur.
+
+        * fast/multicol/client-rects-spanners-complex.html: Added.
+        * fast/multicol/client-rects-spanners.html:
+        * fast/multicol/offset-top-left-expected.txt: Added.
+        * fast/multicol/offset-top-left.html: Added.
+        * platform/mac/fast/multicol/client-rects-spanners-complex-expected.png: Added.
+        * platform/mac/fast/multicol/client-rects-spanners-complex-expected.txt: Added.
+
 2014-04-25  Brent Fulgham  <bfulgham@apple.com>
 
         ScrollingCoordinator is unaware of topContentInset
diff --git a/LayoutTests/fast/multicol/client-rects-spanners-complex.html b/LayoutTests/fast/multicol/client-rects-spanners-complex.html
new file mode 100644 (file)
index 0000000..c59a558
--- /dev/null
@@ -0,0 +1,257 @@
+<head>
+<script>
+internals.settings.setRegionBasedColumnsEnabled(true)
+</script>
+<style>
+    div.columns {
+        display:inline-block;
+        -webkit-logical-height: 90px;
+        -webkit-logical-width: 100px;
+        -webkit-margin-before: 10px;
+        -webkit-margin-after: 10px;
+         padding: 5px;
+        border: solid black;
+        font-family: ahem;
+        font-size: 25px;
+        color: lightblue;
+        -webkit-columns: 2;
+        -webkit-column-gap: 5px;
+        -webkit-column-fill: auto;
+        columns: 2;
+        column-gap: 5px;
+        column-fill: auto;
+    }
+
+    div.marker {
+        position: absolute;
+        border: solid rgba(0, 0, 255, 0.5);
+        -webkit-box-sizing: border-box;
+    }
+
+    input[type="range"] {
+        -webkit-appearance: none;
+        width: 25px;
+        height: 25px;
+        background-color: lightblue;
+    }
+
+    input[type="range"]::-webkit-slider-thumb {
+        -webkit-appearance: none;
+    }
+
+    .vertical { -webkit-writing-mode: vertical-lr; }
+    .vertical.flipped { -webkit-writing-mode: vertical-rl; }
+
+    div.span { -webkit-column-span: all; -webkit-logical-height:30px; background-color:silver; }
+    
+    div.above { background-color: navy; -webkit-logical-height:10px; }
+    
+</style>
+</head>
+<p>
+    The blue borders should coincide with light blue squares, like this:
+    <span style="display: inline-block; background-color: lightblue; border: solid rgba(0, 0, 255, 0.5); width: 19px; height: 19px;"></span>.
+    There should be none of this:
+    <span style="display: inline-block; background-color: lightblue; width: 25px; height: 25px;"></span>
+    or this:
+    <span style="display: inline-block; border: solid rgba(0, 0, 255, 0.5); width: 19px; height: 19px;"></span>.
+</p>
+<div class="columns" id="t1"><div class="above"></div><div class="span"></div>
+    <br>x y z
+</div>
+
+<div class="columns"><div class="above"></div><div class="span"></div>
+    <br><span id="t2">x y z</span>
+</div>
+
+<div class="columns"><div class="above"></div><div class="span"></div>
+    <br><div id="t3">x y z</div>
+</div>
+
+<div class="columns"><div class="above"></div><div class="span"></div>
+    <br><div id="t4"><br>y z</div>
+</div>
+
+<div class="columns"><div class="above"></div><div class="span"></div>
+    <br><div><br><input id="t5" type="range"></div>
+</div>
+
+<div class="columns"><div class="above"></div><div class="span"></div>
+    <br><div><br><img id="t6" style="width: 25px; height: 25px; background-color: lightblue;"></div>
+</div>
+<div class="columns"><div class="above"></div><div class="span"></div>
+    <div id="t7" style=" margin-top: 40px; width: 25px; height: 25px; background-color: lightblue;"></div>
+</div>
+
+<div class="columns vertical" id="t8"><div class="above"></div><div class="span"></div>
+    <br>x y z
+</div>
+
+<div class="columns vertical"><div class="above"></div><div class="span"></div>
+    <br><span id="t9">x y z</span>
+</div>
+
+<div class="columns vertical"><div class="above"></div><div class="span"></div>
+    <br><div id="t10">x y z</div>
+</div>
+
+<div class="columns vertical"><div class="above"></div><div class="span"></div>
+    <br><div id="t11"><br>y z</div>
+</div>
+
+<div class="columns vertical"><div class="above"></div><div class="span"></div>
+    <br><div><br><input id="t12" type="range"></div>
+</div>
+
+<div class="columns vertical"><div class="above"></div><div class="span"></div>
+    <br><div><br><img id="t13" style="width: 25px; height: 25px; background-color: lightblue;"></div>
+</div>
+<div class="columns vertical"><div class="above"></div><div class="span"></div>
+    <div id="t14" style=" -webkit-margin-before: 40px; width: 25px; height: 25px; background-color: lightblue;"></div>
+</div>
+
+
+<div class="columns vertical flipped" id="t15"><div class="above"></div><div class="span"></div>
+    <br>x y z
+</div>
+
+<div class="columns vertical flipped"><div class="above"></div><div class="span"></div>
+    <br><span id="t16">x y z</span>
+</div>
+
+<div class="columns vertical flipped"><div class="above"></div><div class="span"></div>
+    <br><div id="t17">x y z</div>
+</div>
+
+<div class="columns vertical flipped"><div class="above"></div><div class="span"></div>
+    <br><div id="t18"><br>y z</div>
+</div>
+
+<div class="columns vertical flipped"><div class="above"></div><div class="span"></div>
+    <br><div><br><input id="t19" type="range"></div>
+</div>
+
+<div class="columns vertical flipped"><div class="above"></div><div class="span"></div>
+    <br><div><br><img id="t20" style="width: 25px; height: 25px; background-color: lightblue;"></div>
+</div>
+<div class="columns vertical flipped"><div class="above"></div><div class="span"></div>
+    <div id="t21" style="-webkit-margin-before: 40px; width: 25px; height: 25px; background-color: lightblue;"></div>
+</div>
+
+<script>
+    function placeMarker(clientRect)
+    {
+        var marker = document.body.appendChild(document.createElement("div"));
+        marker.className = "marker";
+        marker.style.left = clientRect.left + "px";
+        marker.style.top = clientRect.top + "px";
+        marker.style.width = clientRect.width + "px";
+        marker.style.height = clientRect.height + "px";
+    }
+
+    function placeMarkersForRange(range, startOffset)
+    {
+        if (startOffset === undefined)
+            startOffset = 0;
+
+        var clientRects = range.getClientRects();
+        for (var i = startOffset; i < clientRects.length; ++i)
+            placeMarker(clientRects[i]);
+    }
+
+    var range = document.createRange();
+
+    var textNode = document.getElementById("t1").firstChild.nextSibling.nextSibling.nextSibling.nextSibling;
+    range.setStart(textNode, 0);
+    range.setEnd(textNode, 5);
+    placeMarkersForRange(range);
+
+    textNode = document.getElementById("t2").firstChild;
+    range.setStart(textNode, 0);
+    range.setEnd(textNode, 5);
+    placeMarkersForRange(range);
+
+    textNode = document.getElementById("t3").firstChild;
+    range.setStart(textNode, 0);
+    range.setEnd(textNode, 5);
+    placeMarkersForRange(range);
+
+    var block = document.getElementById("t4");
+    range.selectNode(block);
+    placeMarkersForRange(range, 1);
+
+    var slider = document.getElementById("t5");
+    range.selectNode(slider);
+    placeMarkersForRange(range);
+
+    var image = document.getElementById("t6");
+    range.selectNode(image);
+    placeMarkersForRange(range);
+
+    var div = document.getElementById("t7");
+    range.selectNode(div);
+    placeMarkersForRange(div);
+    
+    var textNode = document.getElementById("t8").firstChild.nextSibling.nextSibling.nextSibling.nextSibling;
+    range.setStart(textNode, 0);
+    range.setEnd(textNode, 5);
+    placeMarkersForRange(range);
+
+    textNode = document.getElementById("t9").firstChild;
+    range.setStart(textNode, 0);
+    range.setEnd(textNode, 5);
+    placeMarkersForRange(range);
+
+    textNode = document.getElementById("t10").firstChild;
+    range.setStart(textNode, 0);
+    range.setEnd(textNode, 5);
+    placeMarkersForRange(range);
+
+    var block = document.getElementById("t11");
+    range.selectNode(block);
+    placeMarkersForRange(range, 1);
+
+    var slider = document.getElementById("t12");
+    range.selectNode(slider);
+    placeMarkersForRange(range);
+
+    var image = document.getElementById("t13");
+    range.selectNode(image);
+    placeMarkersForRange(range);
+
+    var div = document.getElementById("t14");
+    range.selectNode(div);
+    placeMarkersForRange(div);
+    
+    var textNode = document.getElementById("t15").firstChild.nextSibling.nextSibling.nextSibling.nextSibling;
+    range.setStart(textNode, 0);
+    range.setEnd(textNode, 5);
+    placeMarkersForRange(range);
+
+    textNode = document.getElementById("t16").firstChild;
+    range.setStart(textNode, 0);
+    range.setEnd(textNode, 5);
+    placeMarkersForRange(range);
+
+    textNode = document.getElementById("t17").firstChild;
+    range.setStart(textNode, 0);
+    range.setEnd(textNode, 5);
+    placeMarkersForRange(range);
+
+    var block = document.getElementById("t18");
+    range.selectNode(block);
+    placeMarkersForRange(range, 1);
+
+    var slider = document.getElementById("t19");
+    range.selectNode(slider);
+    placeMarkersForRange(range);
+
+    var image = document.getElementById("t20");
+    range.selectNode(image);
+    placeMarkersForRange(range);
+
+    var div = document.getElementById("t21");
+    range.selectNode(div);
+    placeMarkersForRange(div);
+
+</script>
diff --git a/LayoutTests/fast/multicol/offset-top-left-expected.txt b/LayoutTests/fast/multicol/offset-top-left-expected.txt
new file mode 100644 (file)
index 0000000..ca0b1f1
--- /dev/null
@@ -0,0 +1,19 @@
+Test #1 Passed.
+Test #2 Passed.
+Test #3 Passed.
+Test #4 Passed.
+Test #5 Passed.
+Test #6 Passed.
+Test #7 Passed.
+Test #8 Passed.
+Test #9 Passed.
+Test #10 Passed.
+Test #11 Passed.
+Test #12 Passed.
+Test #13 Passed.
+Test #14 Passed.
+Test #15 Passed.
+Test #16 Passed.
+Test #17 Passed.
+Test #18 Passed.
+
diff --git a/LayoutTests/fast/multicol/offset-top-left.html b/LayoutTests/fast/multicol/offset-top-left.html
new file mode 100644 (file)
index 0000000..5b81b74
--- /dev/null
@@ -0,0 +1,117 @@
+<!doctype html>
+<html>
+    <head>
+        <title>offsetLeft and offsetTop test for columns</title>
+        <style type="text/css">
+
+            .columns {
+                -webkit-column-count:2;
+                -webkit-column-gap:50px;
+                -webkit-logical-width:250px;
+                -webkit-logical-height:145px;
+                margin: 20px;
+                border:2px solid black;
+                -webkit-column-rule: 1px solid maroon;
+            }
+
+            #t1, #t6 {
+                -webkit-column-break-after: always;
+            }
+        
+            .columns div { -webkit-logical-height:50px; background-color:green; margin:5px; -webkit-margin-collapse:separate }
+            
+            .columns div.span { margin:0; -webkit-logical-height:25px; background-color:orange; -webkit-column-span:all; -webkit-margin-start: 5px; -webkit-margin-end: 5px }
+
+            .fail #pass, .pass #fail { display: none; }
+            
+            .vertical { -webkit-writing-mode: vertical-lr }
+            .vertical-flipped {  -webkit-writing-mode: vertical-rl }
+        </style>
+        <script>
+            if (window.internals)
+                internals.settings.setRegionBasedColumnsEnabled(true)
+        </script>
+    </head>
+
+    <body style="margin:10px">
+        <div class="columns">
+            <div id="t1"></div>
+            <div id="t2"></div>
+            <div class="span" id="t3"></div>
+            <div><span id="t4"></span></div>
+            <div><span id="t5"></span></div>
+        </div>
+    
+        <div class="columns vertical">
+            <div id="t9"></div>
+            <div id="t10"></div>
+            <div class="span" id="t8"></div>
+            <div><span id="t6"></span></div>
+            <div><span id="t7"></span></div>
+        </div>
+        
+        <div class="columns vertical-flipped">
+            <div id="t11"></div>
+            <div id="t12"></div>
+            <div class="span" id="t13"></div>
+            <div id="t14"></div>
+            <div id="t15"></div>
+        </div>
+        
+        <p id="output"></p>
+        
+        <script type="text/javascript">
+        
+            function testOffsetTop(expected, id1, id2, number) {
+                var one = document.getElementById(id1)
+                var two = document.getElementById(id2)
+                var output = document.getElementById('output')
+                if (one.offsetTop != two.offsetTop)
+                    output.innerHTML += "Failed Test #" + number + " because the offsetTop of " + id1 + " and " + id2 + " were not the same. " + one.offsetTop + " and " + two.offsetTop + ".<br>"
+                else if (one.offsetTop != expected)
+                    output.innerHTML += "Failed Test #" + number + " because the offsetTop of " + id1 + " and " + id2 + " did not match the expected value of " + expected + ". They were " + one.offsetTop + " instead.<br>"
+                else
+                    output.innerHTML += "Test #" + number + " Passed.<br>"
+            }
+        
+            function testOffsetLeft(expected, id1, id2, number) {
+                var one = document.getElementById(id1)
+                var two = document.getElementById(id2)
+                var output = document.getElementById('output')
+                if (one.offsetLeft != two.offsetLeft)
+                    output.innerHTML += "Failed Test #" + number + " because the offsetLeft of " + id1 + " and " + id2 + " were not the same. " + one.offsetLeft + " and " + two.offsetLeft + ".<br>"
+                else if (one.offsetLeft != expected)
+                    output.innerHTML += "Failed Test #" + number + " because the offsetLeft of " + id1 + " and " + id2 + " did not match the expected value of " + expected + ". They were " + one.offsetLeft + " instead.<br>"
+                else
+                    output.innerHTML += "Test #" + number + " Passed.<br>"
+            }
+        
+            if(window.testRunner)
+                testRunner.dumpAsText();
+            
+            testOffsetTop(27, "t1", "t2", 1);
+            testOffsetTop(112, "t4", "t5", 2);
+            testOffsetTop(82, "t3", "t3", 3);
+            
+            testOffsetLeft(37, "t1", "t4", 4);
+            testOffsetLeft(187, "t2", "t5", 5);
+            testOffsetLeft(37, "t3", "t3", 6);
+            
+            testOffsetTop(196, "t6", "t9", 7);
+            testOffsetTop(346, "t7", "t10", 8);
+            testOffsetTop(196, "t8", "t8", 9);
+            
+            testOffsetLeft(37, "t9", "t10", 10);
+            testOffsetLeft(122, "t6", "t7", 11);
+            testOffsetLeft(92, "t8", "t8", 12);
+        
+            testOffsetTop(470, "t11", "t14", 13);
+            testOffsetTop(620, "t12", "t15", 14);
+            testOffsetTop(470, "t13", "t13", 15);
+            
+            testOffsetLeft(37, "t14", "t15", 16);
+            testOffsetLeft(122, "t11", "t12", 17);
+            testOffsetLeft(92, "t13", "t13", 18);
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/platform/mac/fast/multicol/client-rects-spanners-complex-expected.png b/LayoutTests/platform/mac/fast/multicol/client-rects-spanners-complex-expected.png
new file mode 100644 (file)
index 0000000..b7e50f8
Binary files /dev/null and b/LayoutTests/platform/mac/fast/multicol/client-rects-spanners-complex-expected.png differ
diff --git a/LayoutTests/platform/mac/fast/multicol/client-rects-spanners-complex-expected.txt b/LayoutTests/platform/mac/fast/multicol/client-rects-spanners-complex-expected.txt
new file mode 100644 (file)
index 0000000..f0c3eed
--- /dev/null
@@ -0,0 +1,458 @@
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x600
+  RenderBlock {HTML} at (0,0) size 800x600
+    RenderBody {BODY} at (8,8) size 784x584
+      RenderBlock {P} at (0,0) size 784x29
+        RenderText {#text} at (0,11) size 421x18
+          text run at (0,11) width 421: "The blue borders should coincide with light blue squares, like this: "
+        RenderBlock {SPAN} at (421,0) size 25x25 [bgcolor=#ADD8E6] [border: (3px solid #0000FF7F)]
+        RenderText {#text} at (446,11) size 196x18
+          text run at (446,11) width 8: ". "
+          text run at (454,11) width 188: "There should be none of this: "
+        RenderBlock {SPAN} at (642,0) size 25x25 [bgcolor=#ADD8E6]
+        RenderText {#text} at (667,11) size 51x18
+          text run at (667,11) width 4: " "
+          text run at (671,11) width 47: "or this: "
+        RenderBlock {SPAN} at (718,0) size 25x25 [border: (3px solid #0000FF7F)]
+        RenderText {#text} at (743,11) size 4x18
+          text run at (743,11) width 4: "."
+      RenderBlock (anonymous) at (0,45) size 784x514
+        RenderText {#text} at (116,112) size 4x18
+          text run at (116,112) width 4: " "
+        RenderText {#text} at (236,112) size 4x18
+          text run at (236,112) width 4: " "
+        RenderText {#text} at (356,112) size 4x18
+          text run at (356,112) width 4: " "
+        RenderText {#text} at (476,112) size 4x18
+          text run at (476,112) width 4: " "
+        RenderText {#text} at (596,112) size 4x18
+          text run at (596,112) width 4: " "
+        RenderText {#text} at (716,112) size 4x18
+          text run at (716,112) width 4: " "
+        RenderText {#text} at (116,256) size 4x18
+          text run at (116,256) width 4: " "
+        RenderText {#text} at (246,256) size 4x18
+          text run at (246,256) width 4: " "
+        RenderText {#text} at (376,256) size 4x18
+          text run at (376,256) width 4: " "
+        RenderText {#text} at (506,256) size 4x18
+          text run at (506,256) width 4: " "
+        RenderText {#text} at (636,256) size 4x18
+          text run at (636,256) width 4: " "
+        RenderText {#text} at (0,0) size 0x0
+        RenderText {#text} at (126,376) size 4x18
+          text run at (126,376) width 4: " "
+        RenderText {#text} at (256,376) size 4x18
+          text run at (256,376) width 4: " "
+        RenderText {#text} at (386,376) size 4x18
+          text run at (386,376) width 4: " "
+        RenderText {#text} at (516,376) size 4x18
+          text run at (516,376) width 4: " "
+        RenderText {#text} at (646,376) size 4x18
+          text run at (646,376) width 4: " "
+        RenderText {#text} at (0,0) size 0x0
+        RenderText {#text} at (126,496) size 4x18
+          text run at (126,496) width 4: " "
+        RenderText {#text} at (256,496) size 4x18
+          text run at (256,496) width 4: " "
+        RenderText {#text} at (0,0) size 0x0
+layer at (8,63) size 116x106
+  RenderBlock {DIV} at (0,10) size 116x106 [color=#ADD8E6] [border: (3px solid #000000)]
+    RenderMultiColumnSet at (8,8) size 100x5
+    RenderBlock {DIV} at (8,13) size 100x30 [bgcolor=#C0C0C0]
+    RenderMultiColumnSet at (8,43) size 100x55
+layer at (128,63) size 116x106
+  RenderBlock {DIV} at (120,10) size 116x106 [color=#ADD8E6] [border: (3px solid #000000)]
+    RenderMultiColumnSet at (8,8) size 100x5
+    RenderBlock {DIV} at (8,13) size 100x30 [bgcolor=#C0C0C0]
+    RenderMultiColumnSet at (8,43) size 100x55
+layer at (248,63) size 116x106
+  RenderBlock {DIV} at (240,10) size 116x106 [color=#ADD8E6] [border: (3px solid #000000)]
+    RenderMultiColumnSet at (8,8) size 100x5
+    RenderBlock {DIV} at (8,13) size 100x30 [bgcolor=#C0C0C0]
+    RenderMultiColumnSet at (8,43) size 100x55
+layer at (368,63) size 116x106
+  RenderBlock {DIV} at (360,10) size 116x106 [color=#ADD8E6] [border: (3px solid #000000)]
+    RenderMultiColumnSet at (8,8) size 100x5
+    RenderBlock {DIV} at (8,13) size 100x30 [bgcolor=#C0C0C0]
+    RenderMultiColumnSet at (8,43) size 100x55
+layer at (488,63) size 116x106
+  RenderBlock {DIV} at (480,10) size 116x106 [color=#ADD8E6] [border: (3px solid #000000)]
+    RenderMultiColumnSet at (8,8) size 100x5
+    RenderBlock {DIV} at (8,13) size 100x30 [bgcolor=#C0C0C0]
+    RenderMultiColumnSet at (8,43) size 100x55
+layer at (608,81) size 116x106
+  RenderBlock {DIV} at (600,28) size 116x106 [color=#ADD8E6] [border: (3px solid #000000)]
+    RenderMultiColumnSet at (8,8) size 100x5
+    RenderBlock {DIV} at (8,13) size 100x30 [bgcolor=#C0C0C0]
+    RenderMultiColumnSet at (8,43) size 100x55
+layer at (8,207) size 116x106
+  RenderBlock {DIV} at (0,154) size 116x106 [color=#ADD8E6] [border: (3px solid #000000)]
+    RenderMultiColumnSet at (8,8) size 100x5
+    RenderBlock {DIV} at (8,13) size 100x30 [bgcolor=#C0C0C0]
+    RenderMultiColumnSet at (8,43) size 100x55
+layer at (138,207) size 106x116
+  RenderBlock {DIV} at (130,154) size 106x116 [color=#ADD8E6] [border: (3px solid #000000)]
+    RenderMultiColumnSet at (8,8) size 5x100
+    RenderBlock {DIV} at (13,8) size 30x100 [bgcolor=#C0C0C0]
+    RenderMultiColumnSet at (43,8) size 55x100
+layer at (268,207) size 106x116
+  RenderBlock {DIV} at (260,154) size 106x116 [color=#ADD8E6] [border: (3px solid #000000)]
+    RenderMultiColumnSet at (8,8) size 5x100
+    RenderBlock {DIV} at (13,8) size 30x100 [bgcolor=#C0C0C0]
+    RenderMultiColumnSet at (43,8) size 55x100
+layer at (398,207) size 106x116
+  RenderBlock {DIV} at (390,154) size 106x116 [color=#ADD8E6] [border: (3px solid #000000)]
+    RenderMultiColumnSet at (8,8) size 5x100
+    RenderBlock {DIV} at (13,8) size 30x100 [bgcolor=#C0C0C0]
+    RenderMultiColumnSet at (43,8) size 55x100
+layer at (528,207) size 106x116
+  RenderBlock {DIV} at (520,154) size 106x116 [color=#ADD8E6] [border: (3px solid #000000)]
+    RenderMultiColumnSet at (8,8) size 5x100
+    RenderBlock {DIV} at (13,8) size 30x100 [bgcolor=#C0C0C0]
+    RenderMultiColumnSet at (43,8) size 55x100
+layer at (658,207) size 106x116
+  RenderBlock {DIV} at (650,154) size 106x116 [color=#ADD8E6] [border: (3px solid #000000)]
+    RenderMultiColumnSet at (8,8) size 5x100
+    RenderBlock {DIV} at (13,8) size 30x100 [bgcolor=#C0C0C0]
+    RenderMultiColumnSet at (43,8) size 55x100
+layer at (18,327) size 106x116
+  RenderBlock {DIV} at (10,274) size 106x116 [color=#ADD8E6] [border: (3px solid #000000)]
+    RenderMultiColumnSet at (8,8) size 5x100
+    RenderBlock {DIV} at (13,8) size 30x100 [bgcolor=#C0C0C0]
+    RenderMultiColumnSet at (43,8) size 55x100
+layer at (148,327) size 106x116
+  RenderBlock {DIV} at (140,274) size 106x116 [color=#ADD8E6] [border: (3px solid #000000)]
+    RenderMultiColumnSet at (8,8) size 5x100
+    RenderBlock {DIV} at (13,8) size 30x100 [bgcolor=#C0C0C0]
+    RenderMultiColumnSet at (43,8) size 55x100
+layer at (278,327) size 106x116
+  RenderBlock {DIV} at (270,274) size 106x116 [color=#ADD8E6] [border: (3px solid #000000)]
+    RenderMultiColumnSet at (8,8) size 5x100
+    RenderBlock {DIV} at (13,8) size 30x100 [bgcolor=#C0C0C0]
+    RenderMultiColumnSet at (43,8) size 55x100
+layer at (408,327) size 106x116
+  RenderBlock {DIV} at (400,274) size 106x116 [color=#ADD8E6] [border: (3px solid #000000)]
+    RenderMultiColumnSet at (8,8) size 5x100
+    RenderBlock {DIV} at (13,8) size 30x100 [bgcolor=#C0C0C0]
+    RenderMultiColumnSet at (43,8) size 55x100
+layer at (538,327) size 106x116
+  RenderBlock {DIV} at (530,274) size 106x116 [color=#ADD8E6] [border: (3px solid #000000)]
+    RenderMultiColumnSet at (8,8) size 5x100
+    RenderBlock {DIV} at (13,8) size 30x100 [bgcolor=#C0C0C0]
+    RenderMultiColumnSet at (43,8) size 55x100
+layer at (668,327) size 106x116
+  RenderBlock {DIV} at (660,274) size 106x116 [color=#ADD8E6] [border: (3px solid #000000)]
+    RenderMultiColumnSet at (8,8) size 5x100
+    RenderBlock {DIV} at (13,8) size 30x100 [bgcolor=#C0C0C0]
+    RenderMultiColumnSet at (43,8) size 55x100
+layer at (18,447) size 106x116
+  RenderBlock {DIV} at (10,394) size 106x116 [color=#ADD8E6] [border: (3px solid #000000)]
+    RenderMultiColumnSet at (8,8) size 5x100
+    RenderBlock {DIV} at (13,8) size 30x100 [bgcolor=#C0C0C0]
+    RenderMultiColumnSet at (43,8) size 55x100
+layer at (148,447) size 106x116
+  RenderBlock {DIV} at (140,394) size 106x116 [color=#ADD8E6] [border: (3px solid #000000)]
+    RenderMultiColumnSet at (8,8) size 5x100
+    RenderBlock {DIV} at (13,8) size 30x100 [bgcolor=#C0C0C0]
+    RenderMultiColumnSet at (43,8) size 55x100
+layer at (278,447) size 106x116
+  RenderBlock {DIV} at (270,394) size 106x116 [color=#ADD8E6] [border: (3px solid #000000)]
+    RenderMultiColumnSet at (8,8) size 5x100
+    RenderBlock {DIV} at (13,8) size 30x100 [bgcolor=#C0C0C0]
+    RenderMultiColumnSet at (43,8) size 55x100
+layer at (16,71) size 48x120
+  RenderMultiColumnFlowThread at (8,8) size 48x120
+    RenderBlock {DIV} at (0,0) size 48x10 [bgcolor=#000080]
+    RenderMultiColumnSpannerPlaceholder at (0,10) size 0x0
+    RenderBlock (anonymous) at (0,10) size 48x105
+      RenderBR {BR} at (0,0) size 0x25
+      RenderText {#text} at (0,25) size 25x80
+        text run at (0,25) width 25: "x"
+        text run at (0,55) width 25: "y"
+        text run at (0,80) width 25: "z"
+layer at (136,71) size 48x120
+  RenderMultiColumnFlowThread at (8,8) size 48x120
+    RenderBlock {DIV} at (0,0) size 48x10 [bgcolor=#000080]
+    RenderMultiColumnSpannerPlaceholder at (0,10) size 0x0
+    RenderBlock (anonymous) at (0,10) size 48x105
+      RenderBR {BR} at (0,0) size 0x25
+      RenderInline {SPAN} at (0,0) size 25x80
+        RenderText {#text} at (0,25) size 25x80
+          text run at (0,25) width 25: "x"
+          text run at (0,55) width 25: "y"
+          text run at (0,80) width 25: "z"
+      RenderText {#text} at (0,0) size 0x0
+layer at (256,71) size 48x120
+  RenderMultiColumnFlowThread at (8,8) size 48x120
+    RenderBlock {DIV} at (0,0) size 48x10 [bgcolor=#000080]
+    RenderMultiColumnSpannerPlaceholder at (0,10) size 0x0
+    RenderBlock (anonymous) at (0,10) size 48x25
+      RenderBR {BR} at (0,0) size 0x25
+    RenderBlock {DIV} at (0,35) size 48x80
+      RenderText {#text} at (0,0) size 25x80
+        text run at (0,0) width 25: "x"
+        text run at (0,30) width 25: "y"
+        text run at (0,55) width 25: "z"
+layer at (376,71) size 48x120
+  RenderMultiColumnFlowThread at (8,8) size 48x120
+    RenderBlock {DIV} at (0,0) size 48x10 [bgcolor=#000080]
+    RenderMultiColumnSpannerPlaceholder at (0,10) size 0x0
+    RenderBlock (anonymous) at (0,10) size 48x25
+      RenderBR {BR} at (0,0) size 0x25
+    RenderBlock {DIV} at (0,35) size 48x80
+      RenderBR {BR} at (0,0) size 0x25
+      RenderText {#text} at (0,30) size 25x50
+        text run at (0,30) width 25: "y"
+        text run at (0,55) width 25: "z"
+layer at (496,71) size 48x120
+  RenderMultiColumnFlowThread at (8,8) size 48x120
+    RenderBlock {DIV} at (0,0) size 48x10 [bgcolor=#000080]
+    RenderMultiColumnSpannerPlaceholder at (0,10) size 0x0
+    RenderBlock (anonymous) at (0,10) size 48x25
+      RenderBR {BR} at (0,0) size 0x25
+    RenderBlock {DIV} at (0,35) size 48x59
+      RenderBR {BR} at (0,0) size 0x25
+      RenderSlider {INPUT} at (2,32) size 25x25 [color=#909090] [bgcolor=#ADD8E6]
+        RenderFlexibleBox {DIV} at (0,0) size 25x25
+          RenderBlock {DIV} at (0,12) size 25x1
+            RenderBlock {DIV} at (0,0) size 25x0
+layer at (616,89) size 48x120
+  RenderMultiColumnFlowThread at (8,8) size 48x120
+    RenderBlock {DIV} at (0,0) size 48x10 [bgcolor=#000080]
+    RenderMultiColumnSpannerPlaceholder at (0,10) size 0x0
+    RenderBlock (anonymous) at (0,10) size 48x25
+      RenderBR {BR} at (0,0) size 0x25
+    RenderBlock {DIV} at (0,35) size 48x55
+      RenderBR {BR} at (0,0) size 0x25
+      RenderImage {IMG} at (0,30) size 25x25 [bgcolor=#ADD8E6]
+layer at (16,215) size 48x120
+  RenderMultiColumnFlowThread at (8,8) size 48x120
+    RenderBlock {DIV} at (0,0) size 48x10 [bgcolor=#000080]
+    RenderMultiColumnSpannerPlaceholder at (0,10) size 0x0
+    RenderBlock {DIV} at (0,50) size 25x25 [bgcolor=#ADD8E6]
+layer at (146,215) size 120x48
+  RenderMultiColumnFlowThread at (8,8) size 120x48
+    RenderBlock {DIV} at (0,0) size 10x48 [bgcolor=#000080]
+    RenderMultiColumnSpannerPlaceholder at (10,0) size 0x0
+    RenderBlock (anonymous) at (10,0) size 105x48
+      RenderBR {BR} at (0,0) size 25x0
+      RenderText {#text} at (25,0) size 80x25
+        text run at (25,0) width 25: "x"
+        text run at (55,0) width 25: "y"
+        text run at (80,0) width 25: "z"
+layer at (276,215) size 120x48
+  RenderMultiColumnFlowThread at (8,8) size 120x48
+    RenderBlock {DIV} at (0,0) size 10x48 [bgcolor=#000080]
+    RenderMultiColumnSpannerPlaceholder at (10,0) size 0x0
+    RenderBlock (anonymous) at (10,0) size 105x48
+      RenderBR {BR} at (0,0) size 25x0
+      RenderInline {SPAN} at (0,0) size 80x25
+        RenderText {#text} at (25,0) size 80x25
+          text run at (25,0) width 25: "x"
+          text run at (55,0) width 25: "y"
+          text run at (80,0) width 25: "z"
+      RenderText {#text} at (0,0) size 0x0
+layer at (406,215) size 120x48
+  RenderMultiColumnFlowThread at (8,8) size 120x48
+    RenderBlock {DIV} at (0,0) size 10x48 [bgcolor=#000080]
+    RenderMultiColumnSpannerPlaceholder at (10,0) size 0x0
+    RenderBlock (anonymous) at (10,0) size 25x48
+      RenderBR {BR} at (0,0) size 25x0
+    RenderBlock {DIV} at (35,0) size 80x48
+      RenderText {#text} at (0,0) size 80x25
+        text run at (0,0) width 25: "x"
+        text run at (30,0) width 25: "y"
+        text run at (55,0) width 25: "z"
+layer at (536,215) size 120x48
+  RenderMultiColumnFlowThread at (8,8) size 120x48
+    RenderBlock {DIV} at (0,0) size 10x48 [bgcolor=#000080]
+    RenderMultiColumnSpannerPlaceholder at (10,0) size 0x0
+    RenderBlock (anonymous) at (10,0) size 25x48
+      RenderBR {BR} at (0,0) size 25x0
+    RenderBlock {DIV} at (35,0) size 80x48
+      RenderBR {BR} at (0,0) size 25x0
+      RenderText {#text} at (30,0) size 50x25
+        text run at (30,0) width 25: "y"
+        text run at (55,0) width 25: "z"
+layer at (666,215) size 120x48
+  RenderMultiColumnFlowThread at (8,8) size 120x48
+    RenderBlock {DIV} at (0,0) size 10x48 [bgcolor=#000080]
+    RenderMultiColumnSpannerPlaceholder at (10,0) size 0x0
+    RenderBlock (anonymous) at (10,0) size 25x48
+      RenderBR {BR} at (0,0) size 25x0
+    RenderBlock {DIV} at (35,0) size 59x48
+      RenderBR {BR} at (0,0) size 25x0
+      RenderSlider {INPUT} at (32,2) size 25x25 [color=#909090] [bgcolor=#ADD8E6]
+        RenderFlexibleBox {DIV} at (0,0) size 25x25
+          RenderBlock {DIV} at (0,12) size 25x1
+            RenderBlock {DIV} at (0,0) size 25x0
+layer at (26,335) size 120x48
+  RenderMultiColumnFlowThread at (8,8) size 120x48
+    RenderBlock {DIV} at (0,0) size 10x48 [bgcolor=#000080]
+    RenderMultiColumnSpannerPlaceholder at (10,0) size 0x0
+    RenderBlock (anonymous) at (10,0) size 25x48
+      RenderBR {BR} at (0,0) size 25x0
+    RenderBlock {DIV} at (35,0) size 55x48
+      RenderBR {BR} at (0,0) size 25x0
+      RenderImage {IMG} at (30,0) size 25x25 [bgcolor=#ADD8E6]
+layer at (156,335) size 120x48
+  RenderMultiColumnFlowThread at (8,8) size 120x48
+    RenderBlock {DIV} at (0,0) size 10x48 [bgcolor=#000080]
+    RenderMultiColumnSpannerPlaceholder at (10,0) size 0x0
+    RenderBlock {DIV} at (50,0) size 25x25 [bgcolor=#ADD8E6]
+layer at (256,335) size 120x48
+  RenderMultiColumnFlowThread at (8,8) size 120x48
+    RenderBlock {DIV} at (0,0) size 10x48 [bgcolor=#000080]
+    RenderMultiColumnSpannerPlaceholder at (10,0) size 0x0
+    RenderBlock (anonymous) at (10,0) size 105x48
+      RenderBR {BR} at (0,0) size 25x0
+      RenderText {#text} at (25,0) size 80x25
+        text run at (25,0) width 25: "x"
+        text run at (55,0) width 25: "y"
+        text run at (80,0) width 25: "z"
+layer at (386,335) size 120x48
+  RenderMultiColumnFlowThread at (8,8) size 120x48
+    RenderBlock {DIV} at (0,0) size 10x48 [bgcolor=#000080]
+    RenderMultiColumnSpannerPlaceholder at (10,0) size 0x0
+    RenderBlock (anonymous) at (10,0) size 105x48
+      RenderBR {BR} at (0,0) size 25x0
+      RenderInline {SPAN} at (0,0) size 80x25
+        RenderText {#text} at (25,0) size 80x25
+          text run at (25,0) width 25: "x"
+          text run at (55,0) width 25: "y"
+          text run at (80,0) width 25: "z"
+      RenderText {#text} at (0,0) size 0x0
+layer at (516,335) size 120x48
+  RenderMultiColumnFlowThread at (8,8) size 120x48
+    RenderBlock {DIV} at (0,0) size 10x48 [bgcolor=#000080]
+    RenderMultiColumnSpannerPlaceholder at (10,0) size 0x0
+    RenderBlock (anonymous) at (10,0) size 25x48
+      RenderBR {BR} at (0,0) size 25x0
+    RenderBlock {DIV} at (35,0) size 80x48
+      RenderText {#text} at (0,0) size 80x25
+        text run at (0,0) width 25: "x"
+        text run at (30,0) width 25: "y"
+        text run at (55,0) width 25: "z"
+layer at (646,335) size 120x48
+  RenderMultiColumnFlowThread at (8,8) size 120x48
+    RenderBlock {DIV} at (0,0) size 10x48 [bgcolor=#000080]
+    RenderMultiColumnSpannerPlaceholder at (10,0) size 0x0
+    RenderBlock (anonymous) at (10,0) size 25x48
+      RenderBR {BR} at (0,0) size 25x0
+    RenderBlock {DIV} at (35,0) size 80x48
+      RenderBR {BR} at (0,0) size 25x0
+      RenderText {#text} at (30,0) size 50x25
+        text run at (30,0) width 25: "y"
+        text run at (55,0) width 25: "z"
+layer at (-4,455) size 120x48 backgroundClip at (0,0) size 800x600 clip at (0,0) size 800x600 outlineClip at (0,0) size 800x600
+  RenderMultiColumnFlowThread at (8,8) size 120x48
+    RenderBlock {DIV} at (0,0) size 10x48 [bgcolor=#000080]
+    RenderMultiColumnSpannerPlaceholder at (10,0) size 0x0
+    RenderBlock (anonymous) at (10,0) size 25x48
+      RenderBR {BR} at (0,0) size 25x0
+    RenderBlock {DIV} at (35,0) size 59x48
+      RenderBR {BR} at (0,0) size 25x0
+      RenderSlider {INPUT} at (32,2) size 25x25 [color=#909090] [bgcolor=#ADD8E6]
+        RenderFlexibleBox {DIV} at (0,0) size 25x25
+          RenderBlock {DIV} at (0,12) size 25x1
+            RenderBlock {DIV} at (0,0) size 25x0
+layer at (126,455) size 120x48
+  RenderMultiColumnFlowThread at (8,8) size 120x48
+    RenderBlock {DIV} at (0,0) size 10x48 [bgcolor=#000080]
+    RenderMultiColumnSpannerPlaceholder at (10,0) size 0x0
+    RenderBlock (anonymous) at (10,0) size 25x48
+      RenderBR {BR} at (0,0) size 25x0
+    RenderBlock {DIV} at (35,0) size 55x48
+      RenderBR {BR} at (0,0) size 25x0
+      RenderImage {IMG} at (30,0) size 25x25 [bgcolor=#ADD8E6]
+layer at (256,455) size 120x48
+  RenderMultiColumnFlowThread at (8,8) size 120x48
+    RenderBlock {DIV} at (0,0) size 10x48 [bgcolor=#000080]
+    RenderMultiColumnSpannerPlaceholder at (10,0) size 0x0
+    RenderBlock {DIV} at (50,0) size 25x25 [bgcolor=#ADD8E6]
+layer at (16,131) size 25x25
+  RenderBlock (positioned) {DIV} at (16,131) size 25x25 [border: (3px solid #0000FF7F)]
+layer at (68,106) size 26x25
+  RenderBlock (positioned) {DIV} at (68,106) size 26x25 [border: (3px solid #0000FF7F)]
+layer at (68,131) size 26x25
+  RenderBlock (positioned) {DIV} at (68,131) size 26x25 [border: (3px solid #0000FF7F)]
+layer at (136,131) size 25x25
+  RenderBlock (positioned) {DIV} at (136,131) size 25x25 [border: (3px solid #0000FF7F)]
+layer at (188,106) size 26x25
+  RenderBlock (positioned) {DIV} at (188,106) size 26x25 [border: (3px solid #0000FF7F)]
+layer at (188,131) size 26x25
+  RenderBlock (positioned) {DIV} at (188,131) size 26x25 [border: (3px solid #0000FF7F)]
+layer at (256,131) size 25x25
+  RenderBlock (positioned) {DIV} at (256,131) size 25x25 [border: (3px solid #0000FF7F)]
+layer at (308,106) size 26x25
+  RenderBlock (positioned) {DIV} at (308,106) size 26x25 [border: (3px solid #0000FF7F)]
+layer at (308,131) size 26x25
+  RenderBlock (positioned) {DIV} at (308,131) size 26x25 [border: (3px solid #0000FF7F)]
+layer at (428,106) size 26x25
+  RenderBlock (positioned) {DIV} at (428,106) size 26x25 [border: (3px solid #0000FF7F)]
+layer at (428,131) size 26x25
+  RenderBlock (positioned) {DIV} at (428,131) size 26x25 [border: (3px solid #0000FF7F)]
+layer at (550,108) size 26x25
+  RenderBlock (positioned) {DIV} at (550,108) size 26x25 [border: (3px solid #0000FF7F)]
+layer at (668,124) size 26x25
+  RenderBlock (positioned) {DIV} at (668,124) size 26x25 [border: (3px solid #0000FF7F)]
+layer at (16,290) size 25x25
+  RenderBlock (positioned) {DIV} at (16,290) size 25x25 [border: (3px solid #0000FF7F)]
+layer at (206,215) size 25x25
+  RenderBlock (positioned) {DIV} at (206,215) size 25x25 [border: (3px solid #0000FF7F)]
+layer at (181,267) size 25x26
+  RenderBlock (positioned) {DIV} at (181,267) size 25x26 [border: (3px solid #0000FF7F)]
+layer at (206,267) size 25x26
+  RenderBlock (positioned) {DIV} at (206,267) size 25x26 [border: (3px solid #0000FF7F)]
+layer at (336,215) size 25x25
+  RenderBlock (positioned) {DIV} at (336,215) size 25x25 [border: (3px solid #0000FF7F)]
+layer at (311,267) size 25x26
+  RenderBlock (positioned) {DIV} at (311,267) size 25x26 [border: (3px solid #0000FF7F)]
+layer at (336,267) size 25x26
+  RenderBlock (positioned) {DIV} at (336,267) size 25x26 [border: (3px solid #0000FF7F)]
+layer at (466,215) size 25x25
+  RenderBlock (positioned) {DIV} at (466,215) size 25x25 [border: (3px solid #0000FF7F)]
+layer at (441,267) size 25x26
+  RenderBlock (positioned) {DIV} at (441,267) size 25x26 [border: (3px solid #0000FF7F)]
+layer at (466,267) size 25x26
+  RenderBlock (positioned) {DIV} at (466,267) size 25x26 [border: (3px solid #0000FF7F)]
+layer at (571,267) size 25x26
+  RenderBlock (positioned) {DIV} at (571,267) size 25x26 [border: (3px solid #0000FF7F)]
+layer at (596,267) size 25x26
+  RenderBlock (positioned) {DIV} at (596,267) size 25x26 [border: (3px solid #0000FF7F)]
+layer at (703,269) size 25x26
+  RenderBlock (positioned) {DIV} at (703,269) size 25x26 [border: (3px solid #0000FF7F)]
+layer at (61,387) size 25x26
+  RenderBlock (positioned) {DIV} at (61,387) size 25x26 [border: (3px solid #0000FF7F)]
+layer at (231,335) size 25x25
+  RenderBlock (positioned) {DIV} at (231,335) size 25x25 [border: (3px solid #0000FF7F)]
+layer at (291,335) size 25x25
+  RenderBlock (positioned) {DIV} at (291,335) size 25x25 [border: (3px solid #0000FF7F)]
+layer at (316,387) size 25x26
+  RenderBlock (positioned) {DIV} at (316,387) size 25x26 [border: (3px solid #0000FF7F)]
+layer at (291,387) size 25x26
+  RenderBlock (positioned) {DIV} at (291,387) size 25x26 [border: (3px solid #0000FF7F)]
+layer at (420,335) size 25x25
+  RenderBlock (positioned) {DIV} at (420,335) size 25x25 [border: (3px solid #0000FF7F)]
+layer at (445,387) size 25x26
+  RenderBlock (positioned) {DIV} at (445,387) size 25x26 [border: (3px solid #0000FF7F)]
+layer at (420,387) size 25x26
+  RenderBlock (positioned) {DIV} at (420,387) size 25x26 [border: (3px solid #0000FF7F)]
+layer at (551,335) size 25x25
+  RenderBlock (positioned) {DIV} at (551,335) size 25x25 [border: (3px solid #0000FF7F)]
+layer at (576,387) size 25x26
+  RenderBlock (positioned) {DIV} at (576,387) size 25x26 [border: (3px solid #0000FF7F)]
+layer at (551,387) size 25x26
+  RenderBlock (positioned) {DIV} at (551,387) size 25x26 [border: (3px solid #0000FF7F)]
+layer at (706,387) size 25x26
+  RenderBlock (positioned) {DIV} at (706,387) size 25x26 [border: (3px solid #0000FF7F)]
+layer at (681,387) size 25x26
+  RenderBlock (positioned) {DIV} at (681,387) size 25x26 [border: (3px solid #0000FF7F)]
+layer at (54,509) size 25x26
+  RenderBlock (positioned) {DIV} at (54,509) size 25x26 [border: (3px solid #0000FF7F)]
+layer at (186,507) size 25x26
+  RenderBlock (positioned) {DIV} at (186,507) size 25x26 [border: (3px solid #0000FF7F)]
+layer at (276,455) size 25x25
+  RenderBlock (positioned) {DIV} at (276,455) size 25x25 [border: (3px solid #0000FF7F)]
index be958dd..8339bc9 100644 (file)
@@ -1,3 +1,36 @@
+2014-04-24  David Hyatt  <hyatt@apple.com>
+
+        [New Multicolumn] Add support for offsetLeft and offsetTop.
+        https://bugs.webkit.org/show_bug.cgi?id=132080
+
+        Reviewed by Andrei Bucur.
+
+        Added fast/multicol/client-spanners-complex.html and offset-top-left.html
+
+        * rendering/RenderBoxModelObject.cpp:
+        (WebCore::RenderBoxModelObject::adjustedPositionRelativeToOffsetParent):
+        Patch the offsetLeft/Top loop to handle calling into RenderMultiColumnFlowThread
+        in order to adjust the coordinates for the new multicolumn layout.
+
+        * rendering/RenderMultiColumnFlowThread.cpp:
+        (WebCore::RenderMultiColumnFlowThread::mapFromFlowToRegion):
+        Modified to use a helper that can be shared by offsetLeft/Top code. This code
+        ran for client rects, and I'm moving/refactoring it for more sharing.
+
+        (WebCore::RenderMultiColumnFlowThread::physicalTranslationOffsetFromFlowToRegion):
+        (WebCore::RenderMultiColumnFlowThread::physicalTranslationFromFlowToRegion):
+        * rendering/RenderMultiColumnFlowThread.h:
+        New functions that beef up what was in mapFromFlowToRegion and fix some bugs
+        with the translation code.
+
+        * rendering/RenderMultiColumnSet.cpp:
+        (WebCore::RenderMultiColumnSet::columnTranslationForOffset):
+        Patched to factor in the flow thread portion rect of the specific multicolumn set.
+
+        * rendering/RenderObject.h:
+        (WebCore::RenderObject::isRenderMultiColumnFlowThread):
+        Added for toRenderMultiColumnFlowThread capability.
+
 2014-04-25  Brent Fulgham  <bfulgham@apple.com>
 
         ScrollingCoordinator is unaware of topContentInset
index 21e25b0..b18332b 100644 (file)
@@ -43,6 +43,7 @@
 #include "RenderLayer.h"
 #include "RenderLayerBacking.h"
 #include "RenderLayerCompositor.h"
+#include "RenderMultiColumnFlowThread.h"
 #include "RenderNamedFlowFragment.h"
 #include "RenderNamedFlowThread.h"
 #include "RenderRegion.h"
@@ -315,11 +316,18 @@ LayoutPoint RenderBoxModelObject::adjustedPositionRelativeToOffsetParent(const L
             auto curr = parent();
             while (curr != offsetParent && !curr->isRenderNamedFlowThread()) {
                 // FIXME: What are we supposed to do inside SVG content?
-                if (!isOutOfFlowPositioned()) {
+                
+                if (curr->isInFlowRenderFlowThread()) {
+                    // We need to apply a translation based off what region we are inside.
+                    RenderRegion* region = toRenderMultiColumnFlowThread(curr)->physicalTranslationFromFlowToRegion(referencePoint);
+                    if (region)
+                        referencePoint.moveBy(region->topLeftLocation());
+                } else if (!isOutOfFlowPositioned()) {
                     if (curr->isBox() && !curr->isTableRow())
                         referencePoint.moveBy(toRenderBox(curr)->topLeftLocation());
                     referencePoint.move(curr->parent()->offsetForColumns(referencePoint));
                 }
+                
                 curr = curr->parent();
             }
             
index 5e27c2f..8590079 100644 (file)
@@ -592,17 +592,24 @@ RenderRegion* RenderMultiColumnFlowThread::mapFromFlowToRegion(TransformState& t
 
     // FIXME: We need to refactor RenderObject::absoluteQuads to be able to split the quads across regions,
     // for now we just take the center of the mapped enclosing box and map it to a column.
-    LayoutPoint center = boxRect.center();
-    LayoutUnit centerOffset = isHorizontalWritingMode() ? center.y() : center.x();
-    RenderRegion* renderRegion = const_cast<RenderMultiColumnFlowThread*>(this)->regionAtBlockOffset(this, centerOffset, true, DisallowRegionAutoGeneration);
+    LayoutPoint centerPoint = boxRect.center();
+    LayoutUnit centerLogicalOffset = isHorizontalWritingMode() ? centerPoint.y() : centerPoint.x();
+    RenderRegion* renderRegion = const_cast<RenderMultiColumnFlowThread*>(this)->regionAtBlockOffset(this, centerLogicalOffset, true, DisallowRegionAutoGeneration);
     if (!renderRegion)
         return nullptr;
+    transformState.move(physicalTranslationOffsetFromFlowToRegion(renderRegion, centerLogicalOffset));
+    return renderRegion;
+}
 
+LayoutSize RenderMultiColumnFlowThread::physicalTranslationOffsetFromFlowToRegion(const RenderRegion* renderRegion, const LayoutUnit logicalOffset) const
+{
+    
     // Now that we know which multicolumn set we hit, we need to get the appropriate translation offset for the column.
-    RenderMultiColumnSet* columnSet = toRenderMultiColumnSet(renderRegion);
-    LayoutPoint translationOffset = columnSet->columnTranslationForOffset(centerOffset);
+    const RenderMultiColumnSet* columnSet = toRenderMultiColumnSet(renderRegion);
+    LayoutPoint translationOffset = columnSet->columnTranslationForOffset(logicalOffset);
     
-    // Now we know how we want the rect to be translated into the region.
+    // Now we know how we want the rect to be translated into the region. At this point we're converting
+    // back to physical coordinates.
     LayoutRect flippedRegionRect(renderRegion->flowThreadPortionRect());
     if (isHorizontalWritingMode())
         flippedRegionRect.setHeight(columnSet->computedColumnHeight());
@@ -612,9 +619,29 @@ RenderRegion* RenderMultiColumnFlowThread::mapFromFlowToRegion(TransformState& t
     
     flippedRegionRect.moveBy(-translationOffset);
     
-    // There is an additional offset to apply, which is the offset of the region within the multi-column space.
-    transformState.move(renderRegion->contentBoxRect().location() - flippedRegionRect.location());
+    return renderRegion->contentBoxRect().location() - flippedRegionRect.location();
+}
 
+RenderRegion* RenderMultiColumnFlowThread::physicalTranslationFromFlowToRegion(LayoutPoint& physicalPoint) const
+{
+    if (!hasValidRegionInfo())
+        return nullptr;
+    
+    // Put the physical point into the flow thread's coordinate space.
+    LayoutPoint logicalPoint = flipForWritingMode(physicalPoint);
+    
+    // Now get the region that we are in.
+    LayoutUnit logicalOffset = isHorizontalWritingMode() ? logicalPoint.y() : logicalPoint.x();
+    RenderRegion* renderRegion = const_cast<RenderMultiColumnFlowThread*>(this)->regionAtBlockOffset(this, logicalOffset, true, DisallowRegionAutoGeneration);
+    if (!renderRegion)
+        return nullptr;
+    
+    // Translate to the coordinate space of the region.
+    LayoutSize translationOffset = physicalTranslationOffsetFromFlowToRegion(renderRegion, logicalOffset);
+    
+    // Now shift the physical point into the region's coordinate space.
+    physicalPoint += translationOffset;
+    
     return renderRegion;
 }
 
index c77e18e..3847ba8 100644 (file)
@@ -41,6 +41,8 @@ public:
     RenderMultiColumnFlowThread(Document&, PassRef<RenderStyle>);
     ~RenderMultiColumnFlowThread();
 
+    virtual bool isRenderMultiColumnFlowThread() const override { return true; }
+
     virtual void removeFlowChildInfo(RenderObject*) override;
 
     RenderBlockFlow* multiColumnBlockFlow() const { return toRenderBlockFlow(parent()); }
@@ -94,6 +96,13 @@ public:
     
     virtual RenderRegion* mapFromFlowToRegion(TransformState&) const override;
     
+    // This method takes a logical offset and returns a physical translation that can be applied to map
+    // a physical point (corresponding to the logical offset) into the region's physical coordinate space.
+    LayoutSize physicalTranslationOffsetFromFlowToRegion(const RenderRegion*, const LayoutUnit) const;
+    
+    // The point is physical, and the result is a physical location within the region.
+    RenderRegion* physicalTranslationFromFlowToRegion(LayoutPoint&) const;
+    
     virtual bool nodeAtPoint(const HitTestRequest&, HitTestResult&, const HitTestLocation& locationInContainer, const LayoutPoint& accumulatedOffset, HitTestAction) override;
 
 private:
@@ -136,6 +145,8 @@ private:
     bool m_beingEvacuated;
 };
 
+RENDER_OBJECT_TYPE_CASTS(RenderMultiColumnFlowThread, isRenderMultiColumnFlowThread())
+
 } // namespace WebCore
 
 #endif // RenderMultiColumnFlowThread_h
index d85a457..0fc5c64 100644 (file)
@@ -817,7 +817,9 @@ LayoutPoint RenderMultiColumnSet::columnTranslationForOffset(const LayoutUnit& o
     
     LayoutRect flowThreadPortion = flowThreadPortionRectAt(startColumn);
     LayoutPoint translationOffset;
-
+    
+    LayoutRect overallFlowThreadPortion = flowThreadPortionRect();
+    
     bool progressionReversed = multiColumnFlowThread()->progressionIsReversed();
     bool progressionIsInline = multiColumnFlowThread()->progressionIsInline();
 
@@ -832,7 +834,7 @@ LayoutPoint RenderMultiColumnSet::columnTranslationForOffset(const LayoutUnit& o
             inlineOffset += contentLogicalWidth() - colLogicalWidth;
     }
     translationOffset.setX(inlineOffset);
-    LayoutUnit blockOffset = initialBlockOffset + (isHorizontalWritingMode() ? -flowThreadPortion.y() : -flowThreadPortion.x());
+    LayoutUnit blockOffset = initialBlockOffset + (isHorizontalWritingMode() ? overallFlowThreadPortion.y() - flowThreadPortion.y() : overallFlowThreadPortion.x() - flowThreadPortion.x());
     if (!progressionIsInline) {
         if (!progressionReversed)
             blockOffset = startColumn * colGap;
index 63f3a28..89094db 100644 (file)
@@ -362,6 +362,7 @@ public:
 
     virtual bool isMultiColumnBlockFlow() const { return false; }
     virtual bool isRenderMultiColumnSet() const { return false; }
+    virtual bool isRenderMultiColumnFlowThread() const { return false; }
     virtual bool isRenderMultiColumnSpannerPlaceholder() const { return false; }
 
     virtual bool isRenderScrollbarPart() const { return false; }