<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="Daniel Holbert" href="mailto:[email protected]">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
<meta name="assert" content="For a grid item with an 'aspect-ratio' and a resolvable percent height and a non-stretching justify-self, the item's inline-size should be resolved based on the height and 'aspect-ratio'">
<style>
.group { margin-bottom: 20px;}
.group.orthog .item { writing-mode: vertical-rl }
.grid {
height: 32px;
width: 24px;
display: inline-grid;
border: 2px solid black;
vertical-align: top;
background: cyan;
}
.item {
height: 100%;
background: fuchsia;
box-sizing: border-box;
aspect-ratio: 1/2;
}
.center { justify-self: center; }
.start { justify-self: start; }
.end { justify-self: end; }
.self-start { justify-self: self-start; }
.self-end { justify-self: self-end; }
.flex-start { justify-self: flex-start; }
.flex-end { justify-self: flex-end; }
.left { justify-self: left; }
.right { justify-self: right; }
.normal { justify-self: normal; }
.stretch { justify-self: stretch; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.item')">
<div class="group">
<div class="grid">
<div class="item start"
data-expected-width="16" data-expected-height="32"></div>
</div>
<div class="grid">
<div class="item end"
data-expected-width="16" data-expected-height="32"></div>
</div>
<div class="grid">
<div class="item self-start"
data-expected-width="16" data-expected-height="32"></div>
</div>
<div class="grid">
<div class="item self-end"
data-expected-width="16" data-expected-height="32"></div>
</div>
<div class="grid">
<div class="item flex-start"
data-expected-width="16" data-expected-height="32"></div>
</div>
<div class="grid">
<div class="item flex-end"
data-expected-width="16" data-expected-height="32"></div>
</div>
<div class="grid">
<div class="item left"
data-expected-width="16" data-expected-height="32"></div>
</div>
<div class="grid">
<div class="item right"
data-expected-width="16" data-expected-height="32"></div>
</div>
<div class="grid">
<div class="item center"
data-expected-width="16" data-expected-height="32"></div>
</div>
<div class="grid">
<div class="item normal"
data-expected-width="24" data-expected-height="48"></div>
</div>
<div class="grid">
<div class="item stretch"
data-expected-width="24" data-expected-height="48"></div>
</div>
</div>
<!-- For these ones, the item's writing-mode will be orthogonal to the
grid container's writing-mode -->
<div class="group orthog">
<div class="grid">
<div class="item start"
data-expected-width="16" data-expected-height="32"></div>
</div>
<div class="grid">
<div class="item end"
data-expected-width="16" data-expected-height="32"></div>
</div>
<div class="grid">
<div class="item self-start"
data-expected-width="16" data-expected-height="32"></div>
</div>
<div class="grid">
<div class="item self-end"
data-expected-width="16" data-expected-height="32"></div>
</div>
<div class="grid">
<div class="item flex-start"
data-expected-width="16" data-expected-height="32"></div>
</div>
<div class="grid">
<div class="item flex-end"
data-expected-width="16" data-expected-height="32"></div>
</div>
<div class="grid">
<div class="item left"
data-expected-width="16" data-expected-height="32"></div>
</div>
<div class="grid">
<div class="item right"
data-expected-width="16" data-expected-height="32"></div>
</div>
<div class="grid">
<div class="item center"
data-expected-width="16" data-expected-height="32"></div>
</div>
<!-- TODO(dholbert):
These ones behave differently in every browser. Need to sort out
the expected rendering here...
<div class="grid">
<div class="item normal"
data-expected-width="24" data-expected-height="48"></div>
</div>
<div class="grid">
<div class="item stretch"
data-expected-width="24" data-expected-height="48"></div>
</div>
-->
</div>
</body>
Codebase Browser
chromium