mirror of
https://github.com/servo/servo.git
synced 2025-06-23 16:44:33 +01:00
296fa2512b
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180. - Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
156 lines
No EOL
6.8 KiB
HTML
156 lines
No EOL
6.8 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<title>CSS Test: Box Shadow Syntax: Reordering Components</title>
|
|
<style type="text/css">
|
|
@page { font: italic 8pt sans-serif; color: gray;
|
|
margin: 7%;
|
|
counter-increment: page;
|
|
@top-left { content: "CSS Backgrounds and Borders Module Level 3 CR Test Suite"; }
|
|
@top-right { content: "Test box-shadow-syntax-001"; }
|
|
@bottom-right { content: counter(page); }
|
|
}
|
|
</style>
|
|
<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="reference/box-shadow-syntax-001.xht" />
|
|
<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> |