Skip to content

Commit 5b68e76

Browse files
smfrsmfr
committed
2011-04-15 Simon Fraser <simon.fraser@apple.com>
 Reviewed by Beth Dakin. Some borders with border-radius do not have rounded inner edges https://bugs.webkit.org/show_bug.cgi?id=58457 Improve the logic used to compute the inner radii on curved borders, to maintain borders of even thickness around the curve. Tests: fast/borders/mixed-border-styles-radius.html fast/borders/mixed-border-styles.html * rendering/RenderBoxModelObject.h: * rendering/RenderBoxModelObject.cpp: (WebCore::RenderBoxModelObject::computeBorderOuterRect): (WebCore::RenderBoxModelObject::computeBorderInnerRect): Two new utility functions to share some code that was in both paintBorder() and paintBoxShaadow(). getRoundedInnerBorderWithBorderWidths() now takes the outer border box as well as the inner box. (WebCore::RenderBoxModelObject::paintBorder): Call new methods. (WebCore::RenderBoxModelObject::paintBoxShadow): Ditto. * rendering/RenderObject.cpp: (WebCore::RenderObject::drawBoxSideFromPath): getRoundedInnerBorderWithBorderWidths() now takes the outer border box as well as the inner box. * rendering/style/RenderStyle.cpp: (WebCore::RenderStyle::getRoundedInnerBorderWithBorderWidths): * rendering/style/RenderStyle.h: Compute the inner radii by starting with teh radii used for the outer box, and then shrinking them down based on the border thickness. Canonical link: https://commits.webkit.org/73751@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@83998 268f45cc-cd09-0410-ab3c-d52691b4dbfc
1 parent 764b987 commit 5b68e76

21 files changed

Lines changed: 357 additions & 45 deletions

‎LayoutTests/ChangeLog‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,29 @@
1+
2011-04-15 Simon Fraser <simon.fraser@apple.com>
2+
3+
Reviewed by Beth Dakin.
4+
5+
Some borders with border-radius do not have rounded inner edges
6+
https://bugs.webkit.org/show_bug.cgi?id=58457
7+
8+
Pixel tests for various combinations of border styles and radii.
9+
Update pixel results for affected tests.
10+
11+
12+
* fast/borders/mixed-border-styles-radius.html: Added.
13+
* fast/borders/mixed-border-styles-radius2.html: Added.
14+
* fast/borders/mixed-border-styles.html: Added.
15+
* platform/mac/fast/borders/border-radius-constraints-expected.checksum:
16+
* platform/mac/fast/borders/border-radius-constraints-expected.png:
17+
* platform/mac/fast/borders/mixed-border-styles-expected.checksum: Added.
18+
* platform/mac/fast/borders/mixed-border-styles-expected.png: Added.
19+
* platform/mac/fast/borders/mixed-border-styles-expected.txt: Added.
20+
* platform/mac/fast/borders/mixed-border-styles-radius-expected.checksum: Added.
21+
* platform/mac/fast/borders/mixed-border-styles-radius-expected.png: Added.
22+
* platform/mac/fast/borders/mixed-border-styles-radius-expected.txt: Added.
23+
* platform/mac/fast/borders/mixed-border-styles-radius2-expected.checksum: Added.
24+
* platform/mac/fast/borders/mixed-border-styles-radius2-expected.png: Added.
25+
* platform/mac/fast/borders/mixed-border-styles-radius2-expected.txt: Added.
26+
127
2011-04-13 Xiaomei Ji <xji@chromium.org>
228

329
Reviewed by Ryosuke Niwa.

‎LayoutTests/fast/borders/mixed-border-styles-radius.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
<head>
5+
<style type="text/css">
6+
.box {
7+
display: inline-block;
8+
box-sizing: border-box;
9+
-moz-box-sizing: border-box;
10+
width: 150px;
11+
height: 150px;
12+
margin: 10px;
13+
border-width: 50px;
14+
border-color: rgba(0, 0, 0, 0.5);
15+
border-style: solid;
16+
border-radius:50%;
17+
}
18+
19+
.smaller {
20+
height: 102px;
21+
}
22+
</style>
23+
</head>
24+
<body>
25+
<!-- Test mixed border styles. -->
26+
<div class="box"></div>
27+
<div class="box" style="border-radius: 40%"></div>
28+
<div class="box" style="border-right-style: double"></div>
29+
<div class="box" style="border-right-style: double; border-right-width: 0;"></div>
30+
<br>
31+
<div class="box" style="border-right-color: transparent;"></div>
32+
<div class="box" style="border-right-color: transparent; border-right-width: 50px;"></div>
33+
<div class="box" style="border-right-color: transparent; border-right-width: 0;
34+
border-bottom-color: transparent;"></div>
35+
<div class="box" style="border-right-color: transparent; border-right-width: 0;
36+
border-bottom-color: transparent;border-bottom-width: 0"></div>
37+
<br>
38+
<div class="smaller box"></div>
39+
<div class="smaller box" style="border-right-style: double"></div>
40+
<div class="smaller box" style="border-right-color: transparent; border-right-width: 0;
41+
border-bottom-color: transparent;"></div>
42+
<div class="smaller box" style="border-radius: 60%"></div>
43+
44+
</body>
45+
</html>

‎LayoutTests/fast/borders/mixed-border-styles-radius2.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
<head>
5+
<style type="text/css">
6+
.box {
7+
display: inline-block;
8+
box-sizing: border-box;
9+
-moz-box-sizing: border-box;
10+
width: 150px;
11+
height: 150px;
12+
margin: 20px;
13+
border-width: 50px;
14+
border-color: rgba(0, 0, 0, 0.5);
15+
border-style: solid;
16+
border-radius:20%;
17+
}
18+
</style>
19+
</head>
20+
<body>
21+
<!-- Test mixed border styles. -->
22+
<div class="box"></div>
23+
24+
<div class="box" style="border-right-style: double"></div>
25+
<div class="box" style="border-right-style: double; border-right-width: 0;"></div>
26+
<div class="box" style="border-right-color: transparent;"></div>
27+
28+
<div class="box" style="border-right-color: transparent; border-right-width: 50px;"></div>
29+
<div class="box" style="border-right-color: transparent; border-right-width: 0;
30+
border-bottom-color: transparent;"></div>
31+
<div class="box" style="border-right-color: transparent; border-right-width: 0;
32+
border-bottom-color: transparent;border-bottom-width: 0"></div>
33+
<div class="box" style="border-right-color: transparent; border-right-width: 0;
34+
border-bottom-style: groove;"></div>
35+
</body>
36+
</html>

‎LayoutTests/fast/borders/mixed-border-styles.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
<head>
5+
<style type="text/css">
6+
.box {
7+
display: inline-block;
8+
box-sizing: border-box;
9+
-moz-box-sizing: border-box;
10+
width: 150px;
11+
height: 150px;
12+
margin: 10px;
13+
border-width: 50px;
14+
border-color: rgba(0, 0, 0, 0.5);
15+
border-style: solid;
16+
outline: 4px solid blue;
17+
}
18+
</style>
19+
</head>
20+
<body>
21+
<!-- Test mixed border styles. -->
22+
<div class="box"></div>
23+
<div class="box" style="border-right-style: double"></div>
24+
<div class="box" style="border-right-style: double; border-right-width: 0;"></div>
25+
<div class="box" style="border-right-color: transparent;"></div>
26+
<br>
27+
<div class="box" style="border-right-color: transparent; border-right-width: 0;"></div>
28+
<div class="box" style="border-right-color: transparent; border-right-width: 0;
29+
border-bottom-color: transparent;"></div>
30+
<div class="box" style="border-right-color: transparent; border-right-width: 0;
31+
border-bottom-color: transparent;border-bottom-width: 0"></div>
32+
<div class="box" style="border-right-color: transparent; border-right-width: 0;
33+
border-bottom-style: groove;"></div>
34+
<br>
35+
<div class="box" style="border-right-style: double;
36+
border-bottom-style: double;"></div>
37+
<div class="box" style="border-right-color: transparent; border-right-width: 0;
38+
border-bottom-style: double;"></div>
39+
40+
<div class="box" style="border-right-color: rgba(0, 128, 0, 0.5)"></div>
41+
<div class="box" style="border-left-color: rgba(0, 128, 0, 0.5); border-right-color: rgba(0, 128, 0, 0.5)"></div>
42+
43+
</body>
44+
</html>

‎LayoutTests/platform/mac/fast/borders/border-radius-constraints-expected.checksum‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
56d905ab06cb1ffe52ce93e4dabdd61b
1+
9abcdbf69e8370d0e9b2e33d28ca1758

‎LayoutTests/platform/mac/fast/borders/border-radius-constraints-expected.png‎

151 Bytes
Loading

‎LayoutTests/platform/mac/fast/borders/mixed-border-styles-expected.checksum‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
42a0c2f9d815e8eb1772a78d647b673a

‎LayoutTests/platform/mac/fast/borders/mixed-border-styles-expected.png‎

15.2 KB
Loading

‎LayoutTests/platform/mac/fast/borders/mixed-border-styles-expected.txt‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
layer at (0,0) size 800x600
2+
RenderView at (0,0) size 800x600
3+
layer at (0,0) size 800x538
4+
RenderBlock {HTML} at (0,0) size 800x538
5+
RenderBody {BODY} at (8,8) size 784x522
6+
RenderBlock {DIV} at (10,10) size 150x150 [border: (50px solid #0000007F)]
7+
RenderText {#text} at (170,156) size 4x18
8+
text run at (170,156) width 4: " "
9+
RenderBlock {DIV} at (184,10) size 150x150 [border: (50px solid #0000007F) (50px double #0000007F) (50px solid #0000007F)]
10+
RenderText {#text} at (344,156) size 4x18
11+
text run at (344,156) width 4: " "
12+
RenderBlock {DIV} at (358,10) size 150x150 [border: (50px solid #0000007F) none (50px solid #0000007F)]
13+
RenderText {#text} at (518,156) size 4x18
14+
text run at (518,156) width 4: " "
15+
RenderBlock {DIV} at (532,10) size 150x150 [border: (50px solid #0000007F) (50px solid #00000000) (50px solid #0000007F)]
16+
RenderText {#text} at (692,156) size 4x18
17+
text run at (692,156) width 4: " "
18+
RenderBR {BR} at (0,0) size 0x0
19+
RenderBlock {DIV} at (10,184) size 150x150 [border: (50px solid #0000007F) none (50px solid #0000007F)]
20+
RenderText {#text} at (170,330) size 4x18
21+
text run at (170,330) width 4: " "
22+
RenderBlock {DIV} at (184,184) size 150x150 [border: (50px solid #0000007F) none (50px solid #00000000) (50px solid #0000007F)]
23+
RenderText {#text} at (344,330) size 4x18
24+
text run at (344,330) width 4: " "
25+
RenderBlock {DIV} at (358,184) size 150x150 [border: (50px solid #0000007F) none (50px solid #0000007F)]
26+
RenderText {#text} at (518,330) size 4x18
27+
text run at (518,330) width 4: " "
28+
RenderBlock {DIV} at (532,184) size 150x150 [border: (50px solid #0000007F) none (50px groove #0000007F) (50px solid #0000007F)]
29+
RenderText {#text} at (692,330) size 4x18
30+
text run at (692,330) width 4: " "
31+
RenderBR {BR} at (0,0) size 0x0
32+
RenderBlock {DIV} at (10,358) size 150x150 [border: (50px solid #0000007F) (50px double #0000007F) (50px solid #0000007F)]
33+
RenderText {#text} at (170,504) size 4x18
34+
text run at (170,504) width 4: " "
35+
RenderBlock {DIV} at (184,358) size 150x150 [border: (50px solid #0000007F) none (50px double #0000007F) (50px solid #0000007F)]
36+
RenderText {#text} at (344,504) size 4x18
37+
text run at (344,504) width 4: " "
38+
RenderBlock {DIV} at (358,358) size 150x150 [border: (50px solid #0000007F) (50px solid #0080007F) (50px solid #0000007F)]
39+
RenderText {#text} at (518,504) size 4x18
40+
text run at (518,504) width 4: " "
41+
RenderBlock {DIV} at (532,358) size 150x150 [border: (50px solid #0000007F) (50px solid #0080007F) (50px solid #0000007F) (50px solid #0080007F)]
42+
RenderText {#text} at (0,0) size 0x0

‎LayoutTests/platform/mac/fast/borders/mixed-border-styles-radius-expected.checksum‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
38a8c96547167b9ab8bde9f730291e48

0 commit comments

Comments
 (0)