Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(350)

Side by Side Diff: LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000-expected.html

Issue 124303002: Layout support for new ellipse shape syntax (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Rebase against ToT Created 6 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <title>shape-outside-floats-ellipse-000-reference.html</title>
3 <link rel="author" title="Adobe" href="http://html.adobe.com/">
4 <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
5 <meta name="flags" content="ahem dom">
6 <style> 2 <style>
7 .container { 3 .container {
8 position: relative; 4 position: relative;
9 font: 20px/1 Ahem, sans-serif; 5 font: 20px/1 Ahem, sans-serif;
10 width: 500px; 6 width: 500px;
11 height: 200px; 7 height: 200px;
12 border: 1px solid black; 8 border: 1px solid black;
13 } 9 }
14 10
15 .ellipse { 11 .ellipse {
16 z-index: -1; 12 z-index: -1;
17 width: 320px; 13 width: 320px;
18 height: 160px; 14 height: 160px;
19 border-radius: 160px / 80px; 15 border-radius: 160px / 80px;
20 background-color: blue; 16 background-color: blue;
21 overflow: hidden; 17 overflow: hidden;
22 } 18 }
(...skipping 15 matching lines...) Expand all
38 clear: left; 34 clear: left;
39 height: 20px; 35 height: 20px;
40 } 36 }
41 37
42 .right-ellipse-float-line { 38 .right-ellipse-float-line {
43 float: right; 39 float: right;
44 clear: right; 40 clear: right;
45 height: 20px; 41 height: 20px;
46 } 42 }
47 </style> 43 </style>
48
49 <body> 44 <body>
50 <p>The black squares should trace the right side of the ellipse's blue outline.< /p> 45 <p>The black squares should trace the right side of the ellipse's blue outline.< /p>
51 <div class="container"> 46 <div class="container">
52 X<br/> 47 X<br/>
53 <div id="left-ellipse-outline" class="ellipse"></div> 48 <div id="left-ellipse-outline" class="ellipse"></div>
54 <!-- generated left-rounded-rect-float-line divs will be inserted here --> 49 <!-- generated left-rounded-rect-float-line divs will be inserted here -->
55 X<br/> 50 X<br/>
56 X<br/> 51 X<br/>
57 X<br/> 52 X<br/>
58 X<br/> 53 X<br/>
59 X<br/> 54 X<br/>
60 X<br/> 55 X<br/>
61 X<br/> 56 X<br/>
62 X<br/> 57 X<br/>
63 X 58 X
64 </div> 59 </div>
65 60
66 <p>The black squares should trace the left side of the ellipse's blue outline.</ p> 61 <p>The black squares should trace the left side of the ellipse's blue outline.</ p>
67 <div class="container" style="text-align: right"> 62 <div class="container" style="text-align: right">
68 X<br/> 63 X<br/>
69 <div id="right-ellipse-outline" class="ellipse"></div> 64 <div id="right-ellipse-outline" class="ellipse"></div>
70 <!-- generated right-rounded-rect-float-line divs will be inserted here -- > 65 <!-- generated right-rounded-rect-float-line divs will be inserted here -- >
71 X<br/> 66 X<br/>
72 X<br/> 67 X<br/>
73 X<br/> 68 X<br/>
74 X<br/> 69 X<br/>
75 X<br/> 70 X<br/>
76 X<br/> 71 X<br/>
77 X<br/> 72 X<br/>
78 X<br/> 73 X<br/>
79 X 74 X
80 </div> 75 </div>
81 </body>
82 76
83 <script src="resources/rounded-rectangle.js"></script> 77 <script src="../resources/rounded-rectangle.js"></script>
84 <script src="resources/subpixel-utils.js"></script> 78 <script src="../resources/subpixel-utils.js"></script>
85 <script> 79 <script>
86 genLeftRightRoundedRectFloatShapeOutsideRefTest({ 80 genLeftRightRoundedRectFloatShapeOutsideRefTest({
87 roundedRect: {x: 0, y: 20, width: 320, height: 160, rx: 160, ry: 80}, 81 roundedRect: {x: 0, y: 20, width: 320, height: 160, rx: 160, ry: 80},
88 containerWidth: 500, 82 containerWidth: 500,
89 containerHeight: 200, 83 containerHeight: 200,
90 lineHeight: 20, 84 lineHeight: 20,
91 floatElementClassSuffix: "ellipse-float-line", 85 floatElementClassSuffix: "ellipse-float-line",
92 insertElementIdSuffix: "ellipse-outline" 86 insertElementIdSuffix: "ellipse-outline"
93 }); 87 });
94 </script> 88 </script>
95 89
96 </html> 90 </body>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698