mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 21:28:04 +02:00
5deb83f3db
Automatic update from web-platform-tests [css-flexbox] Move flex-factor-less-than-one.html test from css3/flexbox to WPT This CL moves flex-factor-less-than-one.html test from css3/css-flexbox to external/wpt/css/css-flexbox with WPT styles, adding links to the relevant specs, and a test description. Bug: 1063749 Change-Id: Ia2403deb69ca5f7e44f43d9b51c8b6664a09c999 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2121596 Commit-Queue: Gyuyoung Kim <gyuyoung@igalia.com> Reviewed-by: Robert Ma <robertma@chromium.org> Reviewed-by: David Grogan <dgrogan@chromium.org> Cr-Commit-Position: refs/heads/master@{#753510} -- wpt-commits: 335f1653e2ff907b7db9acc3e18e76ca843329a2 wpt-pr: 22454
180 lines
5.4 KiB
HTML
180 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Flexbox: flex factors less than one</title>
|
|
<link href="support/flexbox.css" rel="stylesheet">
|
|
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-grow">
|
|
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex-shrink">
|
|
<meta name="assert" content="flex-grow and flex-shrink factors less than 1 work">
|
|
<style>
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.container {
|
|
height: 100px;
|
|
width: 100px;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
.child-flex-grow-0-75 {
|
|
background-color: lime;
|
|
flex-grow: 0.75;
|
|
}
|
|
|
|
.child-flex-grow-0-5 {
|
|
background-color: green;
|
|
flex-grow: 0.5;
|
|
}
|
|
|
|
.child-flex-grow-0-25 {
|
|
background-color: red;
|
|
flex-grow: 0.25;
|
|
}
|
|
|
|
.child-flex-shrink-0-5 {
|
|
background-color: green;
|
|
flex-shrink: 0.5;
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
|
|
.child-flex-shrink-0-25 {
|
|
background-color: red;
|
|
flex-shrink: 0.25;
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
|
|
.basis-0 {
|
|
flex-basis: 0;
|
|
}
|
|
|
|
.basis {
|
|
flex-basis: 30px;
|
|
}
|
|
|
|
.basis-big {
|
|
flex-basis: 100px;
|
|
}
|
|
|
|
.vertical {
|
|
writing-mode: vertical-rl;
|
|
}
|
|
</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>
|
|
|
|
<div class="flexbox container">
|
|
<div class="child-flex-grow-0-5" data-expected-width="50"></div>
|
|
</div>
|
|
|
|
<div class="flexbox container">
|
|
<div class="child-flex-grow-0-5" data-expected-width="50"></div>
|
|
<div class="child-flex-grow-0-25" data-expected-width="25"></div>
|
|
</div>
|
|
|
|
<div class="flexbox container column">
|
|
<div class="child-flex-grow-0-5" data-expected-height="50"></div>
|
|
<div class="child-flex-grow-0-25" data-expected-height="25"></div>
|
|
</div>
|
|
|
|
<div class="flexbox container column vertical">
|
|
<div class="child-flex-grow-0-5 " data-expected-width="50"></div>
|
|
<div class="child-flex-grow-0-25 " data-expected-width="25"></div>
|
|
</div>
|
|
|
|
<div class="flexbox container vertical">
|
|
<div class="child-flex-grow-0-5 " data-expected-height="50"></div>
|
|
<div class="child-flex-grow-0-25 " data-expected-height="25"></div>
|
|
</div>
|
|
|
|
<div class="flexbox container">
|
|
<div class="child-flex-grow-0-5 basis" data-expected-width="50"></div>
|
|
<div class="child-flex-grow-0-25 basis" data-expected-width="40"></div>
|
|
</div>
|
|
|
|
<div class="flexbox container column">
|
|
<div class="child-flex-grow-0-5 basis" data-expected-height="50"></div>
|
|
<div class="child-flex-grow-0-25 basis" data-expected-height="40"></div>
|
|
</div>
|
|
|
|
<div class="flexbox container vertical">
|
|
<div class="child-flex-grow-0-5 basis" data-expected-height="50"></div>
|
|
<div class="child-flex-grow-0-25 basis" data-expected-height="40"></div>
|
|
</div>
|
|
|
|
<div class="flexbox container column vertical">
|
|
<div class="child-flex-grow-0-5 basis" data-expected-width="50"></div>
|
|
<div class="child-flex-grow-0-25 basis" data-expected-width="40"></div>
|
|
</div>
|
|
|
|
<!-- And now, the shrink cases -->
|
|
<div class="flexbox container">
|
|
<div class="child-flex-shrink-0-5" data-expected-width="150"></div>
|
|
</div>
|
|
|
|
<div class="flexbox container">
|
|
<div class="child-flex-shrink-0-5" data-expected-width="50"></div>
|
|
<div class="child-flex-shrink-0-25" data-expected-width="125"></div>
|
|
</div>
|
|
|
|
<div class="flexbox container column">
|
|
<div class="child-flex-shrink-0-5" data-expected-height="50"></div>
|
|
<div class="child-flex-shrink-0-25" data-expected-height="125"></div>
|
|
</div>
|
|
|
|
<div class="flexbox container column vertical">
|
|
<div class="child-flex-shrink-0-5 " data-expected-width="50"></div>
|
|
<div class="child-flex-shrink-0-25 " data-expected-width="125"></div>
|
|
</div>
|
|
|
|
<div class="flexbox container vertical">
|
|
<div class="child-flex-shrink-0-5 " data-expected-height="50"></div>
|
|
<div class="child-flex-shrink-0-25 " data-expected-height="125"></div>
|
|
</div>
|
|
|
|
<div class="flexbox container">
|
|
<div class="child-flex-shrink-0-5 basis-big" data-expected-width="50"></div>
|
|
<div class="child-flex-shrink-0-25 basis-big" data-expected-width="75"></div>
|
|
</div>
|
|
<div class="flexbox container column">
|
|
<div class="child-flex-shrink-0-5 basis-big" data-expected-height="50"></div>
|
|
<div class="child-flex-shrink-0-25 basis-big" data-expected-height="75"></div>
|
|
</div>
|
|
|
|
<div class="flexbox container vertical">
|
|
<div class="child-flex-shrink-0-5 basis-big" data-expected-height="50"></div>
|
|
<div class="child-flex-shrink-0-25 basis-big" data-expected-height="75"></div>
|
|
</div>
|
|
|
|
<div class="flexbox container column vertical">
|
|
<div class="child-flex-shrink-0-5 basis-big" data-expected-width="50"></div>
|
|
<div class="child-flex-shrink-0-25 basis-big" data-expected-width="75"></div>
|
|
</div>
|
|
|
|
<!-- Interaction of min-width: auto with fractional flex basis -->
|
|
<div class="flexbox container" style="background-color: red;">
|
|
<div class="child-flex-grow-0-25 basis-0" style="background-color: green;" data-expected-width="10"></div>
|
|
<div class="child-flex-grow-0-75 basis-0" data-expected-width="90">
|
|
<div style="width: 90px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- centering should still center; same for other justify-content values -->
|
|
<div class="flexbox container justify-content-center">
|
|
<div class="child-flex-grow-0-5" data-expected-width="50" data-offset-x="26"></div>
|
|
</div>
|
|
|
|
<div class="flexbox container justify-content-space-around">
|
|
<div class="child-flex-grow-0-5" data-expected-width="50" data-offset-x="26"></div>
|
|
</div>
|
|
|
|
<div class="flexbox container justify-content-flex-end">
|
|
<div class="child-flex-grow-0-5" data-expected-width="50" data-offset-x="51"></div>
|
|
</div>
|
|
|
|
</body>
|