Skip to content
This repository
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 166 lines (137 sloc) 6.054 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
<!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;
        }


    </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="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.