Skip to content
This repository
Jason Johnston
file 204 lines (171 sloc) 7.365 kb
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 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204
<!DOCTYPE html>
<html>
<head>

    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>Test cases for box-shadow</title>

    <style type="text/css">

        .w3cSpec {
            border:5px solid blue;
            background-color:#FFA500;
            width: 144px;
            height: 144px;
            margin: 0 40px 40px 184px;
            behavior: url(../build/PIE.htc);
        }
        .w3cSpecRound {
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius: 20px;
            clear: left;
            float: left;
            margin-left: 0;
        }
        .w3cSpecOutset {
            -webkit-box-shadow: rgba(0,0,0,0.4) 10px 10px;
            -moz-box-shadow: rgba(0,0,0,0.4) 10px 10px;
            box-shadow: rgba(0,0,0,0.4) 10px 10px;
        }
        .w3cSpecInset {
            -webkit-box-shadow: rgba(0,0,0,0.4) 10px 10px inset;
            -moz-box-shadow: rgba(0,0,0,0.4) 10px 10px inset;
            box-shadow: rgba(0,0,0,0.4) 10px 10px inset;
        }
        .w3cSpecOutsetSpread {
            -webkit-box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px;
            -moz-box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px;
            box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px;
        }
        .w3cSpecInsetSpread {
            -webkit-box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px inset;
            -moz-box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px inset;
            box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px inset;
        }

        #elektroNotdienst {
            background: khaki;
            padding: 2em;
        }
        #elektroNotdienst div {
            width: 8em;
            font: small "Courier New", "Nimbus Mono L", FreeMono, "Luxi Mono";
            padding: 0.5em;
            margin: 1.6em 0;
            background: white;
            white-space: pre;
            behavior: url(../build/PIE.htc);
            position: relative;
        }

        #rgba {
            background: url(background2.gif);
            padding: 2em;
        }
        #rgba div {
            width: 15em;
            height: 2em;
            padding: 0.5em;
            margin: 1.6em 0;
            background: white;
            white-space: pre;
            behavior: url(../build/PIE.htc);
            position: relative;
        }


    </style>

</head>
<body>

    <h1>Tests for box-shadow</h1>

    <div id="w3cTests">
        <h2>Examples from W3C <a href="http://dev.w3.org/csswg/css3-background/#box-shadow-samples">spec</a></h2>

        <div class="w3cSpec w3cSpecOutset w3cSpecRound"></div>
        <div class="w3cSpec w3cSpecOutset"></div>

        <div class="w3cSpec w3cSpecInset w3cSpecRound"></div>
        <div class="w3cSpec w3cSpecInset"></div>

        <div class="w3cSpec w3cSpecOutsetSpread w3cSpecRound"></div>
        <div class="w3cSpec w3cSpecOutsetSpread"></div>

        <div class="w3cSpec w3cSpecInsetSpread w3cSpecRound"></div>
        <div class="w3cSpec w3cSpecInsetSpread"></div>
    </div>


    <div id="elektroNotdienst">
        <h2>Examples from <a href="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html">Elektro-Notdienst test document</a></h2>

        <div>0.5em -0.5em 0.4em red,
0.5em 0.5em 0.4em yellow,
-0.5em 0.5em 0.4em lime,
-0.5em -0.5em 0.4em blue;</div>
        
        <div>0 0 0 0.5em;</div>
        <div>0 0 1em;</div>
        <div>1em 0.5em;</div>
        <div>1em 0.5em 1em;</div>
        
        <div>0.3em 0.3em silver;</div>
        <div>0.3em 0.3em 0 0.6em silver;</div>

        
        <div>0 0 1em maroon;</div>
        <div>0 0 1em 0.5em maroon;</div>
        
        <div>-0.4em -0.4em 1em olive;</div>
        <div>0.4em 0.4em 1em olive;</div>
        <div>0.4em 0.4em 1em -0.2em olive;</div>
        <div>0.4em 0.4em 1em 0.4em olive;</div>
        
        <div>inset 0 0 0.5em blue;</div>

        <div>inset 0 0 1em blue;</div>
        <div>inset 0 0 2em blue;</div>
        <div>inset 0 2em 3em -1em green;</div>
        <div>inset 0 2em 3em -2em green;</div>
        <div>inset 0 2em 3em -3em green;</div>
        <div>inset 0 0 1em khaki, inset 0 0 1em khaki, inset 0 0 1em khaki, inset 0 0 1em khaki;</div>
        <div>inset 0 2em 3em -1.5em green, inset 0 -2em 3em -2em blue;</div>
        <div>inset 1em 1em 2em -1em blue;</div>
        <div>inset 1em 1em 2em -1em blue, inset -1em -1em 2em -1em red;</div>

        <div style="background:red;">inset 0 2em 3em -2em white, inset 0 -2em 3em -2.5em black; /* background:red */</div>
        <div style="background:red;">inset 1em 1em 1em -1em white, inset -1em -1em 1em -1em black; /* background:red */</div>
        <div style="background:red;">inset -1em -1em 1em -1em black, inset 1em 1em 1em -1em white; /* background:red */</div>
        <div>inset -3em 0 3em -2em blue;</div>
        <div>0.2em 0.2em 0.7em black, inset 0 0 0.7em red;</div>

        <script type="text/javascript">
            (function() {
                var S= "";
                var D= document.getElementById("elektroNotdienst").getElementsByTagName("div");
                for(var i=0; S=D[i] && D[i].firstChild.data; i++) {
                    D[i].style.cssText += "; -moz-box-shadow:" + S + "-webkit-box-shadow:" + S + "box-shadow:" + S;
                }
            })();
        </script>
    </div>

    <div id="rgba">
        <div>10px 10px 0 rgba(0, 0, 0, 0.5);</div>
        <div>10px 10px 2px rgba(0, 0, 0, 0.5);</div>
        <div>10px 10px 5px rgba(0, 0, 0, 0.5);</div>
        <div>10px 10px 10px rgba(0, 0, 0, 0.5);</div>
        <div>10px 10px 20px rgba(0, 0, 0, 0.5);</div>
        <div>10px 10px 10px 5px rgba(0, 0, 0, 0.5);</div>

        <div>10px 10px 5px rgba(255, 0, 0, 0.5);</div>
        <div>10px 10px 5px rgba(0, 255, 0, 0.5);</div>
        <div>10px 10px 5px rgba(0, 0, 255, 0.5);</div>

        <script type="text/javascript">
            (function() {
                var S= "";
                var D= document.getElementById("rgba").getElementsByTagName("div");
                for(var i=0; S=D[i] && D[i].firstChild.data; i++) {
                    D[i].style.cssText += "; -moz-box-shadow:" + S + "-webkit-box-shadow:" + S + "box-shadow:" + S;
                }
            })();
        </script>
    </div>

    <div id="misc">
        <h2>Miscellaneous</h2>

        <style type="text/css">
            #misc div {
                behavior: url(../build/PIE.htc);
            }
            #misc1 {
                margin: 16px;
                padding: 20px;
                -webkit-border-radius: 20px;
                -moz-border-radius: 20px;
                border-radius: 20px;
                background: #EEE;
                width: 400px;
                -webkit-box-shadow: 0 0 0 2px blue, 0 0 0 4px red, 0 0 0 6px green, 0 0 0 8px yellow, 0 0 0 10px purple, 0 0 0 12px olive, 0 0 0 14px aqua, 0 0 0 16px black;
                -moz-box-shadow: 0 0 0 2px blue, 0 0 0 4px red, 0 0 0 6px green, 0 0 0 8px yellow, 0 0 0 10px purple, 0 0 0 12px olive, 0 0 0 14px aqua, 0 0 0 16px black;
                box-shadow: 0 0 0 2px blue, 0 0 0 4px red, 0 0 0 6px green, 0 0 0 8px yellow, 0 0 0 10px purple, 0 0 0 12px olive, 0 0 0 14px aqua, 0 0 0 16px black;
            }
        </style>

        <div id="misc1">Faking multiple borders with box-shadow</div>
    </div>

</body>
</html>
Something went wrong with that request. Please try again.