Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 150 lines (126 sloc) 8.144 kB
47dc9d8 Fix issues with rendering of rounded borders:
Jason Johnston authored
1 <!DOCTYPE html>
2 <html>
3 <head>
4
5 <meta content="text/html; charset=UTF-8" http-equiv="content-type">
6 <title>Test cases for border-radius</title>
7
8 <style type="text/css">
9
10 html { -pie-load-path: "../build"; }
11
12 body {
13 font-size: 12px;
14 }
15
16 #tests {
17 padding: 2em;
18 }
19 #tests div {
20 width: 50%;
21 padding: 1.5em;
22 margin: 1em 0;
23 white-space: pre;
24 behavior: url(../build/PIE.htc);
25 position: relative;
26 background: #CCF;
27 }
28
29 </style>
30
31 </head>
32 <body>
33
34 <h1>Tests for border-radius</h1>
35
36 <div id="tests">
37 <h2>Uniform</h2>
38 <div>border-radius: 10px;</div>
39 <div>border-radius: 1em;</div>
40 <div>border-radius: 20%;</div>
41
42 <h2>Different per corner</h2>
43 <div>border-radius: 5px 10px 15px 20px;</div>
44 <div>border-radius: 0.5em 1em 1.5em 2em;</div>
45 <div>border-radius: 10% 20% 30% 40%;</div>
46
47 <h2>Single corner</h2>
48 <div>border-radius: 20px 0 0 0;</div>
49 <div>border-radius: 0 20px 0 0;</div>
50 <div>border-radius: 0 0 20px 0;</div>
51 <div>border-radius: 0 0 0 20px;</div>
52
53 <h2>X and Y</h2>
54 <div>border-radius: 30px / 10px;</div>
55 <div>border-radius: 3em / 1em;</div>
56 <div>border-radius: 20% / 50%;</div>
57 <div>border-radius: 5px 10px 15px 20px / 20px 15px 10px 5px;</div>
58
59 <h2>Uniform with border</h2>
60 <div>border-radius: 10px; border: 5px solid #000;</div>
61 <div>border-radius: 10px; border: 5px dotted #000;</div>
62 <div>border-radius: 10px; border: 5px dashed #000;</div>
63 <div>border-radius: 10px; border: 5px double #000;</div>
64 <div>border-radius: 10px; border: 5px groove #000;</div>
65 <div>border-radius: 10px; border: 5px ridge #000;</div>
66 <div>border-radius: 10px; border: 5px inset #000;</div>
67 <div>border-radius: 10px; border: 5px outset #000;</div>
68
69 <h2>Differing border widths</h2>
70 <div>border-radius: 10px; border: solid #000; border-width: 6px 9px 6px 3px;</div>
71 <div>border-radius: 10px; border: dotted #000; border-width: 6px 9px 6px 3px;</div>
72 <div>border-radius: 10px; border: dashed #000; border-width: 6px 9px 6px 3px;</div>
73 <div>border-radius: 10px; border: double #000; border-width: 6px 9px 6px 3px;</div>
7e0f6a8 Implement rendering of groove, ridge, inset, and outset border styles…
Jason Johnston authored
74 <div>border-radius: 10px; border: groove #000; border-width: 6px 9px 6px 3px;</div>
75 <div>border-radius: 10px; border: ridge #000; border-width: 6px 9px 6px 3px;</div>
76 <div>border-radius: 10px; border: inset #000; border-width: 6px 9px 6px 3px;</div>
77 <div>border-radius: 10px; border: outset #000; border-width: 6px 9px 6px 3px;</div>
47dc9d8 Fix issues with rendering of rounded borders:
Jason Johnston authored
78
79 <h2>Border thicker than radius</h2>
80 <div>border-radius: 10px; border: 20px solid #000;</div>
81 <div>border-radius: 10px; border: 20px dotted #000;</div>
82 <div>border-radius: 10px; border: 20px dashed #000;</div>
83 <div>border-radius: 10px; border: 20px double #000;</div>
84 <div>border-radius: 10px; border: solid #000; border-width: 3px 20px 9px 15px;</div>
85 <div>border-radius: 10px; border: dotted #000; border-width: 3px 20px 9px 15px;</div>
86 <div>border-radius: 10px; border: dashed #000; border-width: 3px 20px 9px 15px;</div>
87 <div>border-radius: 10px; border: double #000; border-width: 3px 20px 9px 15px;</div>
7e0f6a8 Implement rendering of groove, ridge, inset, and outset border styles…
Jason Johnston authored
88 <div>border-radius: 10px; border: groove #000; border-width: 3px 20px 9px 15px;</div>
89 <div>border-radius: 10px; border: ridge #000; border-width: 3px 20px 9px 15px;</div>
90 <div>border-radius: 10px; border: inset #000; border-width: 3px 20px 9px 15px;</div>
91 <div>border-radius: 10px; border: outset #000; border-width: 3px 20px 9px 15px;</div>
47dc9d8 Fix issues with rendering of rounded borders:
Jason Johnston authored
92
93 <h2>Zero-width borders</h2>
94 <div>border-radius: 10px; border: 20px solid #000; border-top-width: 0;</div>
95 <div>border-radius: 10px; border: 20px dotted #000; border-right-width: 0;</div>
96 <div>border-radius: 10px; border: 20px dashed #000; border-bottom-width: 0;</div>
97 <div>border-radius: 10px; border: 20px double #000; border-left-width: 0;</div>
7e0f6a8 Implement rendering of groove, ridge, inset, and outset border styles…
Jason Johnston authored
98 <div>border-radius: 10px; border: 20px groove #000; border-top-width: 0;</div>
99 <div>border-radius: 10px; border: 20px ridge #000; border-right-width: 0;</div>
100 <div>border-radius: 10px; border: 20px inset #000; border-bottom-width: 0;</div>
101 <div>border-radius: 10px; border: 20px outset #000; border-left-width: 0;</div>
47dc9d8 Fix issues with rendering of rounded borders:
Jason Johnston authored
102
103 <h2>Differing border colors</h2>
104 <div>border-radius: 10px; border: 20px solid; border-color: red green blue orange;</div>
105 <div>border-radius: 10px; border: 20px dotted; border-color: red green blue orange;</div>
106 <div>border-radius: 10px; border: 20px dashed; border-color: red green blue orange;</div>
107 <div>border-radius: 10px; border: 20px double; border-color: red green blue orange;</div>
7e0f6a8 Implement rendering of groove, ridge, inset, and outset border styles…
Jason Johnston authored
108 <div>border-radius: 10px; border: 20px groove; border-color: red green blue orange;</div>
109 <div>border-radius: 10px; border: 20px ridge; border-color: red green blue orange;</div>
110 <div>border-radius: 10px; border: 20px inset; border-color: red green blue orange;</div>
111 <div>border-radius: 10px; border: 20px outset; border-color: red green blue orange;</div>
47dc9d8 Fix issues with rendering of rounded borders:
Jason Johnston authored
112
113 <h2>Differing border colors and styles</h2>
114 <div>border-radius: 10px; border: 20px; border-color: red green blue orange; border-style: solid dotted dashed double;</div>
7e0f6a8 Implement rendering of groove, ridge, inset, and outset border styles…
Jason Johnston authored
115 <div>border-radius: 10px; border: 20px; border-color: red green blue orange; border-style: groove ridge inset outset;</div>
47dc9d8 Fix issues with rendering of rounded borders:
Jason Johnston authored
116
117 <h2>Differing border colors and widths</h2>
118 <div>border-radius: 10px; border: solid; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
119 <div>border-radius: 10px; border: dotted; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
120 <div>border-radius: 10px; border: dashed; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
121 <div>border-radius: 10px; border: double; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
7e0f6a8 Implement rendering of groove, ridge, inset, and outset border styles…
Jason Johnston authored
122 <div>border-radius: 10px; border: groove; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
123 <div>border-radius: 10px; border: ridge; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
124 <div>border-radius: 10px; border: inset; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
125 <div>border-radius: 10px; border: outset; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
47dc9d8 Fix issues with rendering of rounded borders:
Jason Johnston authored
126
127 <h2>Differing border colors, styles, and widths</h2>
128 <div>border-radius: 10px; border-style: solid dotted dashed double; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
7e0f6a8 Implement rendering of groove, ridge, inset, and outset border styles…
Jason Johnston authored
129 <div>border-radius: 10px; border-style: groove ridge inset outset; border-color: red green blue orange; border-width: 3px 20px 9px 15px;</div>
9e1b42b @lojjic Don't render paths for transparent border sides
authored
130
131 <h2>Arrow-ish</h2>
132 <div>width: 0; height: 0; padding: 0; background: none; border-radius: 5px; border: 20px solid transparent; border-top-color: blue;</div>
133 <div>width: 0; height: 0; padding: 0; background: none; border-radius: 5px; border: 20px solid transparent; border-right-color: blue;</div>
134 <div>width: 0; height: 0; padding: 0; background: none; border-radius: 5px; border: 20px solid transparent; border-bottom-color: blue;</div>
135 <div>width: 0; height: 0; padding: 0; background: none; border-radius: 5px; border: 20px solid transparent; border-left-color: blue;</div>
47dc9d8 Fix issues with rendering of rounded borders:
Jason Johnston authored
136 </div>
137
138 <script type="text/javascript">
139 (function() {
140 var divs= document.getElementById("tests").getElementsByTagName("div"),
141 i = 0, len = divs.length, css;
142 for(; i < len; i++) {
143 divs[i].style.cssText += divs[i].firstChild.nodeValue;
144 }
145 })();
146 </script>
147
148
149 </body>
150 </html>
Something went wrong with that request. Please try again.