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

Auto merge of #7370 - bjwbell:bugfix-unequal-borders, r=pcwalton

Browse source 
gfx: Border radius support for asymmetric sized borders

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

For instance 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.

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

It supports elliptical border radii for when elliptical border radii are
added.

A ref test is also included.

r? @Ms2ger 

<!-- Reviewable:start -->
[<img src="https://reviewable.io/review_button.png" height=40 alt="Review on Reviewable"/>](https://reviewable.io/reviews/servo/servo/7370)
<!-- Reviewable:end -->
This commit is contained in:
bors-servo 2015-08-31 14:58:33 -06:00
commit afc2c381db
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>