forked from meyerweb/css-tests
-
Notifications
You must be signed in to change notification settings - Fork 0
/
gradient-radial-degenerate.html
58 lines (51 loc) · 2.24 KB
/
gradient-radial-degenerate.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html>
<head>
<title>Degenerate Radial Gradients</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="c/style-insert-tests.css">
<style type="text/css" media="all">
section div {height: 200px; width: 200px; float: left; margin: 10px; border: 1px dotted red;}
section div:nth-child(5n+1) {clear: left;}
section div::before {content: '[.' attr(class) ']';}
</style>
<style type="text/css" media="all" id="tests">
.d01 {background-image: radial-gradient(100px, purple, gold);}
.d02 {background-image: radial-gradient(25px 100px, purple, gold);}
.d03 {background-image: radial-gradient(1px 100px, purple, gold);}
.d04 {background-image: radial-gradient(0 100px, purple, gold);}
.d05 {background-image: radial-gradient(0 100px, purple 0, gold 100px);}
.d06 {background-image: radial-gradient(100px, purple, gold);}
.d07 {background-image: radial-gradient(100px 25px, purple, gold);}
.d08 {background-image: radial-gradient(100px 1px, purple, gold);}
.d09 {background-image: radial-gradient(100px 0, purple, gold);}
.d10 {background-image: radial-gradient(100px 0, purple 0, gold 100px);}
.d11 {background-image: radial-gradient(50%, purple, gold 100px);}
.d12 {background-image: radial-gradient(1% 50%, purple, gold 100px);}
.d13 {background-image: radial-gradient(0 50%, purple, gold 100px);}
.d14 {background-image: radial-gradient(50% 1%, purple, gold 100px);}
.d15 {background-image: radial-gradient(50% 0, purple 0, gold 100px);}
</style>
</head>
<body>
<h1>Degenerate radial gradients</h1>
<p>(because it’s <a href="http://www.w3.org/TR/css3-images/#degenerate-radials">the best section title in the history of W3C specs</a>, that’s why)</p>
<section>
<div class="d01"><p></p></div>
<div class="d02"><p></p></div>
<div class="d03"><p></p></div>
<div class="d04"><p></p></div>
<div class="d05"><p></p></div>
<div class="d06"><p></p></div>
<div class="d07"><p></p></div>
<div class="d08"><p></p></div>
<div class="d09"><p></p></div>
<div class="d10"><p></p></div>
<div class="d11"><p></p></div>
<div class="d12"><p></p></div>
<div class="d13"><p></p></div>
<div class="d14"><p></p></div>
<div class="d15"><p></p></div>
</section>
</body>
</html>