jarmar/gist:3295642

## gistfile1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Margin box testing</title>
    <style type='text/css'>
        @page {
          size: US-Letter;
          margin: 1.5in 0.5in .5in 0.75in;
          font: 11px Arial;
        }

        html {
          background: red;
        }

        @page {
          @top-center {
            background: blue;
            content: "The center box.";
          }
          @top-left {
            background: green;
            content: "Gets hidden unless there's a non-empty @top-right box.";
          }
          @left-middle {
            background: blue;
            content: "Problem doesn't occur on left/right side.";
          }
          @left-top {
            background: green;
            content: "Visible regardless of @left-bottom presence";
          }
        }

        @page with-empty-topright {
          @top-right {
            background: turquoise;
            content: "";
          }
          @left-bottom {
            background: turquoise;
            content: "Has no impact on @left-top size";
          }
        }

        #with-empty-topright {
          page-break-before: always;
          page: with-empty-topright;
        }

    </style>
</head>
<body>
  <p>
    The @top-left box gets a zero width.
  </p>
  <p id="with-empty-topright">
    Has a @top-right with content: "" and a @left-bottom, otherwise same style as last page.
  </p>
</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Margin box testing</title>
	<style type='text/css'>
	@page {
	size: US-Letter;
	margin: 1.5in 0.5in .5in 0.75in;
	font: 11px Arial;
	}

	html {
	background: red;
	}

	@page {
	@top-center {
	background: blue;
	content: "The center box.";
	}
	@top-left {
	background: green;
	content: "Gets hidden unless there's a non-empty @top-right box.";
	}
	@left-middle {
	background: blue;
	content: "Problem doesn't occur on left/right side.";
	}
	@left-top {
	background: green;
	content: "Visible regardless of @left-bottom presence";
	}
	}

	@page with-empty-topright {
	@top-right {
	background: turquoise;
	content: "";
	}
	@left-bottom {
	background: turquoise;
	content: "Has no impact on @left-top size";
	}
	}

	#with-empty-topright {
	page-break-before: always;
	page: with-empty-topright;
	}

	</style>
	</head>
	<body>
	<p>
	The @top-left box gets a zero width.
	</p>
	<p id="with-empty-topright">
	Has a @top-right with content: "" and a @left-bottom, otherwise same style as last page.
	</p>
	</body>
	</html>