Remove margin collapsing.

Margin collapsing is a document-oriented feature. For applications
it just causes confusion and slowness.

margins.sky has failure output because offsetTop is returning the
wrong values. That's not new with this patch though. When I look
at it visually in skydb, everything seems to be in the right place.

R=esprehn@chromium.org

Review URL: https://codereview.chromium.org/700743002
This commit is contained in:
Ojan Vafai 2014-11-03 21:30:40 -08:00
parent 82fe742ec2
commit 79ea19ffc7
4 changed files with 35 additions and 7 deletions

View File

@ -0,0 +1 @@
PASS

View File

@ -0,0 +1,21 @@
<sky>
<import src="../resources/check-layout.sky" as="checkLayout" />
<style>
.root {
margin: 5px;
}
.child {
margin: 10px;
height: 30px;
position: absolute;
}
</style>
<div class="root" data-expected-height="0" data-total-y="5" style="background-color: pink">
<div class="child" data-total-y="15" style="background-color: salmon"></div>
</div>
<script>
checkLayout('.root');
</script>
</sky>

View File

@ -1,5 +1,5 @@
FAIL:
<div class="child" data-total-y="10" style="background-color: salmon">
Expected 10 for clientTop+offsetTop, but got 0, clientTop: 0, + offsetTop: 0.
<div class="child" data-total-y="50" style="background-color: papayawhip">
Expected 50 for clientTop+offsetTop, but got 40, clientTop: 0, + offsetTop: 40.
<div class="child" data-total-y="15" style="background-color: salmon">
Expected 15 for clientTop+offsetTop, but got 10, clientTop: 0, + offsetTop: 10.
<div class="child" data-total-y="65" style="background-color: papayawhip">
Expected 65 for clientTop+offsetTop, but got 60, clientTop: 0, + offsetTop: 60.

View File

@ -1,17 +1,23 @@
<sky>
<import src="../resources/check-layout.sky" as="checkLayout" />
<style>
.root {
margin: 5px;
}
.child {
margin: 10px;
height: 30px;
}
</style>
<div class="root" data-expected-height="70" data-total-y="10" style="background-color: pink">
<div class="child" data-total-y="10" style="background-color: salmon"></div>
<div class="child" data-total-y="50" style="background-color: papayawhip"></div>
<div class="root" data-expected-height="100" data-total-y="5" style="background-color: pink">
<!-- TODO(ojan): These numbers are right, but the test fails because we appear to have
broken offsetTop to not include the parent's margin-top. -->
<div class="child" data-total-y="15" style="background-color: salmon"></div>
<div class="child" data-total-y="65" style="background-color: papayawhip"></div>
</div>
<script>
checkLayout('.root');
</script>
</sky>