| <!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> |
| <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="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> |
