32 lines
891 B
HTML
32 lines
891 B
HTML
<!DOCTYPE html>
|
|
<script src="../../resources/testharness.js"></script>
|
|
<script src="../../resources/testharnessreport.js"></script>
|
|
<script src="../../resources/check-layout-th.js"></script>
|
|
<style>
|
|
#scrollable {
|
|
overflow: scroll;
|
|
background: pink;
|
|
height: 300px;
|
|
width: 300px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
padding: 100px;
|
|
}
|
|
#item {
|
|
width: 300px;
|
|
height: 300px;
|
|
background: salmon;
|
|
flex-shrink: 0;
|
|
}
|
|
</style>
|
|
<div id=log></div>
|
|
Tests that padding bottom on a flexbox works in the face of overflowing content.
|
|
Padding-right does not work. This matches the Blink/WebKit display:block behavior.
|
|
Unfortunately, IE and Gecko both lose the padding bottom and the padding right.
|
|
<div id="scrollable" data-expected-scroll-height=500 data-expected-scroll-width=400>
|
|
<div id="item"></div>
|
|
</div>
|
|
<script>
|
|
checkLayout('#scrollable');
|
|
</script>
|