mirror of
https://github.com/servo/servo.git
synced 2025-06-20 15:18:58 +01:00
147 lines
No EOL
6.2 KiB
HTML
147 lines
No EOL
6.2 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<title>CSS Test: Box Shadow Syntax: Reordering Components</title>
|
|
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
|
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-box-shadow">
|
|
<link rel="match" href="box-shadow-syntax-001.htm">
|
|
<meta name="assert" content="Box shadow color, inset, and length parameters can be mixed in any order, but lengths must stay adjacent.">
|
|
<style type="text/css">
|
|
|
|
.container {
|
|
margin: 4px;
|
|
border: solid red 4px;
|
|
padding-top: 1px;
|
|
border-style: none none solid solid;
|
|
}
|
|
.outset {
|
|
height: 12px;
|
|
margin: -5px -4px 0 0;
|
|
|
|
}
|
|
.inset {
|
|
color: green;
|
|
height: 13px;
|
|
margin: -1px 0 -4px -4px;
|
|
}
|
|
|
|
/* color */
|
|
#c1 > div { box-shadow: -4px 4px green;
|
|
box-shadow: red;
|
|
box-shadow: 4px red;
|
|
box-shadow: red 4px;
|
|
box-shadow: -4px red 4px;
|
|
box-shadow: red -4px 4px red;
|
|
box-shadow: -4px 4px red 0;
|
|
box-shadow: -4px 4px 0 red 0;
|
|
}
|
|
#c2 > div { box-shadow: green -4px 4px; }
|
|
#c3 > div { box-shadow: -4px 4px 0 green; }
|
|
#c4 > div { box-shadow: green -4px 4px 0; }
|
|
#c5 > div { box-shadow: -4px 4px 0 0 green; }
|
|
#c6 > div { box-shadow: green -4px 4px 0 0; }
|
|
|
|
/* inset */
|
|
#i1 > div { box-shadow: 4px -4px inset; }
|
|
#i2 > div { box-shadow: inset 4px -4px; }
|
|
#i3 > div { box-shadow: 4px -4px 0 inset; }
|
|
#i4 > div { box-shadow: inset 4px -4px 0; }
|
|
#i5 > div { box-shadow: 4px -4px 0 0 inset; }
|
|
#i6 > div { box-shadow: inset 4px -4px 0 0; }
|
|
#i7 { border-color: green; }
|
|
#i7 > div { box-shadow: 4px -4px green inset;
|
|
color: red;
|
|
box-shadow: inset;
|
|
box-shadow: inset 4px;
|
|
box-shadow: 4px inset;
|
|
box-shadow: 4px inset -4px;
|
|
box-shadow: inset 4px -4px inset;
|
|
box-shadow: 4px -4px inset 0;
|
|
box-shadow: 4px -4px 0 inset 0;
|
|
}
|
|
|
|
|
|
/* color and inset */
|
|
#ci1 > div { box-shadow: 4px -4px green inset;
|
|
|
|
box-shadow: red inset;
|
|
box-shadow: inset red;
|
|
|
|
box-shadow: 4px red inset;
|
|
box-shadow: red inset 4px;
|
|
box-shadow: 4px inset red;
|
|
box-shadow: inset red 4px;
|
|
|
|
box-shadow: 4px red inset -4px;
|
|
box-shadow: 4px inset red -4px;
|
|
box-shadow: inset 4px red -4px;
|
|
box-shadow: 4px red 4px inset;
|
|
box-shadow: red 4px inset -4px;
|
|
box-shadow: 4px inset -4px red;
|
|
|
|
box-shadow: 4px -4px red inset 0;
|
|
box-shadow: 4px -4px inset red 0;
|
|
box-shadow: inset 4px -4px red 0;
|
|
box-shadow: 4px -4px red 0 inset;
|
|
box-shadow: red 4px -4px inset 0;
|
|
box-shadow: 4px -4px inset 0 red;
|
|
}
|
|
#ci2 > div { box-shadow: 4px -4px inset green; }
|
|
#ci3 > div { box-shadow: inset green 4px -4px; }
|
|
#ci4 > div { box-shadow: green inset 4px -4px; }
|
|
#ci5 > div { box-shadow: green 4px -4px inset; }
|
|
#ci6 > div { box-shadow: inset 4px -4px green; }
|
|
|
|
#ci11 > div { box-shadow: inset green 4px -4px 0; }
|
|
#ci12 > div { box-shadow: green inset 4px -4px 0; }
|
|
#ci13 > div { box-shadow: 4px -4px 0 green inset; }
|
|
#ci14 > div { box-shadow: 4px -4px 0 inset green; }
|
|
#ci15 > div { box-shadow: green 4px -4px 0 inset; }
|
|
#ci16 > div { box-shadow: inset 4px -4px 0 green; }
|
|
|
|
#ci21 > div { box-shadow: inset green 4px -4px 0 0; }
|
|
#ci22 > div { box-shadow: green inset 4px -4px 0 0; }
|
|
#ci23 > div { box-shadow: 4px -4px 0 0 green inset; }
|
|
#ci24 > div { box-shadow: 4px -4px 0 0 inset green; }
|
|
#ci25 > div { box-shadow: green 4px -4px 0 0 inset; }
|
|
#ci26 > div { box-shadow: inset 4px -4px 0 0 green; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>There must be 31 green L-shapes below and no red.</p>
|
|
|
|
<div class="wrapper">
|
|
<div id="c1" class="container"><div class="outset"></div></div>
|
|
<div id="c2" class="container"><div class="outset"></div></div>
|
|
<div id="c3" class="container"><div class="outset"></div></div>
|
|
<div id="c4" class="container"><div class="outset"></div></div>
|
|
<div id="c5" class="container"><div class="outset"></div></div>
|
|
<div id="c6" class="container"><div class="outset"></div></div>
|
|
<div id="i1" class="container"><div class="inset"></div></div>
|
|
<div id="i2" class="container"><div class="inset"></div></div>
|
|
<div id="i3" class="container"><div class="inset"></div></div>
|
|
<div id="i4" class="container"><div class="inset"></div></div>
|
|
<div id="i5" class="container"><div class="inset"></div></div>
|
|
<div id="i6" class="container"><div class="inset"></div></div>
|
|
<div id="i7" class="container"><div class="inset"></div></div>
|
|
<div id="ci1" class="container"><div class="inset"></div></div>
|
|
<div id="ci2" class="container"><div class="inset"></div></div>
|
|
<div id="ci3" class="container"><div class="inset"></div></div>
|
|
<div id="ci4" class="container"><div class="inset"></div></div>
|
|
<div id="ci5" class="container"><div class="inset"></div></div>
|
|
<div id="ci6" class="container"><div class="inset"></div></div>
|
|
<div id="ci11" class="container"><div class="inset"></div></div>
|
|
<div id="ci12" class="container"><div class="inset"></div></div>
|
|
<div id="ci13" class="container"><div class="inset"></div></div>
|
|
<div id="ci14" class="container"><div class="inset"></div></div>
|
|
<div id="ci15" class="container"><div class="inset"></div></div>
|
|
<div id="ci16" class="container"><div class="inset"></div></div>
|
|
<div id="ci21" class="container"><div class="inset"></div></div>
|
|
<div id="ci22" class="container"><div class="inset"></div></div>
|
|
<div id="ci23" class="container"><div class="inset"></div></div>
|
|
<div id="ci24" class="container"><div class="inset"></div></div>
|
|
<div id="ci25" class="container"><div class="inset"></div></div>
|
|
<div id="ci26" class="container"><div class="inset"></div></div>
|
|
</div>
|
|
</body>
|
|
</html> |