Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-10-01 09:09:15 +01:00
Code Issues Projects Releases Packages Wiki Activity

gfx: Border radius support for asymmetric borders

Browse source 
This change adds support for calculating the correct angle in the border
corner arc when switching from one border to another e.g. the left border
to the top border.

When the border-top/right/bottom/left-widths are not the same, the angle on
the border corner arc separating the borders isn't pi/4.

For example, if the top border width is much larger than the left border
width then most of the border corner should be drawn using the top
border color.

Elliptical border radii are supported for when elliptical border radii are
added.

The common case where borders have the same width sets the angle to
pi/4 directly.

A ref test is also included.
This commit is contained in:
Bryan Bell 2015-08-24 20:48:53 -07:00
parent ab55e3ec10
commit d539b9b2e6
4 changed files with 544 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

1
tests/ref/basic.list
View file

@ -61,6 +61,7 @@ flaky_cpu == append_style_a.html append_style_b.html
== border_code_tag.html border_code_tag_ref.html
== border_collapse_missing_cell_a.html border_collapse_missing_cell_ref.html
== border_collapse_simple_a.html border_collapse_simple_ref.html
== border_radius_asymmetric_sizes_a.html border_radius_asymmetric_sizes_ref.html
== border_radius_clip_a.html border_radius_clip_ref.html
!= border_radius_dashed_a.html border_radius_dashed_ref.html
== border_radius_overlapping_a.html border_radius_overlapping_ref.html

71
tests/ref/border_radius_asymmetric_sizes_a.html Normal file
View file

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<style type="text/css">
div.box {
background: white;
border-width: 10px 10px 10px 10px;
border-color: yellow red green blue;
border-radius: 10px;
border-style: solid;
height: 190px;
width: 190px;
}
div.top {
border-top-width: 30px;
}
div.right {
border-right-width: 30px;
}
div.bottom {
border-bottom-width: 30px;
}
div.left {
border-left-width: 30px;
}
div.radius10px {
border-radius: 10px;
}
div.radius20px {
border-radius: 20px;
}
div.radius30px {
border-radius: 30px;
}
div.radius40px {
border-radius: 40px;
}
#box2, #box4, #box6, #box8, #box10, #box12, #box14 {
width: 170px;
}
</style>
</head>
<body>
<h2>Border Radius - 10px</h2>
Box#1<div id="box1" class="box top"></div><br>
Box#2<div id="box2" class="box right"></div><br>
Box#3<div id="box3" class="box bottom"></div><br>
Box#4<div id="box4" class="box left"></div><br>
<h2>Border Radius - 20px</h2>
Box#5<div id="box5" class="box top radius20px"></div><br>
Box#6<div id="box6" class="box right radius20px"></div><br>
Box#7<div id="box7" class="box bottom radius20px"></div><br>
Box#8<div id="box8" class="box left radius20px"></div><br>
<h2>Border Radius - 30px</h2>
Box#9<div id="box9" class="box top radius30px"></div><br>
Box#10<div id="box10" class="box right radius30px"></div><br>
Box#11<div id="box11" class="box bottom radius30px"></div><br>
Box#12<div id="box12" class="box left radius30px"></div><br>
<h2>Border Radius - 40px</h2>
Box#13<div id="box13" class="box top radius40px"></div><br>
Box#14<div id="box14" class="box right radius40px"></div><br>
Box#15<div id="box15" class="box bottom radius40px"></div><br>
Box#16<div id="box16" class="box left radius40px"></div><br>
</body>
</html>

217
tests/ref/border_radius_asymmetric_sizes_ref.html Normal file
View file

@ -0,0 +1,217 @@
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<style type="text/css">
.box-top {
background: white;
width: 190px;
height: 0px;
margin: 0px;
border-style: solid;
border-color: yellow red green blue;
}
.box-middle {
background: white;
width: 190px;
height: 190px;
margin: 0px;
border-style: solid;
border-color: yellow red green blue;
}
.box-bottom {
background: white;
width: 190px;
height: 0px;
margin: 0px;
border-style: solid;
border-color: yellow red green blue;
}
.top-radius-10 {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.bottom-radius-10 {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.top-radius-20 {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.bottom-radius-20 {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.top-radius-30 {
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
.bottom-radius-30 {
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
.top-radius-40 {
border-top-left-radius: 40px;
border-top-right-radius: 40px;
}
.bottom-radius-40 {
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
}
.box1-top {
border-top-width: 30px;
border-right-width: 10px;
border-bottom-width: 0px;
border-left-width: 10px;
}
.box1-middle {
border-width: 0px 10px 0px 10px;
}
.box1-bottom {
border-width: 0px 10px 10px 10px;
}
.box2-top {
width: 170px;
border-width: 10px 30px 0px 10px;
}
.box2-middle {
width: 170px;
border-width: 0px 30px 0px 10px;
}
.box2-bottom {
width: 170px;
border-width: 0px 30px 10px 10px;
}
.box3-top {
border-width: 10px 10px 0px 10px;
}
.box3-middle {
border-width: 0px 10px 0px 10px;
}
.box3-bottom {
border-top-width: 0px;
border-left-width: 10px;
border-right-width: 10px;
border-bottom-width: 30px;
}
.box4-top {
width: 170px;
border-width: 10px 10px 0px 30px;
}
.box4-middle {
width: 170px;
border-width: 0px 10px 0px 30px;
}
.box4-bottom {
width: 170px;
border-top-width: 0px;
border-left-width: 30px;
border-right-width: 10px;
border-bottom-width: 10px;
}
</style>
</head>
<body>
<h2>Border Radius - 10px</h2>
Box#1
<div id="box1-top" class="box-top box1-top top-radius-10"></div>
<div id="box1-middle" class="box-middle box1-middle middle-radius-10"></div>
<div id="box1-bottom" class="box-bottom box1-bottom bottom-radius-10"></div>
<br>
Box#2
<div id="box2-top" class="box-top box2-top top-radius-10"></div>
<div id="box2-middle" class="box-middle box2-middle middle-radius-10"></div>
<div id="box2-bottom" class="box-bottom box2-bottom bottom-radius-10"></div>
<br>
Box#3
<div id="box3-top" class="box-top box3-top top-radius-10"></div>
<div id="box3-middle" class="box-middle box3-middle middle-radius-10"></div>
<div id="box3-bottom" class="box-bottom box3-bottom bottom-radius-10"></div>
<br>
Box#4
<div id="box4-top" class="box-top box4-top top-radius-10"></div>
<div id="box4-middle" class="box-middle box4-middle middle-radius-10"></div>
<div id="box4-bottom" class="box-bottom box4-bottom bottom-radius-10"></div>
<br>
<h2>Border Radius - 20px</h2>
Box#5
<div id="box5-top" class="box-top box1-top top-radius-20"></div>
<div id="box5-middle" class="box-middle box1-middle middle-radius-20"></div>
<div id="box5-bottom" class="box-bottom box1-bottom bottom-radius-20"></div>
<br>
Box#6
<div id="box6-top" class="box-top box2-top top-radius-20"></div>
<div id="box6-middle" class="box-middle box2-middle middle-radius-20"></div>
<div id="box6-bottom" class="box-bottom box2-bottom bottom-radius-20"></div>
<br>
Box#7
<div id="box7-top" class="box-top box3-top top-radius-20"></div>
<div id="box7-middle" class="box-middle box3-middle middle-radius-20"></div>
<div id="box7-bottom" class="box-bottom box3-bottom bottom-radius-20"></div>
<br>
Box#8
<div id="box8-top" class="box-top box4-top top-radius-20"></div>
<div id="box8-middle" class="box-middle box4-middle middle-radius-20"></div>
<div id="box8-bottom" class="box-bottom box4-bottom bottom-radius-20"></div>
<br>
<h2>Border Radius - 30px</h2>
Box#9
<div id="box9-top" class="box-top box1-top top-radius-30"></div>
<div id="box9-middle" class="box-middle box1-middle middle-radius-30"></div>
<div id="box9-bottom" class="box-bottom box1-bottom bottom-radius-30"></div>
<br>
Box#10
<div id="box10-top" class="box-top box2-top top-radius-30"></div>
<div id="box10-middle" class="box-middle box2-middle middle-radius-30"></div>
<div id="box10-bottom" class="box-bottom box2-bottom bottom-radius-30"></div>
<br>
Box#11
<div id="box11-top" class="box-top box3-top top-radius-30"></div>
<div id="box11-middle" class="box-middle box3-middle middle-radius-30"></div>
<div id="box11-bottom" class="box-bottom box3-bottom bottom-radius-30"></div>
<br>
Box#12
<div id="box12-top" class="box-top box4-top top-radius-30"></div>
<div id="box12-middle" class="box-middle box4-middle middle-radius-30"></div>
<div id="box12-bottom" class="box-bottom box4-bottom bottom-radius-30"></div>
<br>
<h2>Border Radius - 40px</h2>
Box#13
<div id="box13-top" class="box-top box1-top top-radius-40"></div>
<div id="box13-middle" class="box-middle box1-middle middle-radius-40"></div>
<div id="box13-bottom" class="box-bottom box1-bottom bottom-radius-40"></div>
<br>
Box#14
<div id="box14-top" class="box-top box2-top top-radius-40"></div>
<div id="box14-middle" class="box-middle box2-middle middle-radius-40"></div>
<div id="box14-bottom" class="box-bottom box2-bottom bottom-radius-40"></div>
<br>
Box#15
<div id="box15-top" class="box-top box3-top top-radius-40"></div>
<div id="box15-middle" class="box-middle box3-middle middle-radius-40"></div>
<div id="box15-bottom" class="box-bottom box3-bottom bottom-radius-40"></div>
<br>
Box#16
<div id="box16-top" class="box-top box4-top top-radius-40"></div>
<div id="box16-middle" class="box-middle box4-middle middle-radius-40"></div>
<div id="box16-bottom" class="box-bottom box4-bottom bottom-radius-40"></div>
<br>
</body>
</html>