Re-import the css/css-shapes WPT
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css / css-shapes / shape-outside / shape-image / shape-image-018.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <title>CSS Test: right float, url(jpg), real image + shape-margin (%)</title>
5     <link rel="author" title="Hans Muller" href="mailto:hmuller@adobe.com"/>
6     <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
7     <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
8     <link rel="match" href="reference/shape-image-018-ref.html"/>
9     <meta name="flags" content="ahem"/>
10     <meta name="assert" content="This test verifies that the boundary of a shape-outside defined by a JPEG image file is the same as the image's dimensions + shape-margin."/>
11     <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
12     <style type="text/css">
13         #container {
14           position: relative;
15           width: 200px;
16           font-family: Ahem;
17           font-size: 40px;
18           text-align: right;
19           color: green;
20         }
21         #image {
22             float: right;
23             margin-left: 100px;
24             shape-outside: url("support/left-half-rectangle.jpg"); /* size: 100x100, no alpha channel */
25             shape-margin: 10%; /* overall shape is 120x120 rectangle with corner radii = 10px */
26         }
27         #failure {
28             position: absolute;
29             top: 0px;
30             left: 40px; /* container.width - shape-outside+margin.width - font-size */
31             width: 200px;
32             text-align: left;
33             color: red;
34             z-index: -1;
35         }
36     </style>
37 </head>
38 <body>
39     <p>The test passes if no red is visible.</p>
40     <div id="container">
41         <img id="image" src="support/left-half-rectangle.jpg"/>
42         X<br>X<br>X<br>X
43         <div id="failure">
44             X<br>X<br>X<br><span style="margin-left: 120px">X
45         </div>
46     </div>
47 </body>
48 </html>