1<!DOCTYPE html>
2<html>
3 <head>
4 <style>
5 .container {
6 position: relative;
7 font: 10px/1 Ahem, sans-serif;
8 width: 80px;
9 height: 40px;
10 border: 1px solid black;
11 }
12 .rounded-rect {
13 position: absolute;
14 top: 0px;
15 left: 0px;
16 width: 40px;
17 height: 40px;
18 border: 1px solid blue;
19 border-radius: 50%;
20 margin: -1px; /* shape-outside layout is unaffected by the border */
21 }
22 .left-rounded-rect-float-line {
23 float: left;
24 clear: left;
25 height: 10px;
26 }
27 </style>
28 </head>
29 <body>
30 <h1>Bug <a href="https://bugs.webkit.org/show_bug.cgi?id=116745">116745</a>: [CSS Shapes] rectangle and inset-rectangle do not properly handle rx and ry</h1>
31 <h2>Test that if rx > 50% width and ry > %50 height, they are properly clamped to 50% of the respective dimension when doing layout on the shape. All of the following tests should look identical, and the black blocks should wrap around the blue circle.</h2>
32 <div class="container">
33 <div id="left-fixed-units" class="rounded-rect"></div>
34 X<br/>
35 X<br/>
36 X<br/>
37 X
38 </div>
39 <div class="container">
40 <div id="left-relative-units" class="rounded-rect"></div>
41 X<br/>
42 X<br/>
43 X<br/>
44 X
45 </div>
46 <div class="container">
47 <div id="left-different-units" class="rounded-rect"></div>
48 X<br/>
49 X<br/>
50 X<br/>
51 X
52 </div>
53 <div class="container">
54 <div id="left-edge-case" class="rounded-rect"></div>
55 X<br/>
56 X<br/>
57 X<br/>
58 X
59 </div>
60 <script src="../resources/rounded-rectangle.js"></script>
61 <script src="../resources/subpixel-utils.js"></script>
62 <script>
63 genLeftRoundedRectFloatShapeOutsideRefTest({
64 roundedRect: {x: 0, y: 0, width: 40, height: 40, rx: 20, ry: 20},
65 containerWidth: 80,
66 containerHeight: 40,
67 lineHeight: 10,
68 floatElementClassSuffix: "rounded-rect-float-line",
69 insertElementIdSuffix: "fixed-units"
70 });
71 genLeftRoundedRectFloatShapeOutsideRefTest({
72 roundedRect: {x: 0, y: 0, width: 40, height: 40, rx: 20, ry: 20},
73 containerWidth: 80,
74 containerHeight: 40,
75 lineHeight: 10,
76 floatElementClassSuffix: "rounded-rect-float-line",
77 insertElementIdSuffix: "relative-units"
78 });
79 genLeftRoundedRectFloatShapeOutsideRefTest({
80 roundedRect: {x: 0, y: 0, width: 40, height: 40, rx: 20, ry: 20},
81 containerWidth: 80,
82 containerHeight: 40,
83 lineHeight: 10,
84 floatElementClassSuffix: "rounded-rect-float-line",
85 insertElementIdSuffix: "different-units"
86 });
87 genLeftRoundedRectFloatShapeOutsideRefTest({
88 roundedRect: {x: 0, y: 0, width: 40, height: 40, rx: 20, ry: 20},
89 containerWidth: 80,
90 containerHeight: 40,
91 lineHeight: 10,
92 floatElementClassSuffix: "rounded-rect-float-line",
93 insertElementIdSuffix: "edge-case"
94 });
95 </script>
96 </body>
97</html>