Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / fast / css / shadow-multiple.html
blobecdb0b59fe328f43c06d3573e2db4f10102f978e
1 <style>
2 span::selection { color: purple; }
3 div.roundedRect {
4 width: 100px;
5 height: 100px;
6 margin: 50px;
7 -webkit-border-radius: 25px;
8 -webkit-box-shadow: hsla(20, 100%, 50%, 1) 7px 4px 0
9 , hsla(60, 100%, 50%, 1) -8px 14px 2px
10 , hsla(100, 100%, 50%, 1) -21px -12px 5px;
12 </style>
13 <div style="
14 font-family: Lucida Grande;
15 font-weight: bold;
16 font-size: 48px;
17 margin: 20px;
18 text-shadow: hsla(20, 100%, 50%, 1) 7px 4px 0
19 , hsla(60, 100%, 50%, 1) -8px 14px 2px
20 , hsla(100, 100%, 50%, 1) -21px -12px 5px;
22 <span style="-webkit-text-stroke: 1px; -webkit-text-fill-color: transparent;">This</span>
23 <span style="-webkit-text-stroke: 1px; -webkit-text-fill-color: white;">text</span>
24 <span style="color: rgba(0, 0, 0, 0.3);">casts</span>
25 <span id="selectMe">multiple</span>
26 shadows
27 </div>
28 <script>
29 var text = document.getElementById("selectMe").firstChild;
30 getSelection().setBaseAndExtent(text, 0, text, 6);
31 </script>
32 <div class="roundedRect"></div>
33 <div class="roundedRect" style="background-color: white;"></div>
34 <div class="roundedRect" style="background-color: rgba(0, 0, 0, 0.2);"></div>