aboutsummaryrefslogtreecommitdiffstats
path: root/tests
diff options
context:
space:
mode:
Diffstat (limited to 'tests')
-rw-r--r--tests/ref/basic.list1
-rw-r--r--tests/ref/border_radius_asymmetric_sizes_a.html71
-rw-r--r--tests/ref/border_radius_asymmetric_sizes_ref.html217
3 files changed, 289 insertions, 0 deletions
diff --git a/tests/ref/basic.list b/tests/ref/basic.list
index ed4e0d91a4b..a7e3d2154ba 100644
--- a/tests/ref/basic.list
+++ b/tests/ref/basic.list
@@ -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
diff --git a/tests/ref/border_radius_asymmetric_sizes_a.html b/tests/ref/border_radius_asymmetric_sizes_a.html
new file mode 100644
index 00000000000..94676b11941
--- /dev/null
+++ b/tests/ref/border_radius_asymmetric_sizes_a.html
@@ -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>
diff --git a/tests/ref/border_radius_asymmetric_sizes_ref.html b/tests/ref/border_radius_asymmetric_sizes_ref.html
new file mode 100644
index 00000000000..4993ae6fd7d
--- /dev/null
+++ b/tests/ref/border_radius_asymmetric_sizes_ref.html
@@ -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>
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-01 23:47:27 +0000