Permalink
Browse files

Add test case for issue #14 courtesy of Gordon Brander.

  • Loading branch information...
1 parent 182fcb0 commit 08dbcc80b0bdc7bc954c78baa6352e1dafdbf5b4 Jason Johnston committed Jun 2, 2010
Showing with 78 additions and 0 deletions.
  1. +78 −0 tests/margin-collapsing-tests.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>CSS3 PIE Margin Test</title>
+
+ <meta name="robots" content="noindex, nofollow" />
+
+ <style type="text/css" media="screen">
+ .box {
+ -moz-border-radius: 5px; /* FF1+ */
+ -webkit-border-radius: 5px; /* Saf3+, Chrome */
+ -khtml-border-radius: 5px; /* Konqueror */
+ border-radius: 5px; /* Standard. IE9 */
+
+ margin: 20px 0;
+ overflow: hidden;
+ }
+ .inside {
+ background: #fff;
+ -moz-border-radius: 5px; /* FF1+ */
+ -webkit-border-radius: 5px; /* Saf3+, Chrome */
+ -khtml-border-radius: 5px; /* Konqueror */
+ border-radius: 5px; /* Standard. IE9 */
+ margin: 20px;
+ }
+
+ #test {
+ behavior: url(../build/PIE.htc);
+ background: red;
+ }
+
+ #test .inside {
+ behavior: url(../build/PIE.htc);
+ }
+
+ #test2 {
+ background: red;
+ }
+ #test2 .inside {
+ behavior: url(../build/PIE.htc);
+ }
+
+ #control {
+ behavior: url(../build/PIE.htc);
+ background: green;
+ }
+
+ </style>
+</head>
+<body>
+ <h1>Margin/Overflow Treatment with PIE</h1>
+
+ <p>These boxes have <code>overflow:hidden</code>. Inside is a <code>div</code> with margin. The expected behavior is for that margin not to collapse (because of the overflow setting).</p>
+
+ <p>In cases where PIE is attached to the inner, the top margin collapses.</p>
+
+ <div id="test" class="box">
+ <div class="inside">
+ This box has PIE on the outside and the inside. This box should be spaced 20px on all sides, but it isn't.
+ </div><!--/inside-->
+ </div><!--/test-->
+
+ <div id="test2" class="box">
+ <div class="inside">
+ This box has PIE on the inside only. This box should be spaced 20px on all sides, but it isn't. Additionally, it is missing a background color.
+ </div><!--/inside-->
+ </div><!--/test2-->
+
+
+ <div id="control" class="box">
+ <div class="inside">
+ This box has PIE on the outside, but not on the inside. Margin is respected.
+ </div><!--/test2-->
+ </div><!--/test-->
+</body>
+</html>

0 comments on commit 08dbcc8

Please sign in to comment.