Auto merge of #7679 - bjwbell:reftest-twitter-fail-whale, r=pcwalton

Add css twitter fail whale html test & update ellipse_to_bezier comment

cgaebel had a TODO for a css twitter fail whale reftest, which depended on elliptical border-radius support.
I didn't see any feasible way other than a reference image for border_twitter_fail_whale_b.html.

r? @pcwalton

<!-- Reviewable:start -->
[<img src="https://reviewable.io/review_button.png" height=40 alt="Review on Reviewable"/>](https://reviewable.io/reviews/servo/servo/7679)
<!-- Reviewable:end -->

2 files changed, 1430 insertions, 81 deletions

diff --git a/components/gfx/paint_context.rs b/components/gfx/paint_context.rs
index 62ac45bab79..ab258e2ef6e 100644
--- a/components/gfx/paint_context.rs
+++ b/components/gfx/paint_context.rs
@@ -484,7 +484,81 @@ impl<'a> PaintContext<'a> {
         radius.width <= 0. || radius.height <= 0.
     }
 
-    // Adapted from gecko:gfx/2d/PathHelpers.h:EllipseToBezier
+    // The following comment is wonderful, and stolen from
+    // gecko:gfx/thebes/gfxContext.cpp:RoundedRectangle for reference.
+    // ---------------------------------------------------------------
+    //
+    // For CW drawing, this looks like:
+    //
+    //  ...******0**      1    C
+    //              ****
+    //                  ***    2
+    //                     **
+    //                       *
+    //                        *
+    //                         3
+    //                         *
+    //                         *
+    //
+    // Where 0, 1, 2, 3 are the control points of the Bezier curve for
+    // the corner, and C is the actual corner point.
+    //
+    // At the start of the loop, the current point is assumed to be
+    // the point adjacent to the top left corner on the top
+    // horizontal.  Note that corner indices start at the top left and
+    // continue clockwise, whereas in our loop i = 0 refers to the top
+    // right corner.
+    //
+    // When going CCW, the control points are swapped, and the first
+    // corner that's drawn is the top left (along with the top segment).
+    //
+    // There is considerable latitude in how one chooses the four
+    // control points for a Bezier curve approximation to an ellipse.
+    // For the overall path to be continuous and show no corner at the
+    // endpoints of the arc, points 0 and 3 must be at the ends of the
+    // straight segments of the rectangle; points 0, 1, and C must be
+    // collinear; and points 3, 2, and C must also be collinear.  This
+    // leaves only two free parameters: the ratio of the line segments
+    // 01 and 0C, and the ratio of the line segments 32 and 3C.  See
+    // the following papers for extensive discussion of how to choose
+    // these ratios:
+    //
+    //   Dokken, Tor, et al. "Good approximation of circles by
+    //      curvature-continuous Bezier curves."  Computer-Aided
+    //      Geometric Design 7(1990) 33--41.
+    //   Goldapp, Michael. "Approximation of circular arcs by cubic
+    //      polynomials." Computer-Aided Geometric Design 8(1991) 227--238.
+    //   Maisonobe, Luc. "Drawing an elliptical arc using polylines,
+    //      quadratic, or cubic Bezier curves."
+    //      http://www.spaceroots.org/documents/ellipse/elliptical-arc.pdf
+    //
+    // We follow the approach in section 2 of Goldapp (least-error,
+    // Hermite-type approximation) and make both ratios equal to
+    //
+    //          2   2 + n - sqrt(2n + 28)
+    //  alpha = - * ---------------------
+    //          3           n - 4
+    //
+    // where n = 3( cbrt(sqrt(2)+1) - cbrt(sqrt(2)-1) ).
+    //
+    // This is the result of Goldapp's equation (10b) when the angle
+    // swept out by the arc is pi/2, and the parameter "a-bar" is the
+    // expression given immediately below equation (21).
+    //
+    // Using this value, the maximum radial error for a circle, as a
+    // fraction of the radius, is on the order of 0.2 x 10^-3.
+    // Neither Dokken nor Goldapp discusses error for a general
+    // ellipse; Maisonobe does, but his choice of control points
+    // follows different constraints, and Goldapp's expression for
+    // 'alpha' gives much smaller radial error, even for very flat
+    // ellipses, than Maisonobe's equivalent.
+    //
+    // For the various corners and for each axis, the sign of this
+    // constant changes, or it might be 0 -- it's multiplied by the
+    // appropriate multiplier from the list before using.
+    // ---------------------------------------------------------------
+    //
+    // Code adapted from gecko:gfx/2d/PathHelpers.h:EllipseToBezier
     fn ellipse_to_bezier(path_builder: &mut PathBuilder,
                          origin: Point2D<AzFloat>,
                          radius: Size2D<AzFloat>,
@@ -629,86 +703,6 @@ impl<'a> PaintContext<'a> {
         }
     }
 
-    // The following comment is wonderful, and stolen from
-    // gecko:gfx/thebes/gfxContext.cpp:RoundedRectangle for reference.
-    //
-    // It does not currently apply to the code, but will be extremely useful in
-    // the future when the below TODO is addressed.
-    //
-    // TODO(cgaebel): Switch from arcs to beziers for drawing the corners.
-    //                Then, add http://www.subcide.com/experiments/fail-whale/
-    //                to the reftest suite.
-    //
-    // ---------------------------------------------------------------
-    //
-    // For CW drawing, this looks like:
-    //
-    //  ...******0**      1    C
-    //              ****
-    //                  ***    2
-    //                     **
-    //                       *
-    //                        *
-    //                         3
-    //                         *
-    //                         *
-    //
-    // Where 0, 1, 2, 3 are the control points of the Bezier curve for
-    // the corner, and C is the actual corner point.
-    //
-    // At the start of the loop, the current point is assumed to be
-    // the point adjacent to the top left corner on the top
-    // horizontal.  Note that corner indices start at the top left and
-    // continue clockwise, whereas in our loop i = 0 refers to the top
-    // right corner.
-    //
-    // When going CCW, the control points are swapped, and the first
-    // corner that's drawn is the top left (along with the top segment).
-    //
-    // There is considerable latitude in how one chooses the four
-    // control points for a Bezier curve approximation to an ellipse.
-    // For the overall path to be continuous and show no corner at the
-    // endpoints of the arc, points 0 and 3 must be at the ends of the
-    // straight segments of the rectangle; points 0, 1, and C must be
-    // collinear; and points 3, 2, and C must also be collinear.  This
-    // leaves only two free parameters: the ratio of the line segments
-    // 01 and 0C, and the ratio of the line segments 32 and 3C.  See
-    // the following papers for extensive discussion of how to choose
-    // these ratios:
-    //
-    //   Dokken, Tor, et al. "Good approximation of circles by
-    //      curvature-continuous Bezier curves."  Computer-Aided
-    //      Geometric Design 7(1990) 33--41.
-    //   Goldapp, Michael. "Approximation of circular arcs by cubic
-    //      polynomials." Computer-Aided Geometric Design 8(1991) 227--238.
-    //   Maisonobe, Luc. "Drawing an elliptical arc using polylines,
-    //      quadratic, or cubic Bezier curves."
-    //      http://www.spaceroots.org/documents/ellipse/elliptical-arc.pdf
-    //
-    // We follow the approach in section 2 of Goldapp (least-error,
-    // Hermite-type approximation) and make both ratios equal to
-    //
-    //          2   2 + n - sqrt(2n + 28)
-    //  alpha = - * ---------------------
-    //          3           n - 4
-    //
-    // where n = 3( cbrt(sqrt(2)+1) - cbrt(sqrt(2)-1) ).
-    //
-    // This is the result of Goldapp's equation (10b) when the angle
-    // swept out by the arc is pi/2, and the parameter "a-bar" is the
-    // expression given immediately below equation (21).
-    //
-    // Using this value, the maximum radial error for a circle, as a
-    // fraction of the radius, is on the order of 0.2 x 10^-3.
-    // Neither Dokken nor Goldapp discusses error for a general
-    // ellipse; Maisonobe does, but his choice of control points
-    // follows different constraints, and Goldapp's expression for
-    // 'alpha' gives much smaller radial error, even for very flat
-    // ellipses, than Maisonobe's equivalent.
-    //
-    // For the various corners and for each axis, the sign of this
-    // constant changes, or it might be 0 -- it's multiplied by the
-    // appropriate multiplier from the list before using.
     #[allow(non_snake_case)]
     fn create_border_path_segment(&self,
                                   path_builder: &mut PathBuilder,
diff --git a/tests/html/border_twitter_fail_whale.html b/tests/html/border_twitter_fail_whale.html
new file mode 100644
index 00000000000..c34a836427e
--- /dev/null
+++ b/tests/html/border_twitter_fail_whale.html
@@ -0,0 +1,1355 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>Pure CSS Twitter Fail Whale - By Steve Dennis (http://www.subcide.com/experiments/fail-whale/)</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+</head>
+<body>
+    <style type="text/css">
+		body {
+			margin: 0;
+			padding: 40px;
+			background: #fff;
+		}
+
+		.credit {
+			font-family: Arial, Sans-serif;
+			font-size: 12px;
+			position: absolute;
+			top: 406px;
+			left: 474px;
+		}
+
+		#failwhale {
+			padding-top: 15px;
+			background: #6cc5c3;
+			overflow: hidden;
+			position: relative;
+			height: 300px;
+			width: 690px;
+			margin-bottom: 15px;
+			border-radius: 6px;
+		}
+
+		#air {
+			position: relative;
+			left: 140px;
+			-o-transition-property: top;
+			-o-transition-duration: 4s;
+		}
+
+		#whale {
+			display: ;
+			position: absolute;
+			top: 0;
+			left: 0;
+		}
+
+		#whale div {
+			position: absolute;
+			background: #fff;
+			z-index: 10;
+		}
+
+		#whale1 {
+			width: 55px;
+			height: 63px;
+			top: 145px;
+			left: 72px;
+			border-top-left-radius: 53px 63px;
+		}
+
+		#whale2 {
+			width: 95px;
+			height: 63px;
+			top: 145px;
+			left: 127px;
+			border-top-right-radius: 98px 70px;
+		}
+
+		#whale3-crop {
+			overflow: hidden;
+			background: transparent !important;
+			width: 140px;
+			height: 31px;
+			top: 208px;
+			left: 72px;
+		}
+
+		#whale3 {
+			width: 147px;
+			height: 51px;
+			top: -15px;
+			left: -6px;
+			border-bottom-left-radius: 230px 75px;
+		}
+
+		#whale4 {
+			background: #6cc5c3 !important;
+			z-index: 9 !important;
+			width: 135px;
+			height: 31px;
+			top: 208px;
+			left: 71px;
+			border-bottom-left-radius: 250px 100px;
+			border-bottom-right-radius: 150px 90px;
+		}
+
+		#whale5crop {
+			background: transparent !important;
+			overflow: hidden;
+			z-index: 8 !important;
+			width: 148px;
+			height: 64px;
+			top: 208px;
+			left: 74px;
+		}
+
+		#whale5 {
+			z-index: 8 !important;
+			width: 347px;
+			height: 66px;
+			top: 0px;
+			left: 0;
+			border-bottom-left-radius: 550px 170px;
+		}
+
+		#eye1 {
+			background: #6cc5c3 !important;
+			width: 20px;
+			height: 20px;
+			top: 204px;
+			left: 137px;
+			border-radius: 60px;
+		}
+
+		#eye2 {
+			width: 30px;
+			height: 30px;
+			top: 191px;
+			left: 133px;
+			border-radius: 60px;
+		}
+
+		#whale6 {
+			width: 91px;
+			height: 52px;
+			top: 219px;
+			left: 200px;
+			border-bottom-left-radius: 40px 10px;
+			border-bottom-right-radius:80px 80px;
+		}
+
+		#whale7 {
+			background: #6cc5c3 !important;
+			width: 60px;
+			height: 30px;
+			top: 219px;
+			left: 222px;
+			border-bottom-left-radius: 80px 80px;
+			border-bottom-right-radius:70px 70px;
+			border-top-right-radius: 15px 15px;
+		}
+
+		#whaletail1 {
+			width: 55px;
+			height: 33px;
+			top: 186px;
+			left: 237px;
+			border-bottom-left-radius: 80px 80px;
+			border-top-right-radius:50px 50px;
+		}
+
+		#whaletail2 {
+			width: 33px;
+			height: 39px;
+			top: 147px;
+			left: 237px;
+			border-top-left-radius: 60px 70px;
+		}
+
+		#whaletail3 {
+			background: #6cc5c3 !important;
+			width: 33px;
+			height: 42px;
+			top: 144px;
+			left: 252px;
+			border-top-left-radius: 60px 70px;
+			border-bottom-left-radius: 60px 70px;
+		}
+
+		#whaletail4 {
+			width: 37px;
+			height: 32px;
+			top: 195px;
+			left: 289px;
+			border-top-left-radius: 70px 70px;
+			border-top-right-radius: 70px 70px;
+		}
+
+		#whaletail5 {
+			background: #6cc5c3 !important;
+			z-index: 11 !important;
+			width: 32px;
+			height: 35px;
+			top: 169px;
+			left: 315px;
+			border-bottom-left-radius: 70px 70px;
+			border-bottom-right-radius: 70px 100px;
+		}
+
+		#whaletail6 {
+			width: 58px;
+			height: 33px;
+			top: 201px;
+			left: 294px;
+			border-top-left-radius: 70px 70px;
+			border-bottom-left-radius: 90px 70px;
+			border-bottom-right-radius: 140px 140px;
+		}
+
+		#whaletail7 {
+			width: 18px;
+			height: 32px;
+			top: 169px;
+			left: 334px;
+			border-top-right-radius: 60px 100px;
+		}
+
+		#whaletail8 {
+			background: #6cc5c3 !important;
+			z-index: 11 !important;
+			width: 10px;
+			height: 10px;
+			top: 225px;
+			left: 289px;
+			border-top-right-radius: 60px 60px;
+			border-top-left-radius: 40px 60px;
+		}
+
+		.right div,
+		.left div {
+			position: absolute;
+			opacity: 1;
+			z-index: 20;
+			background: #f15a22;
+		}
+
+		.right,
+		.left {
+			position: absolute;
+			background: transparent !important;
+			width: 33px;
+			height: 30px;
+		}
+
+		.right .body1 {
+			top: 10px;
+			left: 1px;
+			width: 16px;
+			height: 19px;
+			border-bottom-left-radius: 50px 60px;
+		}
+
+		.right .body2 {
+			top: 17px;
+			left: 17px;
+			width: 12px;
+			height: 12px;
+			border-bottom-right-radius: 50px 50px;
+		}
+
+		.right .body3 {
+			top: 12px;
+			left: 19px;
+			width: 13px;
+			height: 9px;
+			border-top-right-radius: 50px 50px;
+			border-top-left-radius: 50px 50px;
+		}
+
+		.right .body4 {
+			background: #6cc5c3 !important;
+			z-index: 21 !important;
+			top: 1px;
+			left: 0px;
+			width: 26px;
+			height: 16px;
+			border-bottom-right-radius: 50px 50px;
+			border-bottom-left-radius: 50px 50px;
+		}
+
+		.right .body5 {
+			background: transparent !important;
+			top: 12px;
+			left: 22px;
+			width: 4px;
+			height: 1px;
+			border: 4px solid transparent;
+			border-bottom: 4px solid #f15a22;
+		}
+
+		.right .eye {
+			background: #fff !important;
+			top: 15px;
+			left: 26px;
+			width: 3px;
+			height: 3px;
+			border-radius: 2px;
+		}
+
+		.right .wing {
+			background: transparent !important;
+			z-index: 22 !important;
+			width: 15px;
+			height: 18px;
+			bottom: 4px;
+			left: 8px;
+		}
+
+		.right .wing1 {
+			width: 12px;
+			height: 12px;
+			border-radius: 6px;
+		}
+
+		.right .wing2 {
+			width: 4px;
+			height: 12px;
+			margin-top: -6px;
+			border-top-left-radius: 5px 15px;
+		}
+
+		.right .wing3crop {
+			background: transparent !important;
+			overflow: hidden;
+			width: 4px;
+			height: 8px;
+			margin-top: -6px;
+			margin-left: 4px;
+		}
+
+		.right .wing3 {
+			background: transparent !important;
+			width: 10px;
+			height: 10px;
+			margin-top: -8px;
+			margin-left: -4px;
+			border: 4px solid #f15a22;
+			border-radius: 12px;
+		}
+
+		.right .wing4 {
+			background: #fff;
+			width: 6px;
+			height: 7px;
+			margin-left: 3px;
+			margin-top: 3px;
+			border-radius: 2px 6px;
+		}
+
+		/* Bird other way */
+
+		.left .body1 {
+			top: 10px;
+			right: 1px;
+			width: 16px;
+			height: 19px;
+			border-bottom-right-radius: 50px 60px;
+		}
+
+		.left .body2 {
+			top: 17px;
+			right: 17px;
+			width: 12px;
+			height: 12px;
+			border-bottom-left-radius: 50px 50px;
+		}
+
+		.left .body3 {
+			top: 12px;
+			right: 19px;
+			width: 13px;
+			height: 9px;
+			border-top-left-radius: 50px 50px;
+			border-top-right-radius: 50px 50px;
+		}
+
+		.left .body4 {
+			background: #6cc5c3 !important;
+			z-index: 21 !important;
+			top: 1px;
+			right: 0px;
+			width: 26px;
+			height: 16px;
+			border-bottom-left-radius: 50px 50px;
+			border-bottom-right-radius: 50px 50px;
+		}
+
+		.left .body5 {
+			background: transparent !important;
+			top: 12px;
+			right: 22px;
+			width: 4px;
+			height: 1px;
+			border: 4px solid transparent;
+			border-bottom: 4px solid #f15a22;
+		}
+
+		.left .eye {
+			background: #fff !important;
+			top: 15px;
+			right: 26px;
+			width: 3px;
+			height: 3px;
+			border-radius: 2px;
+		}
+
+		.left .wing {
+			background: transparent !important;
+			z-index: 22 !important;
+			width: 15px;
+			height: 18px;
+			bottom: 4px;
+			right: 5px;
+		}
+
+		.left .wing1 {
+			width: 12px;
+			height: 12px;
+			border-radius: 6px;
+		}
+
+		.left .wing2 {
+			width: 4px;
+			height: 12px;
+			margin-top: -6px;
+			margin-left: 8px;
+			border-top-right-radius: 5px 15px;
+		}
+
+		.left .wing3crop {
+			background: transparent !important;
+			overflow: hidden;
+			width: 4px;
+			height: 8px;
+			margin-top: -6px;
+			margin-left: 4px;
+		}
+
+		.left .wing3 {
+			background: transparent !important;
+			width: 10px;
+			height: 10px;
+			margin-top: -8px;
+			margin-left: -10px;
+			border: 4px solid #f15a22;
+			border-radius: 12px;
+		}
+
+		.left .wing4 {
+			background: #fff;
+			width: 6px;
+			height: 7px;
+			margin-left: 3px;
+			margin-top: 3px;
+			border-radius: 6px 2px;
+		}
+
+		.rope1crop {
+			z-index: 5 !important;
+			position: absolute;
+			overflow: hidden;
+			top: 40px;
+			left: 94px;
+			height: 150px;
+			width: 10px;
+		}
+
+		.rope1 {
+			position: absolute;
+			border: 1px solid #fff;
+			height: 150px;
+			width: 20px;
+			border-top-left-radius: 50px 200px;
+			border-bottom-left-radius: 50px 200px;
+		}
+
+		.rope2crop {
+			z-index: 5 !important;
+			position: absolute;
+			overflow: hidden;
+			top: 17px;
+			left: 129px;
+			height: 190px;
+			width: 15px;
+		}
+
+		.rope2 {
+			position: absolute;
+			border: 1px solid #fff;
+			height: 190px;
+			width: 28px;
+			border-top-left-radius: 50px 200px;
+			border-bottom-left-radius: 50px 200px;
+		}
+
+		.rope3crop {
+			z-index: 5 !important;
+			position: absolute;
+			overflow: hidden;
+			top: 31px;
+			left: 152px;
+			height: 190px;
+			width: 22px;
+		}
+
+		.rope3 {
+			position: absolute;
+			border: 1px solid #fff;
+			height: 250px;
+			width: 50px;
+			border-top-left-radius: 50px 200px;
+			border-bottom-left-radius: 50px 200px;
+		}
+
+		.rope4crop {
+			z-index: 12 !important;
+			position: absolute;
+			overflow: hidden;
+			top: 156px;
+			left: 209px;
+			height: 90px;
+			width: 72px;
+		}
+
+		.rope4 {
+			position: absolute;
+			border: 1px solid #fff;
+			height: 150px;
+			width: 120px;
+			right: 0;
+			top: -40px;
+			border-bottom-right-radius: 120px 200px;
+		}
+
+		.rope5crop {
+			z-index: 12 !important;
+			position: absolute;
+			overflow: hidden;
+			top: 113px;
+			left: 179px;
+			height: 156px;
+			width: 72px;
+		}
+
+		.rope5 {
+			position: absolute;
+			border: 1px solid #fff;
+			height: 200px;
+			width: 120px;
+			right: 0;
+			top: -1px;
+			border-bottom-right-radius: 150px 250px;
+		}
+
+		.rope5acrop {
+			z-index: 12 !important;
+			position: absolute;
+			overflow: hidden;
+			top: 234px;
+			left: 179px;
+			height: 35px;
+			width: 72px;
+		}
+
+		.rope5a {
+			position: absolute;
+			border: 1px solid #6cc5c3;
+			height: 200px;
+			width: 120px;
+			right: 0;
+			top: -122px;
+			border-bottom-right-radius: 150px 250px;
+		}
+
+		.rope6crop {
+			z-index: 12 !important;
+			position: absolute;
+			overflow: hidden;
+			top: 66px;
+			left: 139px;
+			height: 198px;
+			width: 92px;
+		}
+
+		.rope6 {
+			position: absolute;
+			border: 1px solid #fff;
+			height: 250px;
+			width: 143px;
+			right: 0;
+			top: -1px;
+			border-bottom-right-radius: 160px 290px;
+		}
+
+		.rope6acrop {
+			z-index: 12 !important;
+			position: absolute;
+			overflow: hidden;
+			top: 181px;
+			left: 139px;
+			height: 83px;
+			width: 92px;
+		}
+
+		.rope6a {
+			position: absolute;
+			border: 1px solid #6cc5c3;
+			height: 250px;
+			width: 143px;
+			right: 0;
+			top: -116px;
+			border-bottom-right-radius: 160px 290px;
+		}
+
+		.rope7crop {
+			z-index: 12 !important;
+			position: absolute;
+			overflow: hidden;
+			top: 86px;
+			left: 118px;
+			height: 172px;
+			width: 92px;
+		}
+
+		.rope7 {
+			position: absolute;
+			border: 1px solid #fff;
+			height: 250px;
+			width: 133px;
+			right: 0;
+			top: -40px;
+			border-bottom-right-radius: 160px 290px;
+		}
+
+		.rope7acrop {
+			z-index: 12 !important;
+			position: absolute;
+			overflow: hidden;
+			top: 163px;
+			left: 118px;
+			height: 172px;
+			width: 92px;
+		}
+
+		.rope7a {
+			position: absolute;
+			border: 1px solid #6cc5c3;
+			height: 250px;
+			width: 133px;
+			right: 0;
+			top: -117px;
+			border-bottom-right-radius: 160px 290px;
+		}
+
+		.rope8crop {
+			z-index: 12 !important;
+			position: absolute;
+			overflow: hidden;
+			top: 229px;
+			left: 157px;
+			height: 30px;
+			width: 27px;
+		}
+
+		.rope8 {
+			position: absolute;
+			border: 1px solid #6cc5c3;
+			height: 25px;
+			width: 50px;
+			right: -17px;
+			top: -1px;
+			border-bottom-right-radius: 100px 100px;
+			border-bottom-left-radius: 100px 100px;
+		}
+
+		.rope9crop {
+			z-index: 12 !important;
+			position: absolute;
+			overflow: hidden;
+			top: 213px;
+			left: 167px;
+			height: 30px;
+			width: 26px;
+		}
+
+		.rope9 {
+			position: absolute;
+			border: 1px solid #6cc5c3;
+			height: 25px;
+			width: 50px;
+			right: -17px;
+			top: -1px;
+			border-bottom-right-radius: 100px 100px;
+			border-bottom-left-radius: 100px 100px;
+		}
+
+		.rope10crop {
+			z-index: 12 !important;
+			position: absolute;
+			overflow: hidden;
+			top: 221px;
+			left: 162px;
+			height: 30px;
+			width: 27px;
+		}
+
+		.rope10 {
+			position: absolute;
+			border: 1px solid #6cc5c3;
+			height: 25px;
+			width: 50px;
+			right: -17px;
+			top: -1px;
+			border-bottom-right-radius: 100px 100px;
+			border-bottom-left-radius: 100px 100px;
+		}
+
+		.rope11crop {
+			z-index: 12 !important;
+			position: absolute;
+			overflow: hidden;
+			top: 220px;
+			left: 193px;
+			height: 30px;
+			width: 28px;
+		}
+
+		.rope11 {
+			position: absolute;
+			border: 1px solid #6cc5c3;
+			height: 25px;
+			width: 50px;
+			right: -17px;
+			top: -1px;
+			border-bottom-right-radius: 100px 100px;
+			border-bottom-left-radius: 100px 100px;
+		}
+
+		.rope12crop {
+			z-index: 12 !important;
+			position: absolute;
+			overflow: hidden;
+			top: 228px;
+			left: 189px;
+			height: 30px;
+			width: 28px;
+		}
+
+		.rope12 {
+			position: absolute;
+			border: 1px solid #6cc5c3;
+			height: 25px;
+			width: 50px;
+			right: -17px;
+			top: -1px;
+			border-bottom-right-radius: 100px 100px;
+			border-bottom-left-radius: 100px 100px;
+		}
+
+		.rope13crop {
+			z-index: 12 !important;
+			position: absolute;
+			overflow: hidden;
+			top: 236px;
+			left: 184px;
+			height: 30px;
+			width: 28px;
+		}
+
+		.rope13 {
+			position: absolute;
+			border: 1px solid #6cc5c3;
+			height: 25px;
+			width: 50px;
+			right: -17px;
+			top: -1px;
+			border-bottom-right-radius: 100px 100px;
+			border-bottom-left-radius: 100px 100px;
+		}
+
+		.rope14crop {
+			z-index: 12 !important;
+			position: absolute;
+			overflow: hidden;
+			top: 240px;
+			left: 212px;
+			height: 30px;
+			width: 28px;
+		}
+
+		.rope14 {
+			position: absolute;
+			border: 1px solid #6cc5c3;
+			height: 25px;
+			width: 50px;
+			right: -13px;
+			top: -1px;
+			border-bottom-right-radius: 100px 100px;
+			border-bottom-left-radius: 100px 100px;
+		}
+
+		.rope15crop {
+			z-index: 12 !important;
+			position: absolute;
+			overflow: hidden;
+			top: 233px;
+			left: 216px;
+			height: 30px;
+			width: 26px;
+		}
+
+		.rope15 {
+			position: absolute;
+			border: 1px solid #6cc5c3;
+			height: 25px;
+			width: 50px;
+			right: -17px;
+			top: -1px;
+			border-bottom-right-radius: 100px 100px;
+			border-bottom-left-radius: 100px 100px;
+		}
+
+		.rope16crop {
+			z-index: 12 !important;
+			position: absolute;
+			overflow: hidden;
+			top: 227px;
+			left: 221px;
+			height: 30px;
+			width: 28px;
+		}
+
+		.rope16 {
+			position: absolute;
+			border: 1px solid #6cc5c3;
+			height: 25px;
+			width: 50px;
+			right: -17px;
+			top: -1px;
+			border-bottom-right-radius: 100px 100px;
+			border-bottom-left-radius: 100px 100px;
+		}
+
+		.rope17crop {
+			z-index: 12 !important;
+			position: absolute;
+			overflow: hidden;
+			top: 250px;
+			left: 239px;
+			height: 60px;
+			width: 26px;
+		}
+
+		.rope17 {
+			position: absolute;
+			border: 1px solid #6cc5c3;
+			height: 25px;
+			width: 35px;
+			right: -18px;
+			top: -11px;
+			border-bottom-left-radius: 100px 100px;
+		}
+
+		.rope18crop {
+			z-index: 12 !important;
+			position: absolute;
+			overflow: hidden;
+			top: 251px;
+			left: 242px;
+			height: 30px;
+			width: 14px;
+		}
+
+		.rope18 {
+			position: absolute;
+			border: 1px solid #6cc5c3;
+			height: 10px;
+			width: 20px;
+			right: -6px;
+			top: -1px;
+			border-bottom-right-radius: 100px 100px;
+			border-bottom-left-radius: 100px 100px;
+		}
+
+		.rope19crop {
+			z-index: 12 !important;
+			position: absolute;
+			overflow: hidden;
+			top: 257px;
+			left: 240px;
+			height: 30px;
+			width: 18px;
+		}
+
+		.rope19 {
+			position: absolute;
+			border: 1px solid #6cc5c3;
+			height: 10px;
+			width: 20px;
+			right: -2px;
+			top: -1px;
+			border-bottom-right-radius: 100px 100px;
+			border-bottom-left-radius: 100px 100px;
+		}
+
+		.rope20crop {
+			z-index: 11 !important;
+			position: absolute;
+			overflow: hidden;
+			top: 41px;
+			left: 250px;
+			height: 210px;
+			width: 44px;
+		}
+
+		.rope20 {
+			position: absolute;
+			border: 1px solid #fff;
+			height: 250px;
+			width: 70px;
+			border-top-left-radius: 70px 200px;
+		}
+
+		.waves {
+			position: absolute;
+			height: 40px;
+			bottom: -15px;
+			left: 0;
+			width: 100%;
+		}
+
+		.fore {
+			z-index: 20;
+		}
+
+		.back {
+			position: absolute;
+			left: 0;
+			z-index: 11;
+		}
+
+		.fore .waveleft .inner {
+			border-color: #f15a22;
+			border-style: solid;
+		}
+
+		.fore .waveright .inner {
+			border-color: #f15a22;
+			border-style: solid;
+		}
+
+		.back .waveleft .inner {
+			border-color: #fff;
+			border-style: solid;
+		}
+
+		.back .waveright .inner {
+			border-color: #fff;
+			border-style: solid;
+		}
+
+		.waveleft {
+			float: left;
+			position: relative;
+			overflow: hidden;
+			width: 30px;
+			height: 30px;
+		}
+
+		.waveleft .inner {
+			position: absolute;
+			top: -45px;
+			left: -34px;
+			width: 60px;
+			height: 30px;
+			border-width: 30px;
+			border-radius: 60px 120px;
+		}
+
+		.waveright {
+			float: left;
+			position: relative;
+			overflow: hidden;
+			width: 30px;
+			height: 30px;
+		}
+
+		.waveright .inner {
+			position: absolute;
+			top: -45px;
+			left: -56px;
+			width: 60px;
+			height: 30px;
+			border-width: 30px;
+			border-radius: 120px 60px;
+		}
+
+		#wavecontainer {
+			position: absolute;
+			width: 100%;
+			height: 30px;
+			bottom: 0;
+			overflow: hidden;
+			margin-left: 0px;
+			z-index: 30;
+		}
+
+		h1 {
+			font-family: Arial, Helvetica, Sans-serif;
+			font-size: 18px;
+			color: #f15a22;
+			font-weight: normal;
+		}
+
+		.return {
+			font-family: Arial, Helvetica, Sans-serif;
+			font-size: 12px;
+			color: #6cc5c3;
+		}
+
+		.flattr {
+			position: absolute;
+			left: 740px;
+			top: 85px;
+		}
+		</style>
+                <h1>Pure CSS Twitter 'Fail Whale' by Steve Dennis (http://www.subcide.com/experiments/fail-whale/).</h1>
+	        <div id="failwhale">
+		<div id="air">
+			<div class="rope1crop">
+				<div class="rope1"></div>
+			</div>
+
+			<div class="rope2crop">
+				<div class="rope2"></div>
+			</div>
+
+			<div class="rope3crop">
+				<div class="rope3"></div>
+			</div>
+
+			<div class="rope4crop">
+				<div class="rope4"></div>
+			</div>
+
+			<div class="rope5crop">
+				<div class="rope5"></div>
+			</div>
+
+			<div class="rope5acrop">
+				<div class="rope5a"></div>
+			</div>
+
+			<div class="rope6crop">
+				<div class="rope6"></div>
+			</div>
+
+			<div class="rope6acrop">
+				<div class="rope6a"></div>
+			</div>
+
+			<div class="rope7crop">
+				<div class="rope7"></div>
+			</div>
+
+			<div class="rope7acrop">
+				<div class="rope7a"></div>
+			</div>
+
+			<div class="rope8crop">
+				<div class="rope8"></div>
+			</div>
+
+			<div class="rope9crop">
+				<div class="rope9"></div>
+			</div>
+
+			<div class="rope10crop">
+				<div class="rope10"></div>
+			</div>
+
+			<div class="rope11crop">
+				<div class="rope11"></div>
+			</div>
+
+			<div class="rope12crop">
+				<div class="rope12"></div>
+			</div>
+
+			<div class="rope13crop">
+				<div class="rope13"></div>
+			</div>
+
+			<div class="rope14crop">
+				<div class="rope14"></div>
+			</div>
+
+			<div class="rope15crop">
+				<div class="rope15"></div>
+			</div>
+
+			<div class="rope16crop">
+				<div class="rope16"></div>
+			</div>
+
+			<div class="rope17crop">
+				<div class="rope17"></div>
+			</div>
+
+			<div class="rope18crop">
+				<div class="rope18"></div>
+			</div>
+
+			<div class="rope19crop">
+				<div class="rope19"></div>
+			</div>
+
+			<div class="rope20crop">
+				<div class="rope20"></div>
+			</div>
+			<div class="bird right" style="top: 5px; left: 112px;">
+				<div class="body1"></div>
+				<div class="body2"></div>
+				<div class="body3"></div>
+				<div class="body4"></div>
+				<div class="body5"></div>
+
+				<div class="wing">
+					<div class="wing1"></div>
+					<div class="wing2"></div>
+					<div class="wing3crop">
+						<div class="wing3"></div>
+					</div>
+					<div class="wing4"></div>
+				</div>
+
+				<div class="eye"></div>
+			</div>
+
+			<div class="bird right" style="top: 31px; left: 72px;">
+				<div class="body1"></div>
+				<div class="body2"></div>
+				<div class="body3"></div>
+				<div class="body4"></div>
+				<div class="body5"></div>
+
+				<div class="wing">
+					<div class="wing1"></div>
+					<div class="wing2"></div>
+					<div class="wing3crop">
+						<div class="wing3"></div>
+					</div>
+					<div class="wing4"></div>
+				</div>
+
+				<div class="eye"></div>
+			</div>
+
+			<div class="bird right" style="top: 66px; left: 176px;">
+				<div class="body1"></div>
+				<div class="body2"></div>
+				<div class="body3"></div>
+				<div class="body4"></div>
+				<div class="body5"></div>
+
+				<div class="wing">
+					<div class="wing1"></div>
+					<div class="wing2"></div>
+					<div class="wing3crop">
+						<div class="wing3"></div>
+					</div>
+					<div class="wing4"></div>
+				</div>
+
+				<div class="eye"></div>
+			</div>
+
+			<div class="bird right" style="top: 35px; left: 262px;">
+				<div class="body1"></div>
+				<div class="body2"></div>
+				<div class="body3"></div>
+				<div class="body4"></div>
+				<div class="body5"></div>
+
+				<div class="wing">
+					<div class="wing1"></div>
+					<div class="wing2"></div>
+					<div class="wing3crop">
+						<div class="wing3"></div>
+					</div>
+					<div class="wing4"></div>
+				</div>
+
+				<div class="eye"></div>
+			</div>
+
+			<div class="bird left" style="top: 17px; left: 173px;">
+				<div class="body1"></div>
+				<div class="body2"></div>
+				<div class="body3"></div>
+				<div class="body4"></div>
+				<div class="body5"></div>
+
+				<div class="wing">
+					<div class="wing1"></div>
+					<div class="wing2"></div>
+					<div class="wing3crop">
+						<div class="wing3"></div>
+					</div>
+					<div class="wing4"></div>
+				</div>
+
+				<div class="eye"></div>
+			</div>
+
+			<div class="bird left" style="top: 47px; left: 230px;">
+				<div class="body1"></div>
+				<div class="body2"></div>
+				<div class="body3"></div>
+				<div class="body4"></div>
+				<div class="body5"></div>
+
+				<div class="wing">
+					<div class="wing1"></div>
+					<div class="wing2"></div>
+					<div class="wing3crop">
+						<div class="wing3"></div>
+					</div>
+					<div class="wing4"></div>
+				</div>
+
+				<div class="eye"></div>
+			</div>
+
+			<div class="bird left" style="top: 94px; left: 250px;">
+				<div class="body1"></div>
+				<div class="body2"></div>
+				<div class="body3"></div>
+				<div class="body4" style="margin-top: 6px; height: 10px; left: 9px;"></div>
+				<div class="body5"></div>
+
+				<div class="wing">
+					<div class="wing1"></div>
+					<div class="wing2"></div>
+					<div class="wing3crop">
+						<div class="wing3"></div>
+					</div>
+					<div class="wing4"></div>
+				</div>
+
+				<div class="eye"></div>
+			</div>
+
+			<div class="bird left" style="top: 135px; left: 277px;">
+				<div class="body1"></div>
+				<div class="body2"></div>
+				<div class="body3"></div>
+				<div class="body4"></div>
+				<div class="body5"></div>
+
+				<div class="wing">
+					<div class="wing1"></div>
+					<div class="wing2"></div>
+					<div class="wing3crop">
+						<div class="wing3"></div>
+					</div>
+					<div class="wing4"></div>
+				</div>
+
+				<div class="eye"></div>
+			</div>
+
+			<div id="whale">
+				<div id="whale1"></div>
+				<div id="whale2"></div>
+				<div id="whale3-crop">
+					<div id="whale3"></div>
+				</div>
+				<div id="whale4"></div>
+				<div id="whale5crop">
+					<div id="whale5"></div>
+				</div>
+				<div id="whale6"></div>
+				<div id="whale7"></div>
+
+				<div id="whaletail1"></div>
+				<div id="whaletail2"></div>
+				<div id="whaletail3"></div>
+				<div id="whaletail4"></div>
+				<div id="whaletail5"></div>
+				<div id="whaletail6"></div>
+				<div id="whaletail7"></div>
+				<div id="whaletail8"></div>
+
+				<div id="eye1"></div>
+				<div id="eye2"></div>
+
+			</div>
+		</div>
+		<div id="wavecontainer">
+		<div class="waves fore">
+			<div class="waveleft"><div class="inner"></div></div>
+			<div class="waveright"><div class="inner"></div></div>
+			<div class="waveleft"><div class="inner"></div></div>
+			<div class="waveright"><div class="inner"></div></div>
+			<div class="waveleft"><div class="inner"></div></div>
+			<div class="waveright"><div class="inner"></div></div>
+			<div class="waveleft"><div class="inner"></div></div>
+			<div class="waveright"><div class="inner"></div></div>
+			<div class="waveleft"><div class="inner"></div></div>
+			<div class="waveright"><div class="inner"></div></div>
+			<div class="waveleft"><div class="inner"></div></div>
+			<div class="waveright"><div class="inner"></div></div>
+			<div class="waveleft"><div class="inner"></div></div>
+			<div class="waveright"><div class="inner"></div></div>
+			<div class="waveleft"><div class="inner"></div></div>
+			<div class="waveright"><div class="inner"></div></div>
+			<div class="waveleft"><div class="inner"></div></div>
+			<div class="waveright"><div class="inner"></div></div>
+			<div class="waveleft"><div class="inner"></div></div>
+			<div class="waveright"><div class="inner"></div></div>
+			<div class="waveleft"><div class="inner"></div></div>
+			<div class="waveright"><div class="inner"></div></div>
+			<div class="waveleft"><div class="inner"></div></div>
+		</div>
+		<div class="waves back">
+			<div class="waveright"><div class="inner"></div></div>
+			<div class="waveleft"><div class="inner"></div></div>
+			<div class="waveright"><div class="inner"></div></div>
+			<div class="waveleft"><div class="inner"></div></div>
+			<div class="waveright"><div class="inner"></div></div>
+			<div class="waveleft"><div class="inner"></div></div>
+			<div class="waveright"><div class="inner"></div></div>
+			<div class="waveleft"><div class="inner"></div></div>
+			<div class="waveright"><div class="inner"></div></div>
+			<div class="waveleft"><div class="inner"></div></div>
+			<div class="waveright"><div class="inner"></div></div>
+			<div class="waveleft"><div class="inner"></div></div>
+			<div class="waveright"><div class="inner"></div></div>
+			<div class="waveleft"><div class="inner"></div></div>
+			<div class="waveright"><div class="inner"></div></div>
+			<div class="waveleft"><div class="inner"></div></div>
+			<div class="waveright"><div class="inner"></div></div>
+			<div class="waveleft"><div class="inner"></div></div>
+			<div class="waveright"><div class="inner"></div></div>
+			<div class="waveleft"><div class="inner"></div></div>
+			<div class="waveright"><div class="inner"></div></div>
+			<div class="waveleft"><div class="inner"></div></div>
+		</div>
+		</div>
+	</div>
+</body>
+</html>