blob: 0e50cbef8b7de0159004204e501e76b57d7fce5a [file] [log] [blame]
simon.fraser@apple.com4803cdd2011-04-26 03:25:14 +00001<!DOCTYPE html>
dino@apple.com3db0b8f2008-09-15 21:52:23 +00002
simon.fraser@apple.com4803cdd2011-04-26 03:25:14 +00003<html>
dino@apple.com3db0b8f2008-09-15 21:52:23 +00004<head>
simon.fraser@apple.com4803cdd2011-04-26 03:25:14 +00005 <style>
dino@apple.com3db0b8f2008-09-15 21:52:23 +00006 #box1 {
7 height: 100px;
8 width: 100px;
9 background-color: blue;
10 -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
11 -webkit-transition-duration: 0.1s;
12 -webkit-transition-timing-function: linear;
13 -webkit-transition-property: -webkit-box-shadow;
14 }
15 #box2 {
16 height: 100px;
17 width: 100px;
18 background-color: blue;
19 -webkit-transition-duration: 0.1s;
20 -webkit-transition-timing-function: linear;
21 -webkit-transition-property: -webkit-box-shadow;
22 }
23 </style>
simon.fraser@apple.com4803cdd2011-04-26 03:25:14 +000024 <script>
rniwa@webkit.orgcc082ecd2012-06-16 03:42:58 +000025 if (window.testRunner) {
26 testRunner.dumpAsText();
27 testRunner.waitUntilDone();
dino@apple.com3db0b8f2008-09-15 21:52:23 +000028 }
29
30 function start()
31 {
32 var box1 = document.getElementById('box1');
33 box1.style.webkitBoxShadow = 'none';
34 var box2 = document.getElementById('box2');
35 box2.style.webkitBoxShadow = '5px 5px 5px rgba(0, 0, 0, 0.5)';
36 window.setTimeout(function() {
37 document.getElementById('result').innerHTML = "PASS";
rniwa@webkit.orgcc082ecd2012-06-16 03:42:58 +000038 if (window.testRunner)
39 testRunner.notifyDone();
dino@apple.com3db0b8f2008-09-15 21:52:23 +000040 }, 300);
41 }
42
43 window.addEventListener('load', start, false);
dino@apple.com3db0b8f2008-09-15 21:52:23 +000044 </script>
45</head>
46<body>
47
48<p>
49First box should transition to no shadow. Second should transition to a shadow.
50</p>
51<div id="box1">
52</div>
53<div id="box2">
54</div>
55<div id="result">
56</div>
57</body>
58</html>