Commit f011fd23 authored by Mario Sanchez Prada's avatar Mario Sanchez Prada Committed by Commit Bot

[css-flexbox] Update overflow-and-padding.html test with extra info

Add links to the relevant specs and a test assertion describing its
purpose, and do some other minor changes as this test can't be migrated
to WPT yet, as it tests Blink/WebKit specific behaviour, unfortunately.

Bug: 1063749
Change-Id: I1d4048057c1d3d4585efcb0e326e435181b33bac
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2128080
Commit-Queue: David Grogan <dgrogan@chromium.org>
Reviewed-by: default avatarDavid Grogan <dgrogan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#755538}
parent e90652cf
<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/check-layout-th.js"></script>
<html>
<title>CSS Flexbox: padding on a flexbox with overflowing content.</title>
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#overflow-properties">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#item-margins">
<link rel="help" href="https://codereview.chromium.org/134603002">
<meta name="assert" content="This test checks that all paddings but padding-right work on a flexbox in the face of overflowing content, matching the Blink/WebKit behavior for 'display:block'." />
<style>
#scrollable {
overflow: scroll;
......@@ -12,6 +16,7 @@
display: flex;
padding: 100px;
}
#item {
width: 300px;
height: 300px;
......@@ -19,13 +24,22 @@
flex-shrink: 0;
}
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/check-layout-th.js"></script>
<body onload="checkLayout('#scrollable')">
<div id=log></div>
Tests that padding bottom on a flexbox works in the face of overflowing content.
<p>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.
Unfortunately, IE and Gecko both lose the padding bottom and the padding right.</p>
<div id="scrollable" data-expected-scroll-height=500 data-expected-scroll-width=400>
<div id="item"></div>
</div>
<script>
checkLayout('#scrollable');
</script>
</body>
</html>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment