mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 13:18:45 +02:00
2ddba71a02
Automatic update from web-platform-tests [css-flexbox] Move relayout-align-items.html test to WPT This CL moves relayout-align-items.html test from css3/css-flexbox to external/wpt/css/css-flexbox with WPT styles, adding links to the relevant specs, and test description. Bug: 1063749 Change-Id: I9cc13f9902080279b39bd62a9d9f9a3c8cf5b02a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2131824 Commit-Queue: David Grogan <dgrogan@chromium.org> Reviewed-by: Robert Ma <robertma@chromium.org> Reviewed-by: David Grogan <dgrogan@chromium.org> Cr-Commit-Position: refs/heads/master@{#756130} -- wpt-commits: 616e220423e7f88b38319512e636eca7a7d54d34 wpt-pr: 22652
51 lines
2.2 KiB
HTML
51 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>CSS Flexbox: Relayout align flex items</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property">
|
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#align-items-property">
|
|
<meta name="assert" content="This test ensures that align items work properly after changing existing values with 'flex-end' and 'stretch'.">
|
|
<link href="support/flexbox.css" rel="stylesheet">
|
|
<style>
|
|
.flexbox {
|
|
height: 100px;
|
|
position: relative;
|
|
}
|
|
.flexbox > div {
|
|
border: 5px solid green;
|
|
width: 50px;
|
|
}
|
|
</style>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/resources/check-layout-th.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id=log></div>
|
|
<div id="from-stretch" class="flexbox">
|
|
<div data-expected-height="10" data-offset-y="90"></div>
|
|
<div data-expected-height="10" data-offset-y="90" class="align-self-auto"></div>
|
|
<div data-expected-height="10" data-offset-y="0" class="align-self-flex-start"></div>
|
|
<div data-expected-height="10" data-offset-y="90" class="align-self-flex-end"></div>
|
|
<div data-expected-height="10" data-offset-y="45" class="align-self-center"></div>
|
|
<div data-expected-height="10" data-offset-y="0" class="align-self-baseline"></div>
|
|
<div data-expected-height="100" data-offset-y="0" class="align-self-stretch"></div>
|
|
</div>
|
|
|
|
<div id="to-stretch" class="flexbox align-items-flex-start">
|
|
<div data-expected-height="100" data-offset-y="0"></div>
|
|
<div data-expected-height="100" data-offset-y="0" class="align-self-auto"></div>
|
|
<div data-expected-height="10" data-offset-y="0" class="align-self-flex-start"></div>
|
|
<div data-expected-height="10" data-offset-y="90" class="align-self-flex-end"></div>
|
|
<div data-expected-height="10" data-offset-y="45" class="align-self-center"></div>
|
|
<div data-expected-height="10" data-offset-y="0" class="align-self-baseline"></div>
|
|
<div data-expected-height="100" data-offset-y="0" class="align-self-stretch"></div>
|
|
</div>
|
|
<script>
|
|
document.body.offsetLeft;
|
|
document.getElementById("from-stretch").style.alignItems = "flex-end";
|
|
document.getElementById("to-stretch").style.alignItems = "stretch";
|
|
checkLayout(".flexbox");
|
|
</script>
|
|
</body>
|
|
</html>
|