OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <title>CSS Test: left float, inset + shape-margin, % units</title> | |
5 </head> | |
6 <style> | |
7 #container { | |
8 position: absolute; | |
9 left: 25px; | |
10 top: 50px; | |
11 width: 200px; | |
12 height: 200px; | |
13 font-family: Ahem; | |
14 font-size: 20px; | |
15 background-color: red; | |
16 color: green; | |
17 } | |
18 #test-shape { | |
19 float: left; | |
20 width: 200px; | |
21 height: 200px; | |
22 -webkit-shape-margin: 10%; | |
leviw_travelin_and_unemployed
2014/04/11 21:04:17
We don't need these prefixes, right?
| |
23 -webkit-shape-outside: inset(40px 100px 40px 0px); | |
24 } | |
25 #static-shape { | |
26 position: absolute; | |
27 left: 25px; | |
28 width: 100px; | |
29 height: 120px; | |
30 top: 70px; | |
31 border: 20px solid green; | |
32 background-color: green; | |
33 } | |
34 </style> | |
35 <body> | |
36 <p>The test passes if there is a green square and no red.</p> | |
37 <div id="container"> | |
38 <div id="test-shape"></div> | |
39 XXXXXXXXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXX XXXXXXXXXX | |
40 </div> | |
41 <div id="static-shape"></div> | |
42 </body> | |
43 </html> | |
OLD | NEW |