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

Side by Side Diff: LayoutTests/csswg/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-004-expected.html

Issue 23866007: Fix painting order for floats with shape-outside (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 7 years, 3 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 | Annotate | Revision Log
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <title>shape-outside-floats-rounded-rectangle-004-reference.html</title> 2 <title>shape-outside-floats-rounded-rectangle-004-reference.html</title>
3 <link rel="author" title="Adobe" href="http://html.adobe.com/">
3 <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com"> 4 <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
4 <meta name="flags" content="ahem dom"> 5 <meta name="flags" content="ahem dom">
5 <style> 6 <style>
6 .container { 7 .container {
7 position: relative; 8 position: relative;
8 font: 10px/1 Ahem, sans-serif; 9 font: 20px/1 Ahem, sans-serif;
9 width: 80px; 10 line-height: 20px;
10 height: 40px; 11 width: 160px;
11 border: 1px solid black; 12 height: 80px;
12 margin: 5px; 13 margin: 5px;
13 } 14 }
14 .rounded-rect { 15 .rounded-rect {
15 position: absolute; 16 position: absolute;
17 z-index: -1;
16 top: 0px; 18 top: 0px;
17 left: 0px; 19 left: 0px;
18 width: 40px; 20 width: 80px;
19 height: 40px; 21 height: 80px;
20 border: 1px solid blue; 22 border: 1px solid blue;
21 border-radius: 50%; 23 border-radius: 50%;
22 } 24 }
23 .left-rounded-rect-float-line { 25 .left-rounded-rect-float-line {
24 float: left; 26 float: left;
25 clear: left; 27 clear: left;
26 height: 10px; 28 height: 20px;
27 } 29 }
28 </style> 30 </style>
29 <body> 31 <body>
30 <div class="container"> 32 <div class="container">
31 <div id="left-fixed-units" class="rounded-rect"></div> 33 <div id="left-fixed-units" class="rounded-rect"></div>
32 X<br/> 34 X<br/>
33 X<br/> 35 X<br/>
34 X<br/> 36 X<br/>
35 X 37 X
36 </div> 38 </div>
(...skipping 14 matching lines...) Expand all
51 <div class="container"> 53 <div class="container">
52 <div id="left-edge-case" class="rounded-rect"></div> 54 <div id="left-edge-case" class="rounded-rect"></div>
53 X<br/> 55 X<br/>
54 X<br/> 56 X<br/>
55 X<br/> 57 X<br/>
56 X 58 X
57 </div> 59 </div>
58 <script src="resources/rounded-rectangle.js"></script> 60 <script src="resources/rounded-rectangle.js"></script>
59 <script src="resources/subpixel-utils.js"></script> 61 <script src="resources/subpixel-utils.js"></script>
60 <script> 62 <script>
61 // Note that the border must be added into the width to account for its
62 // affect on float positioning.
63 genLeftRoundedRectFloatShapeOutsideRefTest({ 63 genLeftRoundedRectFloatShapeOutsideRefTest({
64 roundedRect: {x: 0, y: 0, width: 41, height: 40, rx: 20, ry: 20}, 64 roundedRect: {x: 0, y: 0, width: 81, height: 80, rx: 40, ry: 40},
65 containerWidth: 80, 65 containerWidth: 160,
66 containerHeight: 40, 66 containerHeight: 80,
67 lineHeight: 10, 67 lineHeight: 20,
68 floatElementClassSuffix: "rounded-rect-float-line", 68 floatElementClassSuffix: "rounded-rect-float-line",
69 insertElementIdSuffix: "fixed-units" 69 insertElementIdSuffix: "fixed-units"
70 }); 70 });
71 genLeftRoundedRectFloatShapeOutsideRefTest({ 71 genLeftRoundedRectFloatShapeOutsideRefTest({
72 roundedRect: {x: 0, y: 0, width: 41, height: 40, rx: 20, ry: 20}, 72 roundedRect: {x: 0, y: 0, width: 81, height: 80, rx: 40, ry: 40},
73 containerWidth: 80, 73 containerWidth: 160,
74 containerHeight: 40, 74 containerHeight: 80,
75 lineHeight: 10, 75 lineHeight: 20,
76 floatElementClassSuffix: "rounded-rect-float-line", 76 floatElementClassSuffix: "rounded-rect-float-line",
77 insertElementIdSuffix: "relative-units" 77 insertElementIdSuffix: "relative-units"
78 }); 78 });
79 genLeftRoundedRectFloatShapeOutsideRefTest({ 79 genLeftRoundedRectFloatShapeOutsideRefTest({
80 roundedRect: {x: 0, y: 0, width: 41, height: 40, rx: 20, ry: 20}, 80 roundedRect: {x: 0, y: 0, width: 81, height: 80, rx: 40, ry: 40},
81 containerWidth: 80, 81 containerWidth: 160,
82 containerHeight: 40, 82 containerHeight: 80,
83 lineHeight: 10, 83 lineHeight: 20,
84 floatElementClassSuffix: "rounded-rect-float-line", 84 floatElementClassSuffix: "rounded-rect-float-line",
85 insertElementIdSuffix: "different-units" 85 insertElementIdSuffix: "different-units"
86 }); 86 });
87 genLeftRoundedRectFloatShapeOutsideRefTest({ 87 genLeftRoundedRectFloatShapeOutsideRefTest({
88 roundedRect: {x: 0, y: 0, width: 41, height: 40, rx: 20, ry: 20}, 88 roundedRect: {x: 0, y: 0, width: 81, height: 80, rx: 40, ry: 40},
89 containerWidth: 80, 89 containerWidth: 160,
90 containerHeight: 40, 90 containerHeight: 80,
91 lineHeight: 10, 91 lineHeight: 20,
92 floatElementClassSuffix: "rounded-rect-float-line", 92 floatElementClassSuffix: "rounded-rect-float-line",
93 insertElementIdSuffix: "edge-case" 93 insertElementIdSuffix: "edge-case"
94 }); 94 });
95 </script> 95 </script>
96 </body> 96 </body>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698