Commit 550a18c6 authored by commit-queue@webkit.org's avatar commit-queue@webkit.org
Browse files

2011-05-12 Ben Wells <benwells@chromium.org>

        Reviewed by Simon Fraser.

        RGBA colors in outlines show overpainting at the corners
        https://bugs.webkit.org/show_bug.cgi?id=58999

        * fast/borders/outline-alpha-block.html: Added.
        * fast/borders/outline-alpha-inline.html: Added.
        * platform/chromium/test_expectations.txt:
        * platform/mac/fast/borders/outline-alpha-block-expected.png: Added.
        * platform/mac/fast/borders/outline-alpha-block-expected.txt: Added.
        * platform/mac/fast/borders/outline-alpha-inline-expected.png: Added.
        * platform/mac/fast/borders/outline-alpha-inline-expected.txt: Added.
        * platform/mac/fast/box-shadow/box-shadow-radius-expected.png: Rebaselined as this test had rgba outlines.
        * platform/mac/fast/layers/self-painting-outline-expected.png: Rebaselined as this test had rgba outlines.
2011-05-12  Ben Wells  <benwells@chromium.org>

        Reviewed by Simon Fraser.

        RGBA colors in outlines show overpainting at the corners
        https://bugs.webkit.org/show_bug.cgi?id=58999

        Tests: fast/borders/outline-alpha-block.html
               fast/borders/outline-alpha-inline.html

        Updated baseline images for tests with rgba outlines:
               fast/box-shadow/box-shadow-radius.html
               fast/layers/self-painting-outline.html

         * rendering/RenderInline.cpp:
        (WebCore::RenderInline::paintOutline):
        (WebCore::RenderInline::paintOutlineForLine):
        * rendering/RenderInline.h:
        * rendering/RenderObject.cpp:
        (WebCore::RenderObject::paintOutline):

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@86314 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent aa3fc337
2011-05-12 Ben Wells <benwells@chromium.org>
Reviewed by Simon Fraser.
RGBA colors in outlines show overpainting at the corners
https://bugs.webkit.org/show_bug.cgi?id=58999
* fast/borders/outline-alpha-block.html: Added.
* fast/borders/outline-alpha-inline.html: Added.
* platform/chromium/test_expectations.txt:
* platform/mac/fast/borders/outline-alpha-block-expected.png: Added.
* platform/mac/fast/borders/outline-alpha-block-expected.txt: Added.
* platform/mac/fast/borders/outline-alpha-inline-expected.png: Added.
* platform/mac/fast/borders/outline-alpha-inline-expected.txt: Added.
* platform/mac/fast/box-shadow/box-shadow-radius-expected.png: Rebaselined as this test had rgba outlines.
* platform/mac/fast/layers/self-painting-outline-expected.png: Rebaselined as this test had rgba outlines.
2011-05-11 Srinivasulu Chereddy <Srinivasulu.Chereddy@nokia.com>
 
Reviewed by Eric Seidel.
<!DOCTYPE html>
<style>
div {
margin: 2px 20px 10px 20px;
padding: 2px 10px;
outline-width: 8px;
outline-color: rgba(0, 0, 255, 0.3);
display: inline-block;
}
div.solid {
outline-style: solid;
}
div.auto {
outline-style: auto;
}
div.dotted {
outline-style: dotted;
}
div.dashed {
outline-style: dashed;
}
div.double {
outline-style: double;
}
div.ridge {
outline-style: ridge;
}
div.groove {
outline-style: groove;
}
div.inset {
outline-style: inset;
}
div.outset {
outline-style: outset;
}
</style>
The outlines should be a consistent color all the way around the outline. There should be no dark pixels or blocks at corners.<br><br>
<div class="solid"></div>
<div class="solid"></div>
<div class="solid"></div>
<div class="solid"></div>
<div class="solid"></div>
<div class="solid"></div>
<div class="solid"></div>
<div class="solid"></div>
solid<br><br>
<div class="double"></div>
<div class="double"></div>
<div class="double"></div>
<div class="double"></div>
<div class="double"></div>
<div class="double"></div>
<div class="double"></div>
<div class="double"></div>
double<br><br>
<div class="dotted"></div>
<div class="dotted"></div>
<div class="dotted"></div>
<div class="dotted"></div>
<div class="dotted"></div>
<div class="dotted"></div>
<div class="dotted"></div>
<div class="dotted"></div>
dotted<br><br>
<div class="dashed"></div>
<div class="dashed"></div>
<div class="dashed"></div>
<div class="dashed"></div>
<div class="dashed"></div>
<div class="dashed"></div>
<div class="dashed"></div>
<div class="dashed"></div>
dashed<br><br>
<div class="ridge"></div>
<div class="ridge"></div>
<div class="ridge"></div>
<div class="ridge"></div>
<div class="ridge"></div>
<div class="ridge"></div>
<div class="ridge"></div>
<div class="ridge"></div>
ridge<br><br>
<div class="groove"></div>
<div class="groove"></div>
<div class="groove"></div>
<div class="groove"></div>
<div class="groove"></div>
<div class="groove"></div>
<div class="groove"></div>
<div class="groove"></div>
groove<br><br>
<div class="inset"></div>
<div class="inset"></div>
<div class="inset"></div>
<div class="inset"></div>
<div class="inset"></div>
<div class="inset"></div>
<div class="inset"></div>
<div class="inset"></div>
inset<br><br>
<div class="outset"></div>
<div class="outset"></div>
<div class="outset"></div>
<div class="outset"></div>
<div class="outset"></div>
<div class="outset"></div>
<div class="outset"></div>
<div class="outset"></div>
outset
<!DOCTYPE html>
<style>
div {
margin: 20px;
display: inline-block;
width: 100px;
}
span {
outline-width: 20px;
outline-color: rgba(0, 0, 255, 0.3);
}
span.solid {
outline-style: solid;
}
span.auto {
outline-style: auto;
}
span.dotted {
outline-style: dotted;
}
span.dashed {
outline-style: dashed;
}
span.double {
outline-style: double;
}
span.ridge {
outline-style: ridge;
}
span.groove {
outline-style: groove;
}
span.inset {
outline-style: inset;
}
span.outset {
outline-style: outset;
}
</style>
The outlines should be a consistent color all the way around the outline. There should be no dark pixels or blocks at corners or between lines.<br><br>
<div>
<span class="solid">Text spanning more than one line.</span>
</div>
solid
<div>
<span class="double">Text spanning more than one line.</span>
</div>
double<br><br>
<div>
<span class="dotted">Text spanning more than one line.</span>
</div>
dotted
<div>
<span class="dashed">Text spanning more than one line.</span>
</div>
dashed<br><br>
<div>
<span class="ridge">Text spanning more than one line.</span>
</div>
ridge
<div>
<span class="groove">Text spanning more than one line.</span>
</div>
groove<br><br>
<div>
<span class="inset">Text spanning more than one line.</span>
</div>
inset
<div>
<span class="outset">Text spanning more than one line.</span>
</div>
outset
......@@ -4027,3 +4027,7 @@ BUGWK60387 : fast/dom/MediaStream/argument-types.html = FAIL
BUGCR82281 : fast/xpath/xpath-iterator-result-should-mark-its-nodeset.html = TEXT
BUGCR82281 : fast/xpath/xpath-other-nodeset-result-should-mark-its-nodeset.html = TEXT
BUGCR82281 : fast/xpath/xpath-snapshot-result-should-mark-its-nodeset.html = TEXT
// New pixel tests added for bug 58999, rebaseline when webkit 58999 rolls.
BUGWK58999 WIN LINUX : fast/borders/outline-alpha-block.html = IMAGE+TEXT
BUGWK58999 WIN LINUX : fast/borders/outline-alpha-inline.html = IMAGE+TEXT
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x338
RenderBlock {HTML} at (0,0) size 800x338
RenderBody {BODY} at (8,8) size 784x322
RenderText {#text} at (0,0) size 781x18
text run at (0,0) width 781: "The outlines should be a consistent color all the way around the outline. There should be no dark pixels or blocks at corners."
RenderBR {BR} at (781,0) size 0x18
RenderBR {BR} at (0,18) size 0x18
RenderBlock {DIV} at (20,38) size 20x4
RenderText {#text} at (60,38) size 4x18
text run at (60,38) width 4: " "
RenderBlock {DIV} at (84,38) size 20x4
RenderText {#text} at (124,38) size 4x18
text run at (124,38) width 4: " "
RenderBlock {DIV} at (148,38) size 20x4
RenderText {#text} at (188,38) size 4x18
text run at (188,38) width 4: " "
RenderBlock {DIV} at (212,38) size 20x4
RenderText {#text} at (252,38) size 4x18
text run at (252,38) width 4: " "
RenderBlock {DIV} at (276,38) size 20x4
RenderText {#text} at (316,38) size 4x18
text run at (316,38) width 4: " "
RenderBlock {DIV} at (340,38) size 20x4
RenderText {#text} at (380,38) size 4x18
text run at (380,38) width 4: " "
RenderBlock {DIV} at (404,38) size 20x4
RenderText {#text} at (444,38) size 4x18
text run at (444,38) width 4: " "
RenderBlock {DIV} at (468,38) size 20x4
RenderText {#text} at (508,38) size 34x18
text run at (508,38) width 34: " solid"
RenderBR {BR} at (542,38) size 0x18
RenderBR {BR} at (0,56) size 0x18
RenderBlock {DIV} at (20,76) size 20x4
RenderText {#text} at (60,76) size 4x18
text run at (60,76) width 4: " "
RenderBlock {DIV} at (84,76) size 20x4
RenderText {#text} at (124,76) size 4x18
text run at (124,76) width 4: " "
RenderBlock {DIV} at (148,76) size 20x4
RenderText {#text} at (188,76) size 4x18
text run at (188,76) width 4: " "
RenderBlock {DIV} at (212,76) size 20x4
RenderText {#text} at (252,76) size 4x18
text run at (252,76) width 4: " "
RenderBlock {DIV} at (276,76) size 20x4
RenderText {#text} at (316,76) size 4x18
text run at (316,76) width 4: " "
RenderBlock {DIV} at (340,76) size 20x4
RenderText {#text} at (380,76) size 4x18
text run at (380,76) width 4: " "
RenderBlock {DIV} at (404,76) size 20x4
RenderText {#text} at (444,76) size 4x18
text run at (444,76) width 4: " "
RenderBlock {DIV} at (468,76) size 20x4
RenderText {#text} at (508,76) size 47x18
text run at (508,76) width 47: " double"
RenderBR {BR} at (555,76) size 0x18
RenderBR {BR} at (0,94) size 0x18
RenderBlock {DIV} at (20,114) size 20x4
RenderText {#text} at (60,114) size 4x18
text run at (60,114) width 4: " "
RenderBlock {DIV} at (84,114) size 20x4
RenderText {#text} at (124,114) size 4x18
text run at (124,114) width 4: " "
RenderBlock {DIV} at (148,114) size 20x4
RenderText {#text} at (188,114) size 4x18
text run at (188,114) width 4: " "
RenderBlock {DIV} at (212,114) size 20x4
RenderText {#text} at (252,114) size 4x18
text run at (252,114) width 4: " "
RenderBlock {DIV} at (276,114) size 20x4
RenderText {#text} at (316,114) size 4x18
text run at (316,114) width 4: " "
RenderBlock {DIV} at (340,114) size 20x4
RenderText {#text} at (380,114) size 4x18
text run at (380,114) width 4: " "
RenderBlock {DIV} at (404,114) size 20x4
RenderText {#text} at (444,114) size 4x18
text run at (444,114) width 4: " "
RenderBlock {DIV} at (468,114) size 20x4
RenderText {#text} at (508,114) size 43x18
text run at (508,114) width 43: " dotted"
RenderBR {BR} at (551,114) size 0x18
RenderBR {BR} at (0,132) size 0x18
RenderBlock {DIV} at (20,152) size 20x4
RenderText {#text} at (60,152) size 4x18
text run at (60,152) width 4: " "
RenderBlock {DIV} at (84,152) size 20x4
RenderText {#text} at (124,152) size 4x18
text run at (124,152) width 4: " "
RenderBlock {DIV} at (148,152) size 20x4
RenderText {#text} at (188,152) size 4x18
text run at (188,152) width 4: " "
RenderBlock {DIV} at (212,152) size 20x4
RenderText {#text} at (252,152) size 4x18
text run at (252,152) width 4: " "
RenderBlock {DIV} at (276,152) size 20x4
RenderText {#text} at (316,152) size 4x18
text run at (316,152) width 4: " "
RenderBlock {DIV} at (340,152) size 20x4
RenderText {#text} at (380,152) size 4x18
text run at (380,152) width 4: " "
RenderBlock {DIV} at (404,152) size 20x4
RenderText {#text} at (444,152) size 4x18
text run at (444,152) width 4: " "
RenderBlock {DIV} at (468,152) size 20x4
RenderText {#text} at (508,152) size 48x18
text run at (508,152) width 48: " dashed"
RenderBR {BR} at (556,152) size 0x18
RenderBR {BR} at (0,170) size 0x18
RenderBlock {DIV} at (20,190) size 20x4
RenderText {#text} at (60,190) size 4x18
text run at (60,190) width 4: " "
RenderBlock {DIV} at (84,190) size 20x4
RenderText {#text} at (124,190) size 4x18
text run at (124,190) width 4: " "
RenderBlock {DIV} at (148,190) size 20x4
RenderText {#text} at (188,190) size 4x18
text run at (188,190) width 4: " "
RenderBlock {DIV} at (212,190) size 20x4
RenderText {#text} at (252,190) size 4x18
text run at (252,190) width 4: " "
RenderBlock {DIV} at (276,190) size 20x4
RenderText {#text} at (316,190) size 4x18
text run at (316,190) width 4: " "
RenderBlock {DIV} at (340,190) size 20x4
RenderText {#text} at (380,190) size 4x18
text run at (380,190) width 4: " "
RenderBlock {DIV} at (404,190) size 20x4
RenderText {#text} at (444,190) size 4x18
text run at (444,190) width 4: " "
RenderBlock {DIV} at (468,190) size 20x4
RenderText {#text} at (508,190) size 36x18
text run at (508,190) width 36: " ridge"
RenderBR {BR} at (544,190) size 0x18
RenderBR {BR} at (0,208) size 0x18
RenderBlock {DIV} at (20,228) size 20x4
RenderText {#text} at (60,228) size 4x18
text run at (60,228) width 4: " "
RenderBlock {DIV} at (84,228) size 20x4
RenderText {#text} at (124,228) size 4x18
text run at (124,228) width 4: " "
RenderBlock {DIV} at (148,228) size 20x4
RenderText {#text} at (188,228) size 4x18
text run at (188,228) width 4: " "
RenderBlock {DIV} at (212,228) size 20x4
RenderText {#text} at (252,228) size 4x18
text run at (252,228) width 4: " "
RenderBlock {DIV} at (276,228) size 20x4
RenderText {#text} at (316,228) size 4x18
text run at (316,228) width 4: " "
RenderBlock {DIV} at (340,228) size 20x4
RenderText {#text} at (380,228) size 4x18
text run at (380,228) width 4: " "
RenderBlock {DIV} at (404,228) size 20x4
RenderText {#text} at (444,228) size 4x18
text run at (444,228) width 4: " "
RenderBlock {DIV} at (468,228) size 20x4
RenderText {#text} at (508,228) size 48x18
text run at (508,228) width 48: " groove"
RenderBR {BR} at (556,228) size 0x18
RenderBR {BR} at (0,246) size 0x18
RenderBlock {DIV} at (20,266) size 20x4
RenderText {#text} at (60,266) size 4x18
text run at (60,266) width 4: " "
RenderBlock {DIV} at (84,266) size 20x4
RenderText {#text} at (124,266) size 4x18
text run at (124,266) width 4: " "
RenderBlock {DIV} at (148,266) size 20x4
RenderText {#text} at (188,266) size 4x18
text run at (188,266) width 4: " "
RenderBlock {DIV} at (212,266) size 20x4
RenderText {#text} at (252,266) size 4x18
text run at (252,266) width 4: " "
RenderBlock {DIV} at (276,266) size 20x4
RenderText {#text} at (316,266) size 4x18
text run at (316,266) width 4: " "
RenderBlock {DIV} at (340,266) size 20x4
RenderText {#text} at (380,266) size 4x18
text run at (380,266) width 4: " "
RenderBlock {DIV} at (404,266) size 20x4
RenderText {#text} at (444,266) size 4x18
text run at (444,266) width 4: " "
RenderBlock {DIV} at (468,266) size 20x4
RenderText {#text} at (508,266) size 33x18
text run at (508,266) width 33: " inset"
RenderBR {BR} at (541,266) size 0x18
RenderBR {BR} at (0,284) size 0x18
RenderBlock {DIV} at (20,304) size 20x4
RenderText {#text} at (60,304) size 4x18
text run at (60,304) width 4: " "
RenderBlock {DIV} at (84,304) size 20x4
RenderText {#text} at (124,304) size 4x18
text run at (124,304) width 4: " "
RenderBlock {DIV} at (148,304) size 20x4
RenderText {#text} at (188,304) size 4x18
text run at (188,304) width 4: " "
RenderBlock {DIV} at (212,304) size 20x4
RenderText {#text} at (252,304) size 4x18
text run at (252,304) width 4: " "
RenderBlock {DIV} at (276,304) size 20x4
RenderText {#text} at (316,304) size 4x18
text run at (316,304) width 4: " "
RenderBlock {DIV} at (340,304) size 20x4
RenderText {#text} at (380,304) size 4x18
text run at (380,304) width 4: " "
RenderBlock {DIV} at (404,304) size 20x4
RenderText {#text} at (444,304) size 4x18
text run at (444,304) width 4: " "
RenderBlock {DIV} at (468,304) size 20x4
RenderText {#text} at (508,304) size 41x18
text run at (508,304) width 41: " outset"
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x500
RenderBlock {HTML} at (0,0) size 800x500
RenderBody {BODY} at (8,8) size 784x484
RenderText {#text} at (0,0) size 777x36
text run at (0,0) width 777: "The outlines should be a consistent color all the way around the outline. There should be no dark pixels or blocks at corners"
text run at (0,18) width 107: "or between lines."
RenderBR {BR} at (107,18) size 0x18
RenderBR {BR} at (0,36) size 0x18
RenderBlock {DIV} at (20,74) size 100x54
RenderInline {SPAN} at (0,0) size 90x54
RenderText {#text} at (0,0) size 90x54
text run at (0,0) width 90: "Text spanning"
text run at (0,18) width 90: "more than one"
text run at (0,36) width 27: "line."
RenderText {#text} at (0,0) size 0x0
RenderText {#text} at (140,110) size 38x18
text run at (140,110) width 38: " solid "
RenderBlock {DIV} at (198,74) size 100x54
RenderInline {SPAN} at (0,0) size 90x54
RenderText {#text} at (0,0) size 90x54
text run at (0,0) width 90: "Text spanning"
text run at (0,18) width 90: "more than one"
text run at (0,36) width 27: "line."
RenderText {#text} at (0,0) size 0x0
RenderText {#text} at (318,110) size 47x18
text run at (318,110) width 47: " double"
RenderBR {BR} at (365,110) size 0x18
RenderBR {BR} at (0,148) size 0x18
RenderBlock {DIV} at (20,186) size 100x54
RenderInline {SPAN} at (0,0) size 90x54
RenderText {#text} at (0,0) size 90x54
text run at (0,0) width 90: "Text spanning"
text run at (0,18) width 90: "more than one"
text run at (0,36) width 27: "line."
RenderText {#text} at (0,0) size 0x0
RenderText {#text} at (140,222) size 47x18
text run at (140,222) width 47: " dotted "
RenderBlock {DIV} at (207,186) size 100x54
RenderInline {SPAN} at (0,0) size 90x54
RenderText {#text} at (0,0) size 90x54
text run at (0,0) width 90: "Text spanning"
text run at (0,18) width 90: "more than one"
text run at (0,36) width 27: "line."
RenderText {#text} at (0,0) size 0x0
RenderText {#text} at (327,222) size 48x18
text run at (327,222) width 48: " dashed"
RenderBR {BR} at (375,222) size 0x18
RenderBR {BR} at (0,260) size 0x18
RenderBlock {DIV} at (20,298) size 100x54
RenderInline {SPAN} at (0,0) size 90x54
RenderText {#text} at (0,0) size 90x54
text run at (0,0) width 90: "Text spanning"
text run at (0,18) width 90: "more than one"
text run at (0,36) width 27: "line."
RenderText {#text} at (0,0) size 0x0
RenderText {#text} at (140,334) size 40x18
text run at (140,334) width 40: " ridge "
RenderBlock {DIV} at (200,298) size 100x54
RenderInline {SPAN} at (0,0) size 90x54
RenderText {#text} at (0,0) size 90x54
text run at (0,0) width 90: "Text spanning"
text run at (0,18) width 90: "more than one"
text run at (0,36) width 27: "line."
RenderText {#text} at (0,0) size 0x0
RenderText {#text} at (320,334) size 48x18
text run at (320,334) width 48: " groove"
RenderBR {BR} at (368,334) size 0x18
RenderBR {BR} at (0,372) size 0x18
RenderBlock {DIV} at (20,410) size 100x54
RenderInline {SPAN} at (0,0) size 90x54
RenderText {#text} at (0,0) size 90x54
text run at (0,0) width 90: "Text spanning"
text run at (0,18) width 90: "more than one"
text run at (0,36) width 27: "line."
RenderText {#text} at (0,0) size 0x0
RenderText {#text} at (140,446) size 37x18
text run at (140,446) width 37: " inset "
RenderBlock {DIV} at (197,410) size 100x54
RenderInline {SPAN} at (0,0) size 90x54
RenderText {#text} at (0,0) size 90x54
text run at (0,0) width 90: "Text spanning"
text run at (0,18) width 90: "more than one"
text run at (0,36) width 27: "line."
RenderText {#text} at (0,0) size 0x0
RenderText {#text} at (317,446) size 41x18
text run at (317,446) width 41: " outset"
2011-05-12 Ben Wells <benwells@chromium.org>
Reviewed by Simon Fraser.
RGBA colors in outlines show overpainting at the corners
https://bugs.webkit.org/show_bug.cgi?id=58999
Tests: fast/borders/outline-alpha-block.html
fast/borders/outline-alpha-inline.html
Updated baseline images for tests with rgba outlines:
fast/box-shadow/box-shadow-radius.html
fast/layers/self-painting-outline.html
* rendering/RenderInline.cpp:
(WebCore::RenderInline::paintOutline):
(WebCore::RenderInline::paintOutlineForLine):
* rendering/RenderInline.h:
* rendering/RenderObject.cpp:
(WebCore::RenderObject::paintOutline):
2011-05-11 Levi Weintraub <leviw@chromium.org>
 
Reviewed by Eric Seidel.
......@@ -1397,17 +1397,31 @@ void RenderInline::paintOutline(GraphicsContext* graphicsContext, int tx, int ty
}
rects.append(IntRect());
Color outlineColor = styleToUse->visitedDependentColor(CSSPropertyOutlineColor);
#if !USE(SKIA)
bool useTransparencyLayer = outlineColor.hasAlpha();
if (useTransparencyLayer) {
graphicsContext->beginTransparencyLayer(static_cast<float>(outlineColor.alpha()) / 255);
outlineColor = Color(outlineColor.red(), outlineColor.green(), outlineColor.blue());
}
#endif