mirror of
https://repo.dactyloidae.xyz/Dactyloidae/UXP.git
synced 2026-09-30 04:17:31 +09:00
cf5dfc5e7d
Almost forgot to do this. This is in case we need to revisit this for regressions in the future and the tests are not available online. Never know when they might come in handy again.
128 lines
4.2 KiB
HTML
128 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
Any copyright is dedicated to the Public Domain.
|
|
http://creativecommons.org/publicdomain/zero/1.0/
|
|
-->
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>
|
|
CSS Test: Testing how explicit main-size & cross-size constraints
|
|
influence sizing on non-stretched flex item w/ intrinsic ratio
|
|
(with a vertical writing-mode on the flex items).
|
|
</title>
|
|
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
|
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
|
|
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
|
|
<link rel="match" href="flexbox-intrinsic-ratio-001-ref.html">
|
|
<style>
|
|
.flexbox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid black;
|
|
margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
|
|
width: 40px;
|
|
height: 40px;
|
|
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
|
|
float: left; /* For testing in "rows" */
|
|
}
|
|
br { clear: both; }
|
|
|
|
.flexbox > * {
|
|
writing-mode: vertical-lr;
|
|
|
|
/* Disable "min-width:auto"/"min-height:auto" to focus purely on
|
|
later channels of influence. */
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
|
|
|
|
<!-- Row 1: no special sizing: -->
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png">
|
|
</div>
|
|
<br>
|
|
|
|
<!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="width: 30px">
|
|
</div>
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="height: 30px">
|
|
</div>
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="flex: 0 0 30px">
|
|
</div>
|
|
<br>
|
|
|
|
<!-- Row 3: min main-size OR min cross-size, or both -->
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="min-width: 34px">
|
|
</div>
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="min-height: 34px">
|
|
</div>
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="min-width: 30px;
|
|
min-height: 34px">
|
|
</div>
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="min-width: 34px;
|
|
min-height: 30px">
|
|
</div>
|
|
<br>
|
|
|
|
<!-- Row 4: max main-size OR max cross-size, or both -->
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="max-width: 10px">
|
|
</div>
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="max-height: 10px">
|
|
</div>
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="max-width: 10px;
|
|
max-height: 6px">
|
|
</div>
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="max-width: 6px;
|
|
max-height: 10px">
|
|
</div>
|
|
<br>
|
|
|
|
<!-- Row 5: min main-size vs. max cross-size, & vice versa -->
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="min-width: 30px;
|
|
max-height: 10px">
|
|
</div>
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="max-width: 10px;
|
|
min-height: 30px">
|
|
</div>
|
|
<br>
|
|
|
|
<!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="min-width: 30px;
|
|
height: 10px">
|
|
</div>
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="width: 30px;
|
|
max-height: 10px">
|
|
</div>
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="max-width: 10px;
|
|
height: 30px">
|
|
</div>
|
|
<div class="flexbox">
|
|
<img src="support/solidblue.png" style="width: 10px;
|
|
min-height: 30px">
|
|
</div>
|
|
</body>
|
|
</html>
|