[CSSRegions] Compute region ranges for inline replaced elements
authormihnea@adobe.com <mihnea@adobe.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 18 Feb 2014 15:11:00 +0000 (15:11 +0000)
committermihnea@adobe.com <mihnea@adobe.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 18 Feb 2014 15:11:00 +0000 (15:11 +0000)
https://bugs.webkit.org/show_bug.cgi?id=128800

Reviewed by Andrei Bucur.

Source/WebCore:

Tests: fast/regions/hover-content-inside-iframe-in-region.html
       fast/regions/select-multiple-in-region.html

When asking for the range of regions for an inline replaced box,
use the region cached on the root inline box for the inline replaced
box as the range of regions is computed only for blocks.
A future patch will extend the computation of region ranges
for inline blocks too.

* rendering/RenderBoxModelObject.cpp:
(WebCore::RenderBoxModelObject::mapAbsoluteToLocalPoint):
Remove the restriction set during https://bugs.webkit.org/show_bug.cgi?id=113703
and enable the code path for boxes not only for blocks.
Method RenderFlowThread::getRegionRangeForBox returns a null region when it is unable
to get the region range and we already check for null region case.
* rendering/RenderFlowThread.cpp:
(WebCore::RenderFlowThread::getRegionRangeForBox):

LayoutTests:

* fast/regions/hover-content-inside-iframe-in-region-expected.html: Added.
* fast/regions/hover-content-inside-iframe-in-region.html: Added.
* fast/regions/resources/iframe-in-region-source.html: Added.
* fast/regions/select-multiple-in-region-expected.txt: Added.
* fast/regions/select-multiple-in-region.html: Added.

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

LayoutTests/ChangeLog
LayoutTests/fast/regions/hover-content-inside-iframe-in-region-expected.html [new file with mode: 0644]
LayoutTests/fast/regions/hover-content-inside-iframe-in-region.html [new file with mode: 0644]
LayoutTests/fast/regions/resources/iframe-in-region-source.html [new file with mode: 0644]
LayoutTests/fast/regions/select-multiple-in-region-expected.txt [new file with mode: 0644]
LayoutTests/fast/regions/select-multiple-in-region.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderBoxModelObject.cpp
Source/WebCore/rendering/RenderFlowThread.cpp

index 83a69a3..5b1b7e6 100644 (file)
@@ -1,3 +1,16 @@
+2014-02-18  Mihnea Ovidenie  <mihnea@adobe.com>
+
+        [CSSRegions] Compute region ranges for inline replaced elements
+        https://bugs.webkit.org/show_bug.cgi?id=128800
+
+        Reviewed by Andrei Bucur.
+
+        * fast/regions/hover-content-inside-iframe-in-region-expected.html: Added.
+        * fast/regions/hover-content-inside-iframe-in-region.html: Added.
+        * fast/regions/resources/iframe-in-region-source.html: Added.
+        * fast/regions/select-multiple-in-region-expected.txt: Added.
+        * fast/regions/select-multiple-in-region.html: Added.
+
 2014-02-17  Benjamin Poulain  <bpoulain@apple.com>
 
         SelectorCompiler incorrectly saves a backtracking register for a child chain without descendant relation on the right
diff --git a/LayoutTests/fast/regions/hover-content-inside-iframe-in-region-expected.html b/LayoutTests/fast/regions/hover-content-inside-iframe-in-region-expected.html
new file mode 100644 (file)
index 0000000..bdb8473
--- /dev/null
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            #region {
+                width: 150px;
+                height: 150px;
+                position: absolute;
+                top: 150px;
+                left: 150px;
+                border: 5px solid black;
+                background-color: green;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test that moving the cursor over the content of an iframe that is displayed in region correctly aplies the hover style for the content.</p>
+        <p>To manually test, move the cursor over the red square.</p>
+        <p>On success, you should see a green rectangle with black border and no red.</p>
+        <div id="region"></div>
+    </body>
+</html>
diff --git a/LayoutTests/fast/regions/hover-content-inside-iframe-in-region.html b/LayoutTests/fast/regions/hover-content-inside-iframe-in-region.html
new file mode 100644 (file)
index 0000000..7701989
--- /dev/null
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            #region {
+                -webkit-flow-from: flow;
+                width: 150px;
+                height: 150px;
+                position: absolute;
+                top: 150px;
+                left: 150px;
+                border: 5px solid black;
+                background-color: green;
+            }
+            #iframe {
+                -webkit-flow-into: flow;
+                border: none;
+                width: 150px;
+                height: 150px;
+            }
+        </style>
+    </head>
+    <body onload="test()">
+        <iframe id="iframe" src="resources/iframe-in-region-source.html"></iframe>
+        <p>Test that moving the cursor over the content of an iframe that is displayed in region correctly aplies the hover style for the content.</p>
+        <p>To manually test, move the cursor over the red square.</p>
+        <p>On success, you should see a green rectangle with black border and no red.</p>
+        <div id="region"></div>
+        <script>
+            function test() {
+                if (window.eventSender) {
+                    var regionRect = document.getElementById("region").getBoundingClientRect();
+                    var iframe = document.getElementById("iframe");
+                    window.eventSender.mouseMoveTo(iframe.offsetLeft + 20, iframe.offsetTop + 20);
+                    window.eventSender.mouseDown(0);
+                }
+            }
+        </script>
+    </body>
+</html>
diff --git a/LayoutTests/fast/regions/resources/iframe-in-region-source.html b/LayoutTests/fast/regions/resources/iframe-in-region-source.html
new file mode 100644 (file)
index 0000000..52ba79c
--- /dev/null
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            #div1 { width: 120px; height: 120px; background-color: red; }
+            #div1:hover { background-color: green; }
+        </style>
+    </head>
+    <body>
+        <div id="div1"></div>
+    </body>
+</html>
diff --git a/LayoutTests/fast/regions/select-multiple-in-region-expected.txt b/LayoutTests/fast/regions/select-multiple-in-region-expected.txt
new file mode 100644 (file)
index 0000000..5c29775
--- /dev/null
@@ -0,0 +1,9 @@
+Test that you can select an option from a multiple type select element displayed in region.
+
+To manually test it, click on option_2 item.
+
+On success, it should be selected and you should see PASS below.
+
+PASS
+
+
diff --git a/LayoutTests/fast/regions/select-multiple-in-region.html b/LayoutTests/fast/regions/select-multiple-in-region.html
new file mode 100644 (file)
index 0000000..7f9e4c5
--- /dev/null
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            #region {
+                -webkit-flow-from: flow;
+                position: absolute;
+                top: 150px;
+                left: 150px;
+                width: 150px;
+                height: 150px;
+                border: 1px solid black;
+            }
+            #select {
+                -webkit-flow-into: flow;
+                font: 20px/1 monospace;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test that you can select an option from a multiple type select element displayed in region.</p>
+        <p>To manually test it, click on option_2 item.</p>
+        <p>On success, it should be selected and you should see PASS below.</p>
+        <p id="result"></p>
+        <div id="region"></div>
+        <select id="select" multiple>
+            <option>option_1</option>
+            <option>option_2</option>
+            <option>option_3</option>
+            <option>option_4</option>
+            <option>option_5</option>
+        </select>
+        <script>
+            document.getElementById("select").addEventListener("mouseup", function(evt)
+            {
+                document.getElementById("result").innerHTML = (this.selectedIndex == 1) ? "PASS" : "FAIL";
+            });
+
+            if (window.testRunner)
+                testRunner.dumpAsText();
+
+            if (window.eventSender) {
+                var selectRect = document.getElementById("select").getBoundingClientRect();
+                eventSender.mouseMoveTo(selectRect.left + 10, selectRect.top + 30);
+                eventSender.mouseDown(0);
+                eventSender.mouseUp();
+            }
+        </script>
+    </body>
+</html>
index ef161c0..3dcd081 100644 (file)
@@ -1,3 +1,28 @@
+2014-02-18  Mihnea Ovidenie  <mihnea@adobe.com>
+
+        [CSSRegions] Compute region ranges for inline replaced elements
+        https://bugs.webkit.org/show_bug.cgi?id=128800
+
+        Reviewed by Andrei Bucur.
+
+        Tests: fast/regions/hover-content-inside-iframe-in-region.html
+               fast/regions/select-multiple-in-region.html
+
+        When asking for the range of regions for an inline replaced box,
+        use the region cached on the root inline box for the inline replaced
+        box as the range of regions is computed only for blocks.
+        A future patch will extend the computation of region ranges
+        for inline blocks too.
+
+        * rendering/RenderBoxModelObject.cpp:
+        (WebCore::RenderBoxModelObject::mapAbsoluteToLocalPoint):
+        Remove the restriction set during https://bugs.webkit.org/show_bug.cgi?id=113703
+        and enable the code path for boxes not only for blocks.
+        Method RenderFlowThread::getRegionRangeForBox returns a null region when it is unable
+        to get the region range and we already check for null region case.
+        * rendering/RenderFlowThread.cpp:
+        (WebCore::RenderFlowThread::getRegionRangeForBox):
+
 2014-02-18  Xabier Rodriguez Calvar  <calvaris@igalia.com>
 
         Move inheriting method to the superclass in the JavaScript media controls
index f6a847d..f316d09 100644 (file)
@@ -2749,12 +2749,10 @@ void RenderBoxModelObject::mapAbsoluteToLocalPoint(MapCoordinatesFlags mode, Tra
 
     // The point inside a box that's inside a region has its coordinates relative to the region,
     // not the FlowThread that is its container in the RenderObject tree.
-    if (o->isRenderFlowThread() && isRenderBlock()) {
-        // FIXME (CSSREGIONS): switch to Box instead of Block when we'll have range information
-        // for boxes as well, not just for blocks.
+    if (o->isRenderFlowThread() && isBox()) {
         RenderRegion* startRegion;
         RenderRegion* endRegion;
-        toRenderFlowThread(o)->getRegionRangeForBox(toRenderBlock(this), startRegion, endRegion);
+        toRenderFlowThread(o)->getRegionRangeForBox(toRenderBox(this), startRegion, endRegion);
         if (startRegion)
             o = startRegion;
     }
index 5673fec..c676f54 100644 (file)
@@ -33,6 +33,7 @@
 #include "FlowThreadController.h"
 #include "HitTestRequest.h"
 #include "HitTestResult.h"
+#include "InlineElementBox.h"
 #include "Node.h"
 #include "PODIntervalTree.h"
 #include "PaintInfo.h"
@@ -784,16 +785,23 @@ void RenderFlowThread::setRegionRangeForBox(const RenderBox* box, RenderRegion*
 
 void RenderFlowThread::getRegionRangeForBox(const RenderBox* box, RenderRegion*& startRegion, RenderRegion*& endRegion) const
 {
-    startRegion = 0;
-    endRegion = 0;
+    startRegion = endRegion = 0;
     auto it = m_regionRangeMap.find(box);
-    if (it == m_regionRangeMap.end())
+
+    if (it != m_regionRangeMap.end()) {
+        const RenderRegionRange& range = it->value;
+        startRegion = range.startRegion();
+        endRegion = range.endRegion();
+        ASSERT(m_regionList.contains(startRegion) && m_regionList.contains(endRegion));
         return;
+    }
 
-    const RenderRegionRange& range = it->value;
-    startRegion = range.startRegion();
-    endRegion = range.endRegion();
-    ASSERT(m_regionList.contains(startRegion) && m_regionList.contains(endRegion));
+    InlineElementBox* boxWrapper = box->inlineBoxWrapper();
+    if (boxWrapper) {
+        const RootInlineBox& boxWrapperRootInlineBox =  boxWrapper->root();
+        startRegion = endRegion = boxWrapperRootInlineBox.containingRegion();
+        return;
+    }
 }
 
 void RenderFlowThread::applyBreakAfterContent(LayoutUnit clientHeight)