| <html> |
| <head> |
| <script src="../../../resources/js-test-pre.js"></script> |
| <style> |
| .container { |
| border: thin solid blue; |
| } |
| |
| .child_with_margins { |
| margin-top: 10px; |
| margin-bottom: 10px; |
| } |
| |
| .separate_top { |
| -webkit-margin-top-collapse: separate; |
| } |
| |
| .separate_bottom { |
| -webkit-margin-bottom-collapse: separate; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container" id="22px_height"> |
| <div class="child_with_margins" id="zero_height"> |
| <div class="separate_top separate_bottom"></div> |
| </div> |
| </div> |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| description("Test for https://bugs.webkit.org/show_bug.cgi?id=109956 -webkit-margin-collapse: separate doesn't work correctly for before margins. \ |
| The test basically creates an empty block inside a container with a margin that collapses with children. The empty block has the margins \ |
| set to separate so its height should be 0px. The container is not selfcollapsing so it should have a height of 10px+10px+2px=22px."); |
| shouldEvaluateTo('document.getElementById("zero_height").offsetHeight', '0'); |
| shouldEvaluateTo('document.getElementById("22px_height").offsetHeight', '22'); |
| </script> |
| <script src="../../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
