Change fast/s* and fast/t* files to use pre and post js files in LayoutTests/resources.
[WebKit-https.git] / LayoutTests / fast / shapes / shape-inside / shape-inside-polygon-padding-003.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="../../../resources/js-test-pre.js"></script>
5 <script src="../resources/subpixel-utils.js"></script>
6 <style>
7     #shape-inside {
8         position: relative;
9         margin: 0;
10         padding: 0;
11         width: 500px;
12         height: 500px;
13         -webkit-shape-inside: polygon(0px 0px, 400px 0px, 400px 350px, 0px 350px, 200px 175px);
14         -webkit-shape-padding: 50px;
15         font: 50px/1 Ahem, sans-serif;
16         color: green;
17     }
18
19     #shape-outline {
20         position: absolute;
21         top: 0px;
22         left: 0px;
23         width: 500px;
24         height: 500px;
25     }
26 </style>
27 </head>
28 <body>
29     <div id="shape-inside">
30         <svg id="shape-outline" xmlns="http://www.w3.org/2000/svg">
31             <polygon points="0,0 400,0 400,350 0,350 200,175" stroke="blue" fill="none"/>
32             <!--
33                 In the expressions below, a is the angle the upper reflex edge makes with the x axis:
34                 a = Math.atan2(175, 200)
35
36                 The X coordinate of the first (and last) inner path vertex is:
37                 x = 50 / Math.tan(a) + 50 / Math.sin(a);
38
39                 The X coordinates and y coordinate of the arc's endpoints are 
40                 x = 200 +/- 50 * Math.sin(a);
41                 y = 175 + 50 * Math.sin(a);
42             -->
43             <path d="M 133.07 50 L 350 50 L 350 300 L 133.07 300  L 237.63 207.92 A 50 50 0 0 0 237.63 142.07 L 133.07 50" stroke="blue" fill="none"/>
44         </svg>
45         <span id="a">XXX</span><br/><br/><span id="b">XX</span><br/><br/><span id="c">XXX</span>
46     </div>
47     <div id="console"></div>
48 </body>
49 <script>
50   function shapeInsideRect(elementId) 
51   {
52       var s = document.getElementById("shape-inside").getBoundingClientRect();
53       var r = document.getElementById(elementId).getBoundingClientRect();
54       return {left: r.left - s.left, top: r.top - s.top, width: r.width, height: r.height};
55   }
56
57   /* 
58      The left edge of span's 'a' and 'c' should begin at the padded (inset) edge that corresponds to 
59      the shape-inside polygon edge which goes from 175,200 to 0,0. The expected value is 191.215, which is
60      
61          a = Math.atan2(175, 200)
62          left = 2 * 50 * (200 / 175) + (50 / Math.sin(a))
63
64      The perpindicular distance between the polygon edge and the padded edge is 50 (the shape-padding value),
65      and a is the angle between the edges and the X axis, so 50/Math.sin(a), is the horizontal distance
66      between the polygon edge and its padded edge.
67
68   */
69
70   var quiet = true; // PASS output depends on SubPixelLayout.isEnabled()
71
72   shouldBe("shapeInsideRect('a').top", "50");
73   shouldBeCloseTo("shapeInsideRect('a').left", SubPixelLayout.snapToLayoutUnit(190.215), 1, quiet);
74   shouldBe("shapeInsideRect('a').width", "150");
75
76   shouldBe("shapeInsideRect('b').top", "150");
77   shouldBeCloseTo("shapeInsideRect('b').left", 250, 1)
78   shouldBe("shapeInsideRect('b').width", "100");
79
80   shouldBe("shapeInsideRect('c').top", "250"); 
81   shouldBeCloseTo("shapeInsideRect('c').left", SubPixelLayout.snapToLayoutUnit(190.215), 1, quiet);
82   shouldBe("shapeInsideRect('c').width", "150"); 
83 </script>
84 </html>
85