summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-flexbox/flex-column-relayout-assert.html
blob: b116987ad3ae6b130dd708fef2df83b17a5e117f (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<title>CSS Flexbox: Column height with padding</title>
<link href="support/flexbox.css" rel="stylesheet">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#item-margins">
<meta name="assert" content="This test checks that height of flex container works with padding">
<style>
.flexbox {
    background-color: green;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.flexbox')">
<div id=log></div>

<p>You should see a green rectangle, 40px high.</p>

<div class="flexbox column" data-expected-height="40">
  <div id="child" data-expected-height="40"></div>
</div>

<script>
document.getElementById('child').offsetHeight;
document.getElementById('child').style.padding = "20px";
</script>