Source/WebCore: Web Inspector: Incorrect highlight position of inspected element...
authorwangxianzhu@chromium.org <wangxianzhu@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 25 Apr 2012 07:11:21 +0000 (07:11 +0000)
committerwangxianzhu@chromium.org <wangxianzhu@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 25 Apr 2012 07:11:21 +0000 (07:11 +0000)
https://bugs.webkit.org/show_bug.cgi?id=84755

Reviewed by Pavel Feldman.

Test: inspector/elements/highlight-node-scroll.html

* inspector/DOMNodeHighlighter.cpp: Ensures the highlight position is in page coordinates.

LayoutTests: Web Inspector: REGRESSION: Incorrect highlight position of inspected element in scrolled page
https://bugs.webkit.org/show_bug.cgi?id=84755

Reviewed by Pavel Feldman.

* http/tests/inspector/elements-test.js: Extracted common function dumpInspectorHighlightRects() into here with a small bug fixed (x and y inversed).
* inspector/elements/highlight-node-scaled-expected.txt: Corrected the wrong inversed x and y.
* inspector/elements/highlight-node-scaled.html: Extracted out dumpInspectorHighlightRects().
* inspector/elements/highlight-node-scroll-expected.txt: Added. Expectation of the new test case.
* inspector/elements/highlight-node-scroll.html: Added. The new test case.
* inspector/elements/highlight-node.html: Extracted out dumpInspectorHighlightRects(). Expectation not changed because the x and y happened to be the same in the original expectation.
* inspector/elements/highlight-svg-root.html: Ditto.

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

LayoutTests/ChangeLog
LayoutTests/http/tests/inspector/elements-test.js
LayoutTests/inspector/elements/highlight-node-scaled-expected.txt
LayoutTests/inspector/elements/highlight-node-scaled.html
LayoutTests/inspector/elements/highlight-node-scroll-expected.txt [new file with mode: 0644]
LayoutTests/inspector/elements/highlight-node-scroll.html [new file with mode: 0644]
LayoutTests/inspector/elements/highlight-node.html
LayoutTests/inspector/elements/highlight-svg-root.html
Source/WebCore/ChangeLog
Source/WebCore/inspector/DOMNodeHighlighter.cpp

index 97a669c..0356909 100644 (file)
@@ -1,3 +1,18 @@
+2012-04-25  Xianzhu Wang  <wangxianzhu@chromium.org>
+
+        Web Inspector: REGRESSION: Incorrect highlight position of inspected element in scrolled page
+        https://bugs.webkit.org/show_bug.cgi?id=84755
+
+        Reviewed by Pavel Feldman.
+
+        * http/tests/inspector/elements-test.js: Extracted common function dumpInspectorHighlightRects() into here with a small bug fixed (x and y inversed).
+        * inspector/elements/highlight-node-scaled-expected.txt: Corrected the wrong inversed x and y.
+        * inspector/elements/highlight-node-scaled.html: Extracted out dumpInspectorHighlightRects().
+        * inspector/elements/highlight-node-scroll-expected.txt: Added. Expectation of the new test case.
+        * inspector/elements/highlight-node-scroll.html: Added. The new test case.
+        * inspector/elements/highlight-node.html: Extracted out dumpInspectorHighlightRects(). Expectation not changed because the x and y happened to be the same in the original expectation.
+        * inspector/elements/highlight-svg-root.html: Ditto.
+
 2012-04-25  Csaba Osztrogon√°c  <ossy@webkit.org>
 
         [Qt] Unreviewed morning gardening after r115091.
index a0dd546..21c737a 100644 (file)
@@ -434,3 +434,15 @@ InspectorTest.generateUndoTest = function(testBody)
 }
 
 };
+
+function dumpInspectorHighlightRects()
+{
+    var rectNames = ["margin", "border", "padding", "content"];
+    var rects = window.internals.inspectorHighlightRects(document);
+    for (var i = 0; i < rects.length; i++)
+    {
+        var rectName = (i < rectNames.length ? rectNames[i] : "untitled");
+        var rect = rects.item(i);
+        output(rectName + " rect is " + rect.width + " x " + rect.height + " at (" + rect.left + ", " + rect.top + ")");
+    }
+}
index e093b49..06ae4e7 100644 (file)
@@ -1,6 +1,6 @@
 
-margin rect is 166 x 188 at (154, 192)
-border rect is 138 x 160 at (168, 206)
-padding rect is 118 x 140 at (178, 216)
-content rect is 66 x 88 at (204, 242)
+margin rect is 166 x 188 at (192, 154)
+border rect is 138 x 160 at (206, 168)
+padding rect is 118 x 140 at (216, 178)
+content rect is 66 x 88 at (242, 204)
 
index 97258e3..0e79fcd 100644 (file)
@@ -21,19 +21,6 @@ iframe {
 <script src="../../http/tests/inspector/elements-test.js"></script>
 <script>
 
-function dumpInspectorHighlightRects()
-{
-    var rectNames = ["margin", "border", "padding", "content"];
-    var rects = window.internals.inspectorHighlightRects(document);
-    for (var i = 0; i < rects.length; i++)
-    {
-        var rectName = (i < rectNames.length ? rectNames[i] : "untitled");
-        var rect = rects.item(i);
-        var line = rectName + " rect is " + rect.width + " x " + rect.height + " at (" + rect.top + ", " + rect.left + ")<br/>";
-        document.getElementById("console").innerHTML += line;
-    }
-}
-
 function onload()
 {
     if (window.internals)
@@ -60,6 +47,5 @@ function test()
 
 <body onload="onload()">
 <iframe src="resources/highlight-node-scaled-iframe.html"></iframe>
-<div id="console"></div>
 </body>
 </html>
diff --git a/LayoutTests/inspector/elements/highlight-node-scroll-expected.txt b/LayoutTests/inspector/elements/highlight-node-scroll-expected.txt
new file mode 100644 (file)
index 0000000..d31f6d3
--- /dev/null
@@ -0,0 +1,11 @@
+This test verifies the position and size of the highlight rectangles overlayed on an inspected div in the scrolled view.
+
+margin rect is 260 x 260 at (8, 8)
+border rect is 250 x 250 at (13, 13)
+padding rect is 230 x 230 at (23, 23)
+content rect is 200 x 200 at (38, 38)
+margin rect is 260 x 260 at (-52, 218)
+border rect is 250 x 250 at (-47, 223)
+padding rect is 230 x 230 at (-37, 233)
+content rect is 200 x 200 at (-22, 248)
+
diff --git a/LayoutTests/inspector/elements/highlight-node-scroll.html b/LayoutTests/inspector/elements/highlight-node-scroll.html
new file mode 100644 (file)
index 0000000..be26ef6
--- /dev/null
@@ -0,0 +1,79 @@
+<html>
+<head>
+
+<style>
+
+body {
+    width: 2000px;
+    height: 2000px;
+    background-color: grey;
+}
+.inspected {
+    margin: 5px;
+    border: solid 10px aqua;
+    padding: 15px;
+    width: 200px;
+    height: 200px;
+    background-color: blue;
+    float: left;
+}
+#scrollingContainer {
+    clear: both;
+    width: 100px;
+    height: 100px;
+    overflow: auto;
+}
+#description {
+    clear: both;
+}
+
+</style>
+
+<script src="../../http/tests/inspector/inspector-test.js"></script>
+<script src="../../http/tests/inspector/elements-test.js"></script>
+<script>
+
+function onload()
+{
+    window.scrollBy(50, 100);
+    scrollingContainer = document.getElementById("scrollingContainer");
+    scrollingContainer.scrollTop = 50;
+    scrollingContainer.scrollLeft = 60;
+    runTest();
+}
+
+function test()
+{
+    function nodeSelected2(node)
+    {
+        RuntimeAgent.evaluate("dumpInspectorHighlightRects()", InspectorTest.completeTest);
+    }
+
+    function testNode2()
+    {
+        InspectorTest.selectNodeWithId("inspectedElement2", nodeSelected2);
+    }
+
+    function nodeSelected1(node)
+    {
+        RuntimeAgent.evaluate("dumpInspectorHighlightRects()", testNode2);
+    }
+
+    InspectorTest.selectNodeWithId("inspectedElement1", nodeSelected1);
+}
+
+</script>
+</head>
+
+<body onload="onload()">
+
+<div id="inspectedElement1" class="inspected"></div>
+
+<div id="scrollingContainer">
+    <div id="inspectedElement2" class="inspected"></div>
+</div>
+
+<p id="description">This test verifies the position and size of the highlight rectangles overlayed on an inspected div in the scrolled view.</p>
+
+</body>
+</html>
index dfa53de..4b75e5c 100644 (file)
@@ -30,19 +30,6 @@ body {
 <script src="../../http/tests/inspector/elements-test.js"></script>
 <script>
 
-function dumpInspectorHighlightRects()
-{
-    var rectNames = ["margin", "border", "padding", "content"];
-    var rects = window.internals.inspectorHighlightRects(document);
-    for (var i = 0; i < rects.length; i++)
-    {
-        var rectName = (i < rectNames.length ? rectNames[i] : "untitled");
-        var rect = rects.item(i);
-        var line = rectName + " rect is " + rect.width + " x " + rect.height + " at (" + rect.top + ", " + rect.left + ")<br/>";
-        document.getElementById("console").innerHTML += line;
-    }
-}
-
 function test()
 {
     function nodeSelected(node)
@@ -60,7 +47,6 @@ function test()
 
 <div id="inspectedElement"></div>
 <p id="description">This test verifies the position and size of the highlight rectangles overlayed on an inspected div.</p>
-<div id="console"></div>
 
 </body>
 </html>
index 0e69b2a..0f1ae48 100644 (file)
@@ -20,19 +20,6 @@ body {
 <script src="../../http/tests/inspector/elements-test.js"></script>
 <script>
 
-function dumpInspectorHighlightRects()
-{
-    var rectNames = ["margin", "border", "padding", "content"];
-    var rects = window.internals.inspectorHighlightRects(document);
-    for (var i = 0; i < rects.length; i++)
-    {
-        var rectName = (i < rectNames.length ? rectNames[i] : "untitled");
-        var rect = rects.item(i);
-        var line = rectName + " rect is " + rect.width + " x " + rect.height + " at (" + rect.top + ", " + rect.left + ")<br/>";
-        document.getElementById("console").innerHTML += line;
-    }
-}
-
 function test()
 {
     function nodeSelected(node)
@@ -50,7 +37,6 @@ function test()
 
 <svg id="svg-root" width="100" height="100" viewbox="0 0 50 50"></svg>
 <p id="description">This test verifies the position and size of the highlight rectangles overlayed on an SVG root element.</p>
-<div id="console"></div>
 
 </body>
 </html>
index e684b69..d25233c 100644 (file)
@@ -1,3 +1,14 @@
+2012-04-25  Xianzhu Wang  <wangxianzhu@chromium.org>
+
+        Web Inspector: Incorrect highlight position of inspected element in a scrolled page
+        https://bugs.webkit.org/show_bug.cgi?id=84755
+
+        Reviewed by Pavel Feldman.
+
+        Test: inspector/elements/highlight-node-scroll.html
+
+        * inspector/DOMNodeHighlighter.cpp: Ensures the highlight position is in page coordinates.
+
 2012-04-24  Yury Semikhatsky  <yurys@chromium.org>
 
         Unreviewed. Revert part of the change r115063 which commented out
index 6789eb0..e4c7100 100644 (file)
@@ -353,12 +353,13 @@ void drawElementTitle(GraphicsContext& context, Node* node, RenderObject* render
     drawSubstring(nodeTitleRun, currentPos, pxString.length(), pxAndBorderColor, font, context, titleRect);
 }
 
-static void contentsQuadToRootView(FloatQuad& quad, FrameView* view)
+static void contentsQuadToPage(const FrameView* mainView, const FrameView* view, FloatQuad& quad)
 {
     quad.setP1(view->contentsToRootView(roundedIntPoint(quad.p1())));
     quad.setP2(view->contentsToRootView(roundedIntPoint(quad.p2())));
     quad.setP3(view->contentsToRootView(roundedIntPoint(quad.p3())));
     quad.setP4(view->contentsToRootView(roundedIntPoint(quad.p4())));
+    quad += mainView->scrollOffset();
 }
 
 static void getOrDrawNodeHighlight(GraphicsContext* context, HighlightData* highlightData, Highlight* highlight)
@@ -371,10 +372,11 @@ static void getOrDrawNodeHighlight(GraphicsContext* context, HighlightData* high
         return;
 
     FrameView* containingView = containingFrame->view();
-    LayoutRect boundingBox = containingView->contentsToRootView(renderer->absoluteBoundingBoxRect());
-    LayoutRect titleAnchorBox = boundingBox;
-
     FrameView* mainView = containingFrame->page()->mainFrame()->view();
+    IntRect boundingBox = pixelSnappedIntRect(containingView->contentsToRootView(renderer->absoluteBoundingBoxRect()));
+    boundingBox.move(mainView->scrollOffset());
+    IntRect titleAnchorBox = boundingBox;
+
     FloatRect visibleRect = mainView->visibleContentRect();
     // Don't translate the context if the frame is rendered in page coordinates.
     if (context && !mainView->delegatesScrolling())
@@ -391,7 +393,7 @@ static void getOrDrawNodeHighlight(GraphicsContext* context, HighlightData* high
         highlight->type = HighlightTypeRects;
         renderer->absoluteQuads(highlight->quads);
         for (size_t i = 0; i < highlight->quads.size(); ++i)
-            contentsQuadToRootView(highlight->quads[i], containingView);
+            contentsQuadToPage(mainView, containingView, highlight->quads[i]);
 
         if (context)
             drawHighlightForSVGRenderer(*context, highlight->quads, highlightData);
@@ -434,10 +436,10 @@ static void getOrDrawNodeHighlight(GraphicsContext* context, HighlightData* high
         FloatQuad absBorderQuad = renderer->localToAbsoluteQuad(FloatRect(borderBox));
         FloatQuad absMarginQuad = renderer->localToAbsoluteQuad(FloatRect(marginBox));
 
-        contentsQuadToRootView(absContentQuad, containingView);
-        contentsQuadToRootView(absPaddingQuad, containingView);
-        contentsQuadToRootView(absBorderQuad, containingView);
-        contentsQuadToRootView(absMarginQuad, containingView);
+        contentsQuadToPage(mainView, containingView, absContentQuad);
+        contentsQuadToPage(mainView, containingView, absPaddingQuad);
+        contentsQuadToPage(mainView, containingView, absBorderQuad);
+        contentsQuadToPage(mainView, containingView, absMarginQuad);
 
         titleAnchorBox = absMarginQuad.enclosingBoundingBox();