Attachment #75197 for bug #49888

View Details Raw Unified Return to Bug 49888

| Differences between



2010-11-30  Daniel Bates  <dbates@rim.com>

        Reviewed by NOBODY (OOPS!).

        Focused <area> should use CSS properties of <area> instead of associated <img>
        https://bugs.webkit.org/show_bug.cgi?id=49888

        Fixes an issue where the CSS properties of an <area> were not used when
        the <area> was focused.

        Currently, when focusing an <area> (say by pressing option + tab in Mac
        Safari) we use the CSS style information for the <img> associated with
        the <area>. Instead, we should use the CSS style information for the
        focused <area>. In particular, this will make the us honor the outline-
        color property of a focused <area> when drawing its focus ring.

        Tests: fast/images/imagemap-focus-ring-outline-color-explicitly-inherited-from-map.html
               fast/images/imagemap-focus-ring-outline-color-not-inherited-from-map.html
               fast/images/imagemap-focus-ring-outline-color.html

        * rendering/RenderImage.cpp:
        (WebCore::RenderImage::paintFocusRing): Use the style information of
        the focused <area> when drawing the focus ring for it.

2010-11-30  Mario Sanchez Prada  <msanchez@igalia.com>

        Reviewed by Chris Fleizach.



        HTMLAreaElement* areaElement = static_cast<HTMLAreaElement*>(areas->item(k));
        if (focusedNode != areaElement)
            continue;

        RenderStyle* styleToUse = areaElement->computedStyle();
        paintInfo.context->drawFocusRing(areaElement->getPath(this), styleToUse->outlineWidth(), styleToUse->outlineOffset(), styleToUse->visitedDependentColor(CSSPropertyOutlineColor));
        break;
    }
}



2010-11-30  Daniel Bates  <dbates@rim.com>

        Reviewed by NOBODY (OOPS!).

        Focused <area> should use CSS properties of <area> instead of associated <img>
        https://bugs.webkit.org/show_bug.cgi?id=49888

        Updated the test result for test fast/images/imagemap-focus-ring.html. Added
        test to verify that the color of the focus ring for a focused <area> is
        the outline-color specified by the :focus pseudo-class .

        Also, added tests to ensure that outline-color is not inherited (by default) as per
        section 18.4 of the CSS 2.1 spec <http://www.w3.org/TR/CSS2/ui.html#dynamic-outlines>,
        unless explicitly inherited.

        * fast/images/imagemap-focus-ring-outline-color-explicitly-inherited-from-map.html: Added.
        * fast/images/imagemap-focus-ring-outline-color-not-inherited-from-map.html: Added.
        * fast/images/imagemap-focus-ring-outline-color.html: Added.
        * platform/mac/fast/images/imagemap-focus-ring-expected.checksum: Updated result.
        * platform/mac/fast/images/imagemap-focus-ring-expected.png: Ditto.
        * platform/mac/fast/images/imagemap-focus-ring-outline-color-expected.checksum: Added.
        * platform/mac/fast/images/imagemap-focus-ring-outline-color-expected.png: Added.
        * platform/mac/fast/images/imagemap-focus-ring-outline-color-expected.txt: Added.
        * platform/mac/fast/images/imagemap-focus-ring-outline-color-explicitly-inherited-from-map-expected.checksum: Added.
        * platform/mac/fast/images/imagemap-focus-ring-outline-color-explicitly-inherited-from-map-expected.png: Added.
        * platform/mac/fast/images/imagemap-focus-ring-outline-color-explicitly-inherited-from-map-expected.txt: Added.
        * platform/mac/fast/images/imagemap-focus-ring-outline-color-not-inherited-from-map-expected.checksum: Added.
        * platform/mac/fast/images/imagemap-focus-ring-outline-color-not-inherited-from-map-expected.png: Added.
        * platform/mac/fast/images/imagemap-focus-ring-outline-color-not-inherited-from-map-expected.txt: Added.

2010-11-30  Ojan Vafai  <ojan@chromium.org>

        [chromium] Update expectations to de-orange the builders.



<html>
<head>
<style>
map { outline-color: green; }
area:focus { outline-color: inherit; }
</style>
<script>
window.onload = function()
{
    document.getElementById("area").focus();
}
</script>
</head>
<body>
<p>Assuming the port-specific theme draws focus rings, this test can be used to ensure that the focus ring color for an &lt;area&gt; can be explicitly inherited from &lt;map&gt;. This test PASSED if a green-colored focus ring is drawn around the &lt;area&gt; in the imagemap (below).</p>
<map name="imagemap">
    <area id="area" shape="rect" coords="0,0,128,128" href="#dummy"/>
</map>
<img src="imagemap.jpg" width="128" height="128" usemap="#imagemap" />
</body>
</head>
</html>




<html>
<head>
<style>
map { outline-color: red; }
</style>
<script>
window.onload = function()
{
    document.getElementById("area").focus();
}
</script>
</head>
<body>
<p>Assuming the port-specific theme draws focus rings, this test can be used to ensure that the focus ring color is not inherited for an &lt;area&gt; (by default) as per <a href="http://www.w3.org/TR/CSS2/ui.html#dynamic-outlines">section 18.4 "Dynamic outlines: the 'outline' property" of the CSS2.1 spec</a>. This test FAILED if a red-colored focus ring is drawn around the &lt;area&gt; in the imagemap (below).</p>
<map name="imagemap">
    <area id="area" shape="rect" coords="0,0,128,128" href="#dummy"/>
</map>
<img src="imagemap.jpg" width="128" height="128" usemap="#imagemap" />
</body>
</head>
</html>




<html>
<head>
<style>
area:focus { outline-color: green; }
</style>
<script>
window.onload = function()
{
    document.getElementById("area").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 for an &lt;area&gt;. This test PASSED if a green-colored focus ring is drawn around the &lt;area&gt; in the imagemap (below).</p>
<map name="imagemap">
    <area id="area" shape="rect" coords="0,0,128,128" href="#dummy"/>
</map>
<img src="imagemap.jpg" width="128" height="128" usemap="#imagemap" />
</body>
</head>
</html>

Line 1 LayoutTests/platform/mac/fast/images/imagemap-focus-ring-expected.checksum_sec1
- LayoutTests/platform/mac/fast/images/imagemap-focus-ring-expected.checksum -1 / +1 lines
1	c4ec4eae0407f510da84a6a2242f1322	1	942b35ab0339372d6c4da944161be0e7

Line 0 LayoutTests/platform/mac/fast/images/imagemap-focus-ring-outline-color-expected.checksum_sec1
- LayoutTests/platform/mac/fast/images/imagemap-focus-ring-outline-color-expected.checksum +1 lines
		1	34542356965831f59d8902d19e94b26f



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 776x36
          text run at (0,0) width 776: "Assuming the port-specific theme draws focus rings, this test can be used to ensure that a focus ring is drawn for an <area>."
          text run at (0,18) width 642: "This test PASSED if a green-colored focus ring is drawn around the <area> in the imagemap (below)."
      RenderBlock (anonymous) at (0,52) size 784x128
        RenderInline {MAP} at (0,0) size 0x0
          RenderText {#text} at (0,0) size 0x0
          RenderText {#text} at (0,0) size 0x0
        RenderText {#text} at (0,0) size 0x0
        RenderImage {IMG} at (0,0) size 128x128
        RenderText {#text} at (0,0) size 0x0

Line 0 LayoutTests/platform/mac/fast/images/imagemap-focus-ring-outline-color-explicitly-inherited-from-map-expected.checksum_sec1
- LayoutTests/platform/mac/fast/images/imagemap-focus-ring-outline-color-explicitly-inherited-from-map-expected.checksum +1 lines
		1	de5081183e5a8aeb05247d4d99307d87



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 784x54
        RenderText {#text} at (0,0) size 769x54
          text run at (0,0) width 762: "Assuming the port-specific theme draws focus rings, this test can be used to ensure that the focus ring color for an <area>"
          text run at (0,18) width 769: "can be explicitly inherited from <map>. This test PASSED if a green-colored focus ring is drawn around the <area> in the"
          text run at (0,36) width 122: "imagemap (below)."
      RenderBlock (anonymous) at (0,70) size 784x128
        RenderInline {MAP} at (0,0) size 0x0
          RenderText {#text} at (0,0) size 0x0
          RenderText {#text} at (0,0) size 0x0
        RenderText {#text} at (0,0) size 0x0
        RenderImage {IMG} at (0,0) size 128x128
        RenderText {#text} at (0,0) size 0x0

Line 0 LayoutTests/platform/mac/fast/images/imagemap-focus-ring-outline-color-not-inherited-from-map-expected.checksum_sec1
- LayoutTests/platform/mac/fast/images/imagemap-focus-ring-outline-color-not-inherited-from-map-expected.checksum +1 lines
		1	c6c9e1e279354d77e34722d88dd09e13



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 784x54
        RenderText {#text} at (0,0) size 770x36
          text run at (0,0) width 770: "Assuming the port-specific theme draws focus rings, this test can be used to ensure that the focus ring color is not inherited"
          text run at (0,18) width 207: "for an <area> (by default) as per "
        RenderInline {A} at (0,0) size 467x18 [color=#0000EE]
          RenderText {#text} at (207,18) size 467x18
            text run at (207,18) width 467: "section 18.4 \"Dynamic outlines: the 'outline' property\" of the CSS2.1 spec"
        RenderText {#text} at (674,18) size 735x36
          text run at (674,18) width 61: ". This test"
          text run at (0,36) width 567: "FAILED if a red-colored focus ring is drawn around the <area> in the imagemap (below)."
      RenderBlock (anonymous) at (0,70) size 784x128
        RenderInline {MAP} at (0,0) size 0x0
          RenderText {#text} at (0,0) size 0x0
          RenderText {#text} at (0,0) size 0x0
        RenderText {#text} at (0,0) size 0x0
        RenderImage {IMG} at (0,0) size 128x128
        RenderText {#text} at (0,0) size 0x0

Line 6 LayoutTests/platform/mac/fast/images/imagemap-focus-ring-outline-color-expected.png_sec1
- LayoutTests/platform/mac/fast/images/imagemap-focus-ring-outline-color-expected.png +4 lines
	5	v0Ru5ypGe5klFNoqX+6bL3xjW/sLnKRi3Rf+MIXuj/+4z8+TdJlw92VYKO7xS1u0R/FLj9W/Rmh
	6	c5+45GFaBiGU4NpnwzZKGYDMx2G8mXhTvsNfynfXNvMlWeubgmw0oVtyDflSdA6BHoZP/5uWt58
	7	d41MMeC87FWnmPBRBnOWAK7rv8/9EM/1N8m+4ylojYECJxeBHbdhp1e6qmcZzyB5s+ApElze9Lc
	8	cytD+nikIMlOaiRId0V06U024YsmwlM0qV1GMblzripwzBdXtflPS3ruuVhnPaq93Pl28RvWbpJ

Line 48 LayoutTests/platform/mac/fast/images/imagemap-focus-ring-outline-color-explicitly-inherited-from-map-expected.png_sec1
- LayoutTests/platform/mac/fast/images/imagemap-focus-ring-outline-color-explicitly-inherited-from-map-expected.png +2 lines
	5	Bp1jj607CnzU/0n0ur3hyhz3GklpijjLW5xi/3OKuQv9v1v1X4zlWY/jVi3hlM3pG5Z3WL+OKs7
	6	QnE8T6mqGPULwIREwECBAgQIECAAIEiAulo/+T0jW98o73nPe/Znv/858/zpR3/NgUd7SUucYn2
Line 10 LayoutTests/platform/mac/fast/images/imagemap-focus-ring-outline-color-explicitly-inherited-from-map-expected.png_sec2
Line 8 LayoutTests/platform/mac/fast/images/imagemap-focus-ring-outline-color-explicitly-inherited-from-map-expected.png_sec3

Return to Bug 49888

Lines 357-364 void RenderImage::paintFocusRing(PaintIn WebCore/rendering/RenderImage.cpp_sec1
- WebCore/rendering/RenderImage.cpp -2 / +3 lines
357	HTMLAreaElement* areaElement = static_cast<HTMLAreaElement*>(areas->item(k));	357	HTMLAreaElement* areaElement = static_cast<HTMLAreaElement*>(areas->item(k));
358	if (focusedNode != areaElement)	358	if (focusedNode != areaElement)
359	continue;	359	continue;
360		360
361	paintInfo.context->drawFocusRing(areaElement->getPath(this), style->outlineWidth(), style->outlineOffset(), style->visitedDependentColor(CSSPropertyOutlineColor));	361	RenderStyle* styleToUse = areaElement->computedStyle();
		362	paintInfo.context->drawFocusRing(areaElement->getPath(this), styleToUse->outlineWidth(), styleToUse->outlineOffset(), styleToUse->visitedDependentColor(CSSPropertyOutlineColor));
362	break;	363	break;
363	}	364	}
364	}	365	}

Lines 1-3 WebCore/ChangeLog_sec1
- WebCore/ChangeLog +24 lines
		1	2010-11-30 Daniel Bates <dbates@rim.com>
		2
		3	Reviewed by NOBODY (OOPS!).
		4
		5	Focused <area> should use CSS properties of <area> instead of associated <img>
		6	https://bugs.webkit.org/show_bug.cgi?id=49888
		7
		8	Fixes an issue where the CSS properties of an <area> were not used when
		9	the <area> was focused.
		10
		11	Currently, when focusing an <area> (say by pressing option + tab in Mac
		12	Safari) we use the CSS style information for the <img> associated with
		13	the <area>. Instead, we should use the CSS style information for the
		14	focused <area>. In particular, this will make the us honor the outline-
		15	color property of a focused <area> when drawing its focus ring.
		16
		17	Tests: fast/images/imagemap-focus-ring-outline-color-explicitly-inherited-from-map.html
		18	fast/images/imagemap-focus-ring-outline-color-not-inherited-from-map.html
		19	fast/images/imagemap-focus-ring-outline-color.html
		20
		21	* rendering/RenderImage.cpp:
		22	(WebCore::RenderImage::paintFocusRing): Use the style information of
		23	the focused <area> when drawing the focus ring for it.
		24
1	2010-11-30 Mario Sanchez Prada <msanchez@igalia.com>	25	2010-11-30 Mario Sanchez Prada <msanchez@igalia.com>
2		26
3	Reviewed by Chris Fleizach.	27	Reviewed by Chris Fleizach.

Lines 1-3 LayoutTests/ChangeLog_sec1
- LayoutTests/ChangeLog +30 lines
		1	2010-11-30 Daniel Bates <dbates@rim.com>
		2
		3	Reviewed by NOBODY (OOPS!).
		4
		5	Focused <area> should use CSS properties of <area> instead of associated <img>
		6	https://bugs.webkit.org/show_bug.cgi?id=49888
		7
		8	Updated the test result for test fast/images/imagemap-focus-ring.html. Added
		9	test to verify that the color of the focus ring for a focused <area> is
		10	the outline-color specified by the :focus pseudo-class .
		11
		12	Also, added tests to ensure that outline-color is not inherited (by default) as per
		13	section 18.4 of the CSS 2.1 spec <http://www.w3.org/TR/CSS2/ui.html#dynamic-outlines>,
		14	unless explicitly inherited.
		15
		16	* fast/images/imagemap-focus-ring-outline-color-explicitly-inherited-from-map.html: Added.
		17	* fast/images/imagemap-focus-ring-outline-color-not-inherited-from-map.html: Added.
		18	* fast/images/imagemap-focus-ring-outline-color.html: Added.
		19	* platform/mac/fast/images/imagemap-focus-ring-expected.checksum: Updated result.
		20	* platform/mac/fast/images/imagemap-focus-ring-expected.png: Ditto.
		21	* platform/mac/fast/images/imagemap-focus-ring-outline-color-expected.checksum: Added.
		22	* platform/mac/fast/images/imagemap-focus-ring-outline-color-expected.png: Added.
		23	* platform/mac/fast/images/imagemap-focus-ring-outline-color-expected.txt: Added.
		24	* platform/mac/fast/images/imagemap-focus-ring-outline-color-explicitly-inherited-from-map-expected.checksum: Added.
		25	* platform/mac/fast/images/imagemap-focus-ring-outline-color-explicitly-inherited-from-map-expected.png: Added.
		26	* platform/mac/fast/images/imagemap-focus-ring-outline-color-explicitly-inherited-from-map-expected.txt: Added.
		27	* platform/mac/fast/images/imagemap-focus-ring-outline-color-not-inherited-from-map-expected.checksum: Added.
		28	* platform/mac/fast/images/imagemap-focus-ring-outline-color-not-inherited-from-map-expected.png: Added.
		29	* platform/mac/fast/images/imagemap-focus-ring-outline-color-not-inherited-from-map-expected.txt: Added.
		30
1	2010-11-30 Ojan Vafai <ojan@chromium.org>	31	2010-11-30 Ojan Vafai <ojan@chromium.org>
2		32
3	[chromium] Update expectations to de-orange the builders.	33	[chromium] Update expectations to de-orange the builders.

Line 0 LayoutTests/fast/images/imagemap-focus-ring-outline-color-explicitly-inherited-from-map.html_sec1
- LayoutTests/fast/images/imagemap-focus-ring-outline-color-explicitly-inherited-from-map.html +23 lines
	1	<html>
	2	<head>
	3	<style>
	4	map { outline-color: green; }
	5	area:focus { outline-color: inherit; }
	6	</style>
	7	<script>
	8	window.onload = function()
	9	{
	10	document.getElementById("area").focus();
	11	}
	12	</script>
	13	</head>
	14	<body>
	15	<p>Assuming the port-specific theme draws focus rings, this test can be used to ensure that the focus ring color for an <area> can be explicitly inherited from <map>. This test PASSED if a green-colored focus ring is drawn around the <area> in the imagemap (below).</p>
	16	<map name="imagemap">
	17	<area id="area" shape="rect" coords="0,0,128,128" href="#dummy"/>
	18	</map>
	19	<img src="imagemap.jpg" width="128" height="128" usemap="#imagemap" />
	20	</body>
	21	</head>
	22	</html>
	23

Line 0 LayoutTests/platform/mac/fast/images/imagemap-focus-ring-outline-color-expected.txt_sec1
- LayoutTests/platform/mac/fast/images/imagemap-focus-ring-outline-color-expected.txt +16 lines
	1	layer at (0,0) size 800x600
	2	RenderView at (0,0) size 800x600
	3	layer at (0,0) size 800x600
	4	RenderBlock {HTML} at (0,0) size 800x600
	5	RenderBody {BODY} at (8,8) size 784x584
	6	RenderBlock {P} at (0,0) size 784x36
	7	RenderText {#text} at (0,0) size 776x36
	8	text run at (0,0) width 776: "Assuming the port-specific theme draws focus rings, this test can be used to ensure that a focus ring is drawn for an <area>."
	9	text run at (0,18) width 642: "This test PASSED if a green-colored focus ring is drawn around the <area> in the imagemap (below)."
	10	RenderBlock (anonymous) at (0,52) size 784x128
	11	RenderInline {MAP} at (0,0) size 0x0
	12	RenderText {#text} at (0,0) size 0x0
	13	RenderText {#text} at (0,0) size 0x0
	14	RenderText {#text} at (0,0) size 0x0
	15	RenderImage {IMG} at (0,0) size 128x128
	16	RenderText {#text} at (0,0) size 0x0