[Qt] Support focus ring outline color for links.
authoryael.aharon@nokia.com <yael.aharon@nokia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 6 Dec 2010 14:47:41 +0000 (14:47 +0000)
committeryael.aharon@nokia.com <yael.aharon@nokia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 6 Dec 2010 14:47:41 +0000 (14:47 +0000)
https://bugs.webkit.org/show_bug.cgi?id=50428

Reviewed by Andreas Kling.

WebCore:

Take width and offset into account when drawing focus ring.

Tests: fast/css/focus-ring-outline-color.html
       fast/css/focus-ring-outline-offset.html
       fast/css/focus-ring-outline-width.html

* platform/graphics/qt/GraphicsContextQt.cpp:
(WebCore::GraphicsContext::drawFocusRing):

LayoutTests:

* fast/css/focus-ring-outline-color.html: Added.
* fast/css/focus-ring-outline-offset.html: Added.
* fast/css/focus-ring-outline-width.html: Added.
* platform/mac/fast/css/focus-ring-outline-color-expected.checksum: Added.
* platform/mac/fast/css/focus-ring-outline-color-expected.png: Added.
* platform/mac/fast/css/focus-ring-outline-color-expected.txt: Added.
* platform/mac/fast/css/focus-ring-outline-offset-expected.checksum: Added.
* platform/mac/fast/css/focus-ring-outline-offset-expected.png: Added.
* platform/mac/fast/css/focus-ring-outline-offset-expected.txt: Added.
* platform/mac/fast/css/focus-ring-outline-width-expected.checksum: Added.
* platform/mac/fast/css/focus-ring-outline-width-expected.png: Added.
* platform/mac/fast/css/focus-ring-outline-width-expected.txt: Added.
* platform/qt/fast/css/focus-ring-outline-color-expected.checksum: Added.
* platform/qt/fast/css/focus-ring-outline-color-expected.png: Added.
* platform/qt/fast/css/focus-ring-outline-color-expected.txt: Added.
* platform/qt/fast/css/focus-ring-outline-offset-expected.checksum: Added.
* platform/qt/fast/css/focus-ring-outline-offset-expected.png: Added.
* platform/qt/fast/css/focus-ring-outline-offset-expected.txt: Added.
* platform/qt/fast/css/focus-ring-outline-width-expected.checksum: Added.
* platform/qt/fast/css/focus-ring-outline-width-expected.png: Added.
* platform/qt/fast/css/focus-ring-outline-width-expected.txt: Added.

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

24 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/css/focus-ring-outline-color.html [new file with mode: 0644]
LayoutTests/fast/css/focus-ring-outline-offset.html [new file with mode: 0644]
LayoutTests/fast/css/focus-ring-outline-width.html [new file with mode: 0644]
LayoutTests/platform/mac/fast/css/focus-ring-outline-color-expected.checksum [new file with mode: 0755]
LayoutTests/platform/mac/fast/css/focus-ring-outline-color-expected.png [new file with mode: 0755]
LayoutTests/platform/mac/fast/css/focus-ring-outline-color-expected.txt [new file with mode: 0755]
LayoutTests/platform/mac/fast/css/focus-ring-outline-offset-expected.checksum [new file with mode: 0755]
LayoutTests/platform/mac/fast/css/focus-ring-outline-offset-expected.png [new file with mode: 0755]
LayoutTests/platform/mac/fast/css/focus-ring-outline-offset-expected.txt [new file with mode: 0755]
LayoutTests/platform/mac/fast/css/focus-ring-outline-width-expected.checksum [new file with mode: 0755]
LayoutTests/platform/mac/fast/css/focus-ring-outline-width-expected.png [new file with mode: 0755]
LayoutTests/platform/mac/fast/css/focus-ring-outline-width-expected.txt [new file with mode: 0755]
LayoutTests/platform/qt/fast/css/focus-ring-outline-color-expected.checksum [new file with mode: 0644]
LayoutTests/platform/qt/fast/css/focus-ring-outline-color-expected.png [new file with mode: 0644]
LayoutTests/platform/qt/fast/css/focus-ring-outline-color-expected.txt [new file with mode: 0644]
LayoutTests/platform/qt/fast/css/focus-ring-outline-offset-expected.checksum [new file with mode: 0644]
LayoutTests/platform/qt/fast/css/focus-ring-outline-offset-expected.png [new file with mode: 0644]
LayoutTests/platform/qt/fast/css/focus-ring-outline-offset-expected.txt [new file with mode: 0644]
LayoutTests/platform/qt/fast/css/focus-ring-outline-width-expected.checksum [new file with mode: 0644]
LayoutTests/platform/qt/fast/css/focus-ring-outline-width-expected.png [new file with mode: 0644]
LayoutTests/platform/qt/fast/css/focus-ring-outline-width-expected.txt [new file with mode: 0644]
WebCore/ChangeLog
WebCore/platform/graphics/qt/GraphicsContextQt.cpp

index 76558bc..e28008a 100644 (file)
@@ -2,6 +2,35 @@
 
         Reviewed by Andreas Kling.
 
+        [Qt] Support focus ring outline color for links.
+        https://bugs.webkit.org/show_bug.cgi?id=50428
+
+        * fast/css/focus-ring-outline-color.html: Added.
+        * fast/css/focus-ring-outline-offset.html: Added.
+        * fast/css/focus-ring-outline-width.html: Added.
+        * platform/mac/fast/css/focus-ring-outline-color-expected.checksum: Added.
+        * platform/mac/fast/css/focus-ring-outline-color-expected.png: Added.
+        * platform/mac/fast/css/focus-ring-outline-color-expected.txt: Added.
+        * platform/mac/fast/css/focus-ring-outline-offset-expected.checksum: Added.
+        * platform/mac/fast/css/focus-ring-outline-offset-expected.png: Added.
+        * platform/mac/fast/css/focus-ring-outline-offset-expected.txt: Added.
+        * platform/mac/fast/css/focus-ring-outline-width-expected.checksum: Added.
+        * platform/mac/fast/css/focus-ring-outline-width-expected.png: Added.
+        * platform/mac/fast/css/focus-ring-outline-width-expected.txt: Added.
+        * platform/qt/fast/css/focus-ring-outline-color-expected.checksum: Added.
+        * platform/qt/fast/css/focus-ring-outline-color-expected.png: Added.
+        * platform/qt/fast/css/focus-ring-outline-color-expected.txt: Added.
+        * platform/qt/fast/css/focus-ring-outline-offset-expected.checksum: Added.
+        * platform/qt/fast/css/focus-ring-outline-offset-expected.png: Added.
+        * platform/qt/fast/css/focus-ring-outline-offset-expected.txt: Added.
+        * platform/qt/fast/css/focus-ring-outline-width-expected.checksum: Added.
+        * platform/qt/fast/css/focus-ring-outline-width-expected.png: Added.
+        * platform/qt/fast/css/focus-ring-outline-width-expected.txt: Added.
+
+2010-12-06  Yael Aharon  <yael.aharon@nokia.com>
+
+        Reviewed by Andreas Kling.
+
         [Qt] Fix focus ring outline color support
         https://bugs.webkit.org/show_bug.cgi?id=50325
 
diff --git a/LayoutTests/fast/css/focus-ring-outline-color.html b/LayoutTests/fast/css/focus-ring-outline-color.html
new file mode 100644 (file)
index 0000000..c968d80
--- /dev/null
@@ -0,0 +1,17 @@
+<html>
+<head>
+<style>
+a:focus { outline-color: green; }
+</style>
+<script>
+window.onload = function()
+{
+    document.getElementById("link").focus();
+}
+</script>
+</head>
+<body>
+<p>Assuming the port-specific theme draws focus rings, this test can be used to ensure that a focus ring is drawn with green outline color.</p>
+<a id="link" href="#"/>Test</a>
+</body>
+</html>
diff --git a/LayoutTests/fast/css/focus-ring-outline-offset.html b/LayoutTests/fast/css/focus-ring-outline-offset.html
new file mode 100644 (file)
index 0000000..9213f35
--- /dev/null
@@ -0,0 +1,17 @@
+<html>
+<head>
+<style>
+a:focus { outline-offset: 10px; }
+</style>
+<script>
+window.onload = function()
+{
+    document.getElementById("link").focus();
+}
+</script>
+</head>
+<body>
+<p>Assuming the port-specific theme draws focus rings, this test can be used to ensure that a focus ring is drawn with an outline offset of 10 px.</p>
+(Some filler text) <a id="link" href="#"/>Test</a>
+</body>
+</html>
diff --git a/LayoutTests/fast/css/focus-ring-outline-width.html b/LayoutTests/fast/css/focus-ring-outline-width.html
new file mode 100644 (file)
index 0000000..6fb823a
--- /dev/null
@@ -0,0 +1,17 @@
+<html>
+<head>
+<style>
+a:focus { outline-width: 10px; }
+</style>
+<script>
+window.onload = function()
+{
+    document.getElementById("link").focus();
+}
+</script>
+</head>
+<body>
+<p>Assuming the port-specific theme draws focus rings, this test can be used to ensure that a focus ring is drawn with an outline width of 10 px.</p>
+<a id="link" href="#"/>Test</a>
+</body>
+</html>
diff --git a/LayoutTests/platform/mac/fast/css/focus-ring-outline-color-expected.checksum b/LayoutTests/platform/mac/fast/css/focus-ring-outline-color-expected.checksum
new file mode 100755 (executable)
index 0000000..754714c
--- /dev/null
@@ -0,0 +1 @@
+f9897678ac7b5462ef52d127b86d104a
\ No newline at end of file
diff --git a/LayoutTests/platform/mac/fast/css/focus-ring-outline-color-expected.png b/LayoutTests/platform/mac/fast/css/focus-ring-outline-color-expected.png
new file mode 100755 (executable)
index 0000000..23eafe8
Binary files /dev/null and b/LayoutTests/platform/mac/fast/css/focus-ring-outline-color-expected.png differ
diff --git a/LayoutTests/platform/mac/fast/css/focus-ring-outline-color-expected.txt b/LayoutTests/platform/mac/fast/css/focus-ring-outline-color-expected.txt
new file mode 100755 (executable)
index 0000000..ac07367
--- /dev/null
@@ -0,0 +1,14 @@
+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 784x36
+        RenderText {#text} at (0,0) size 754x36
+          text run at (0,0) width 754: "Assuming the port-specific theme draws focus rings, this test can be used to ensure that a focus ring is drawn with green"
+          text run at (0,18) width 83: "outline color."
+      RenderBlock (anonymous) at (0,52) size 784x18
+        RenderInline {A} at (0,0) size 27x18 [color=#0000EE]
+          RenderText {#text} at (0,0) size 27x18
+            text run at (0,0) width 27: "Test"
+        RenderText {#text} at (0,0) size 0x0
diff --git a/LayoutTests/platform/mac/fast/css/focus-ring-outline-offset-expected.checksum b/LayoutTests/platform/mac/fast/css/focus-ring-outline-offset-expected.checksum
new file mode 100755 (executable)
index 0000000..0c90626
--- /dev/null
@@ -0,0 +1 @@
+9a1c37ef4c8b4a5ae4ebf8e3bf295d2b
\ No newline at end of file
diff --git a/LayoutTests/platform/mac/fast/css/focus-ring-outline-offset-expected.png b/LayoutTests/platform/mac/fast/css/focus-ring-outline-offset-expected.png
new file mode 100755 (executable)
index 0000000..6855f50
Binary files /dev/null and b/LayoutTests/platform/mac/fast/css/focus-ring-outline-offset-expected.png differ
diff --git a/LayoutTests/platform/mac/fast/css/focus-ring-outline-offset-expected.txt b/LayoutTests/platform/mac/fast/css/focus-ring-outline-offset-expected.txt
new file mode 100755 (executable)
index 0000000..4f8d001
--- /dev/null
@@ -0,0 +1,16 @@
+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 784x36
+        RenderText {#text} at (0,0) size 781x36
+          text run at (0,0) width 781: "Assuming the port-specific theme draws focus rings, this test can be used to ensure that a focus ring is drawn with an outline"
+          text run at (0,18) width 96: "offset of 10 px."
+      RenderBlock (anonymous) at (0,52) size 784x18
+        RenderText {#text} at (0,0) size 110x18
+          text run at (0,0) width 110: "(Some filler text) "
+        RenderInline {A} at (0,0) size 27x18 [color=#0000EE]
+          RenderText {#text} at (110,0) size 27x18
+            text run at (110,0) width 27: "Test"
+        RenderText {#text} at (0,0) size 0x0
diff --git a/LayoutTests/platform/mac/fast/css/focus-ring-outline-width-expected.checksum b/LayoutTests/platform/mac/fast/css/focus-ring-outline-width-expected.checksum
new file mode 100755 (executable)
index 0000000..2413bda
--- /dev/null
@@ -0,0 +1 @@
+3eb0236670fb384cb97b116084cd70be
\ No newline at end of file
diff --git a/LayoutTests/platform/mac/fast/css/focus-ring-outline-width-expected.png b/LayoutTests/platform/mac/fast/css/focus-ring-outline-width-expected.png
new file mode 100755 (executable)
index 0000000..e7b0eab
Binary files /dev/null and b/LayoutTests/platform/mac/fast/css/focus-ring-outline-width-expected.png differ
diff --git a/LayoutTests/platform/mac/fast/css/focus-ring-outline-width-expected.txt b/LayoutTests/platform/mac/fast/css/focus-ring-outline-width-expected.txt
new file mode 100755 (executable)
index 0000000..70ae30f
--- /dev/null
@@ -0,0 +1,14 @@
+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 784x36
+        RenderText {#text} at (0,0) size 781x36
+          text run at (0,0) width 781: "Assuming the port-specific theme draws focus rings, this test can be used to ensure that a focus ring is drawn with an outline"
+          text run at (0,18) width 97: "width of 10 px."
+      RenderBlock (anonymous) at (0,52) size 784x18
+        RenderInline {A} at (0,0) size 27x18 [color=#0000EE]
+          RenderText {#text} at (0,0) size 27x18
+            text run at (0,0) width 27: "Test"
+        RenderText {#text} at (0,0) size 0x0
diff --git a/LayoutTests/platform/qt/fast/css/focus-ring-outline-color-expected.checksum b/LayoutTests/platform/qt/fast/css/focus-ring-outline-color-expected.checksum
new file mode 100644 (file)
index 0000000..cd6218e
--- /dev/null
@@ -0,0 +1 @@
+7759257f4cac5223d159e526b686039e
\ No newline at end of file
diff --git a/LayoutTests/platform/qt/fast/css/focus-ring-outline-color-expected.png b/LayoutTests/platform/qt/fast/css/focus-ring-outline-color-expected.png
new file mode 100644 (file)
index 0000000..fafddfb
Binary files /dev/null and b/LayoutTests/platform/qt/fast/css/focus-ring-outline-color-expected.png differ
diff --git a/LayoutTests/platform/qt/fast/css/focus-ring-outline-color-expected.txt b/LayoutTests/platform/qt/fast/css/focus-ring-outline-color-expected.txt
new file mode 100644 (file)
index 0000000..9a6eb1e
--- /dev/null
@@ -0,0 +1,14 @@
+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 784x42
+        RenderText {#text} at (0,0) size 766x42
+          text run at (0,0) width 766: "Assuming the port-specific theme draws focus rings, this test can be used to ensure that a focus ring is drawn with"
+          text run at (0,21) width 130: "green outline color."
+      RenderBlock (anonymous) at (0,58) size 784x21
+        RenderInline {A} at (0,0) size 29x21 [color=#0000EE]
+          RenderText {#text} at (0,0) size 29x21
+            text run at (0,0) width 29: "Test"
+        RenderText {#text} at (0,0) size 0x0
diff --git a/LayoutTests/platform/qt/fast/css/focus-ring-outline-offset-expected.checksum b/LayoutTests/platform/qt/fast/css/focus-ring-outline-offset-expected.checksum
new file mode 100644 (file)
index 0000000..dc80620
--- /dev/null
@@ -0,0 +1 @@
+0a55a6bc900700bf741b499eb6c6d4fb
\ No newline at end of file
diff --git a/LayoutTests/platform/qt/fast/css/focus-ring-outline-offset-expected.png b/LayoutTests/platform/qt/fast/css/focus-ring-outline-offset-expected.png
new file mode 100644 (file)
index 0000000..a8a69c6
Binary files /dev/null and b/LayoutTests/platform/qt/fast/css/focus-ring-outline-offset-expected.png differ
diff --git a/LayoutTests/platform/qt/fast/css/focus-ring-outline-offset-expected.txt b/LayoutTests/platform/qt/fast/css/focus-ring-outline-offset-expected.txt
new file mode 100644 (file)
index 0000000..69545dc
--- /dev/null
@@ -0,0 +1,16 @@
+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 784x42
+        RenderText {#text} at (0,0) size 766x42
+          text run at (0,0) width 766: "Assuming the port-specific theme draws focus rings, this test can be used to ensure that a focus ring is drawn with"
+          text run at (0,21) width 169: "an outline offset of 10 px."
+      RenderBlock (anonymous) at (0,58) size 784x21
+        RenderText {#text} at (0,0) size 115x21
+          text run at (0,0) width 115: "(Some filler text) "
+        RenderInline {A} at (0,0) size 29x21 [color=#0000EE]
+          RenderText {#text} at (115,0) size 29x21
+            text run at (115,0) width 29: "Test"
+        RenderText {#text} at (0,0) size 0x0
diff --git a/LayoutTests/platform/qt/fast/css/focus-ring-outline-width-expected.checksum b/LayoutTests/platform/qt/fast/css/focus-ring-outline-width-expected.checksum
new file mode 100644 (file)
index 0000000..ae1aed1
--- /dev/null
@@ -0,0 +1 @@
+33ecc1f39c5084e7c66642b18f3ae11e
\ No newline at end of file
diff --git a/LayoutTests/platform/qt/fast/css/focus-ring-outline-width-expected.png b/LayoutTests/platform/qt/fast/css/focus-ring-outline-width-expected.png
new file mode 100644 (file)
index 0000000..862563b
Binary files /dev/null and b/LayoutTests/platform/qt/fast/css/focus-ring-outline-width-expected.png differ
diff --git a/LayoutTests/platform/qt/fast/css/focus-ring-outline-width-expected.txt b/LayoutTests/platform/qt/fast/css/focus-ring-outline-width-expected.txt
new file mode 100644 (file)
index 0000000..7e181a0
--- /dev/null
@@ -0,0 +1,14 @@
+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 784x42
+        RenderText {#text} at (0,0) size 766x42
+          text run at (0,0) width 766: "Assuming the port-specific theme draws focus rings, this test can be used to ensure that a focus ring is drawn with"
+          text run at (0,21) width 172: "an outline width of 10 px."
+      RenderBlock (anonymous) at (0,58) size 784x21
+        RenderInline {A} at (0,0) size 29x21 [color=#0000EE]
+          RenderText {#text} at (0,0) size 29x21
+            text run at (0,0) width 29: "Test"
+        RenderText {#text} at (0,0) size 0x0
index f9a7fed..34dd023 100644 (file)
@@ -2,6 +2,22 @@
 
         Reviewed by Andreas Kling.
 
+        [Qt] Support focus ring outline color for links.
+        https://bugs.webkit.org/show_bug.cgi?id=50428
+
+        Take width and offset into account when drawing focus ring.
+
+        Tests: fast/css/focus-ring-outline-color.html
+               fast/css/focus-ring-outline-offset.html
+               fast/css/focus-ring-outline-width.html
+
+        * platform/graphics/qt/GraphicsContextQt.cpp:
+        (WebCore::GraphicsContext::drawFocusRing):
+
+2010-12-06  Yael Aharon  <yael.aharon@nokia.com>
+
+        Reviewed by Andreas Kling.
+
         [Qt] Fix focus ring outline color support
         https://bugs.webkit.org/show_bug.cgi?id=50325
 
index b986e0f..727fbf1 100644 (file)
@@ -853,7 +853,7 @@ void GraphicsContext::drawFocusRing(const Path& path, int width, int offset, con
  * RenderTheme handles drawing focus on widgets which 
  * need it. It is still handled here for links.
  */
-void GraphicsContext::drawFocusRing(const Vector<IntRect>& rects, int /* width */, int /* offset */, const Color& color)
+void GraphicsContext::drawFocusRing(const Vector<IntRect>& rects, int width, int offset, const Color& color)
 {
     if (paintingDisabled() || !color.isValid())
         return;
@@ -871,9 +871,13 @@ void GraphicsContext::drawFocusRing(const Vector<IntRect>& rects, int /* width *
     const QBrush oldBrush = p->brush();
 
     QPen nPen = p->pen();
-    nPen.setColor(color);
+    int radius = (width - 1) / 2;
+
+    nPen.setColor(QColor(color.red(), color.green(), color.blue(), 127));
+    nPen.setWidth(width);
+
     p->setBrush(Qt::NoBrush);
-    nPen.setStyle(Qt::DotLine);
+    nPen.setStyle(Qt::SolidLine);
     p->setPen(nPen);
 #if 0
     // FIXME How do we do a bounding outline with Qt?
@@ -884,8 +888,10 @@ void GraphicsContext::drawFocusRing(const Vector<IntRect>& rects, int /* width *
     QPainterPath newPath = stroker.createStroke(path);
     p->strokePath(newPath, nPen);
 #else
-    for (unsigned i = 0; i < rectCount; ++i)
-        p->drawRect(QRectF(rects[i]));
+    for (unsigned i = 0; i < rectCount; ++i) {
+        QRect rect = QRect((rects[i])).adjusted(-offset - radius, -offset - radius, offset + radius, offset + radius);
+        p->drawRoundedRect(rect, radius, radius);
+    }
 #endif
     p->setPen(oldPen);
     p->setBrush(oldBrush);