[CSS Shapes] Floats with shape-outside aren't painting in the correct order
[WebKit-https.git] / LayoutTests / csswg / submitted / shapes / shape-outside / shape-outside-floats-rounded-rectangle-004-expected.html
index d00b524..cd64fc9 100644 (file)
@@ -1,29 +1,31 @@
 <!DOCTYPE html>
 <title>shape-outside-floats-rounded-rectangle-004-reference.html</title>
+<link rel="author" title="Adobe" href="http://html.adobe.com/">
 <link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
 <meta name="flags" content="ahem dom">
 <style>
 .container {
     position: relative;
-    font: 10px/1 Ahem, sans-serif;
-    width: 80px;
-    height: 40px;
-    border: 1px solid black;
+    font: 20px/1 Ahem, sans-serif;
+    line-height: 20px;
+    width: 160px;
+    height: 80px;
     margin: 5px;
 }
 .rounded-rect {
     position: absolute;
+    z-index: -1;
     top: 0px;
     left: 0px;
-    width: 40px;
-    height: 40px;
+    width: 80px;
+    height: 80px;
     border: 1px solid blue;
     border-radius: 50%;
 }
 .left-rounded-rect-float-line {
     float: left;
     clear: left;
-    height: 10px;
+    height: 20px;
 }
 </style>
 <body>
     <script src="resources/rounded-rectangle.js"></script>
     <script src="resources/subpixel-utils.js"></script>
     <script>
-    // Note that the border must be added into the width to account for its
-    // affect on float positioning.
     genLeftRoundedRectFloatShapeOutsideRefTest({
-        roundedRect: {x: 0, y: 0, width: 41, height: 40, rx: 20, ry: 20},
-        containerWidth: 80, 
-        containerHeight: 40,
-        lineHeight: 10,
+        roundedRect: {x: 0, y: 0, width: 81, height: 80, rx: 40, ry: 40},
+        containerWidth: 160,
+        containerHeight: 80,
+        lineHeight: 20,
         floatElementClassSuffix: "rounded-rect-float-line",
         insertElementIdSuffix: "fixed-units"
     });
     genLeftRoundedRectFloatShapeOutsideRefTest({
-        roundedRect: {x: 0, y: 0, width: 41, height: 40, rx: 20, ry: 20},
-        containerWidth: 80, 
-        containerHeight: 40,
-        lineHeight: 10,
+        roundedRect: {x: 0, y: 0, width: 81, height: 80, rx: 40, ry: 40},
+        containerWidth: 160,
+        containerHeight: 80,
+        lineHeight: 20,
         floatElementClassSuffix: "rounded-rect-float-line",
         insertElementIdSuffix: "relative-units"
     });
     genLeftRoundedRectFloatShapeOutsideRefTest({
-        roundedRect: {x: 0, y: 0, width: 41, height: 40, rx: 20, ry: 20},
-        containerWidth: 80, 
-        containerHeight: 40,
-        lineHeight: 10,
+        roundedRect: {x: 0, y: 0, width: 81, height: 80, rx: 40, ry: 40},
+        containerWidth: 160,
+        containerHeight: 80,
+        lineHeight: 20,
         floatElementClassSuffix: "rounded-rect-float-line",
         insertElementIdSuffix: "different-units"
     });
     genLeftRoundedRectFloatShapeOutsideRefTest({
-        roundedRect: {x: 0, y: 0, width: 41, height: 40, rx: 20, ry: 20},
-        containerWidth: 80, 
-        containerHeight: 40,
-        lineHeight: 10,
+        roundedRect: {x: 0, y: 0, width: 81, height: 80, rx: 40, ry: 40},
+        containerWidth: 160,
+        containerHeight: 80,
+        lineHeight: 20,
         floatElementClassSuffix: "rounded-rect-float-line",
         insertElementIdSuffix: "edge-case"
     });