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

gfx: Add elliptical border-radius shorthand parsing

Browse source 
Adds elliptical border-radius shorthand parsing, e.g.:

    /* The syntax of the second radius allows one to four values */
    /* (first radius values) / radius */
    border-radius: 10px 5% / 20px;

    /* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
    border-radius: 10px 5% / 20px 30px;

    /* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
    border-radius: 10px 5px 2em / 20px 25px 30%;

    /* (first radius values) / top-left | top-right | bottom-right | bottom-left */
    border-radius: 10px 5% / 20px 25em 30px 35em;
This commit is contained in:
Bryan Bell 2015-09-15 13:27:30 -07:00
parent 67cf241acd
commit 48f1159845
5 changed files with 83 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

1
tests/ref/basic.list
View file

@ -68,6 +68,7 @@ flaky_cpu == append_style_a.html append_style_b.html
!= border_radius_dashed_a.html border_radius_dashed_ref.html
== border_radius_elliptical_a.html border_radius_elliptical_ref.html
== border_radius_overlapping_a.html border_radius_overlapping_ref.html
== border_radius_shorthand_a.html border_radius_shorthand_ref.html
== border_rounding_1px_invisible_issue_7184_a.html border_rounding_1px_invisible_issue_7184_ref.html
== border_spacing_a.html border_spacing_ref.html
== border_spacing_auto_layout_a.html border_spacing_ref.html

22
tests/ref/border_radius_shorthand_a.html Normal file
View file

@ -0,0 +1,22 @@
<!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: 15px 15px 15px 15px;
border-color: yellow red green blue;
border-style: solid;
border-radius: 100px 150px / 50px 100px 200px;
height: 500px;
width: 500px;
}
</style>
</head>
<body>
<h2>Shorthand Border Radius - Elliptical</h2>
<div class="box"></div><br>
</body>
</html>

25
tests/ref/border_radius_shorthand_ref.html Normal file
View file

@ -0,0 +1,25 @@
<!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: 15px 15px 15px 15px;
border-color: yellow red green blue;
border-style: solid;
border-top-left-radius: 100px 50px;
border-top-right-radius: 150px 100px;
border-bottom-right-radius: 100px 200px;
border-bottom-left-radius: 150px 100px;
height: 500px;
width: 500px;
}
</style>
</head>
<body>
<h2>Shorthand Border Radius - Elliptical</h2>
<div class="box"></div><br>
</body>
</html>