Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 10 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-sizing/keyword-sizes-on-abspos.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Keyword sizes on absolutely positioned box</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<meta assert="The various keyword sizes work as expected on absolutely positioned boxes.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
.cb {
position: relative;
width: 100px;
height: 100px
}
.test {
position: absolute;
inset: 0;
margin: 5px;
border: 3px solid;
padding: 2px;
font: 20px/1 Ahem;
}
/* Set the preferred size to small amount, to test that the min size works */
.test.min-width { width: 0px }
.test.min-height { height: 0px }
/* Set the preferred size to big amount, to test that the max size works */
.test.max-width { width: 500px }
.test.max-height { height: 500px }
/* stretch isn't widely supported, fall back to vendor-prefixed alternatives */
.width.stretch { width: -moz-available; width: -webkit-fill-available; width: stretch }
.min-width.stretch { min-width: -moz-available; min-width: -webkit-fill-available; min-width: stretch }
.max-width.stretch { max-width: -moz-available; max-width: -webkit-fill-available; max-width: stretch }
.height.stretch { height: -moz-available; height: -webkit-fill-available; height: stretch }
.min-height.stretch { min-height: -moz-available; min-height: -webkit-fill-available; min-height: stretch }
.max-height.stretch { max-height: -moz-available; max-height: -webkit-fill-available; max-height: stretch }
canvas { display: block; background: currentcolor }
.test.width canvas, .test.min-width canvas, .test.max-width canvas { width: 100% }
.test.height canvas, .test.min-height canvas, .test.max-height canvas { height: 100% }
</style>
<div id="log"></div>
<div class="cb">
<div class="test width" style="width: initial" data-expected-width="90">XX XX</div>
</div>
<div class="cb">
<div class="test width" style="width: min-content" data-expected-width="50">XX XX</div>
</div>
<div class="cb">
<div class="test width" style="width: fit-content" data-expected-width="90">XX XX</div>
</div>
<div class="cb">
<div class="test width" style="width: max-content" data-expected-width="110">XX XX</div>
</div>
<div class="cb">
<div class="test width stretch" data-expected-width="90">XX XX</div>
</div>
<div class="cb">
<div class="test min-width" style="min-width: initial" data-expected-width="10">XX XX</div>
</div>
<div class="cb">
<div class="test min-width" style="min-width: min-content" data-expected-width="50">XX XX</div>
</div>
<div class="cb">
<div class="test min-width" style="min-width: fit-content" data-expected-width="90">XX XX</div>
</div>
<div class="cb">
<div class="test min-width" style="min-width: max-content" data-expected-width="110">XX XX</div>
</div>
<div class="cb">
<div class="test min-width stretch" data-expected-width="90">XX XX</div>
</div>
<div class="cb">
<div class="test max-width" style="max-width: initial" data-expected-width="510">XX XX</div>
</div>
<div class="cb">
<div class="test max-width" style="max-width: min-content" data-expected-width="50">XX XX</div>
</div>
<div class="cb">
<div class="test max-width" style="max-width: fit-content" data-expected-width="90">XX XX</div>
</div>
<div class="cb">
<div class="test max-width" style="max-width: max-content" data-expected-width="110">XX XX</div>
</div>
<div class="cb">
<div class="test max-width stretch" data-expected-width="90">XX XX</div>
</div>
<div class="cb">
<div class="test width" style="width: initial" data-expected-width="90">
<canvas width="20" height="10" data-expected-width="80" data-expected-height="40"></canvas>
</div>
</div>
<div class="cb">
<div class="test width" style="width: min-content" data-expected-width="10">
<canvas width="20" height="10" data-expected-width="0" data-expected-height="0"></canvas>
</div>
</div>
<div class="cb">
<div class="test width" style="width: fit-content" data-expected-width="30">
<canvas width="20" height="10" data-expected-width="20" data-expected-height="10"></canvas>
</div>
</div>
<div class="cb">
<div class="test width" style="width: max-content" data-expected-width="30">
<canvas width="20" height="10" data-expected-width="20" data-expected-height="10"></canvas>
</div>
</div>
<div class="cb">
<div class="test width stretch" data-expected-width="90">
<canvas width="20" height="10" data-expected-width="80" data-expected-height="40"></canvas>
</div>
</div>
<div class="cb">
<div class="test min-width" style="min-width: initial" data-expected-width="10">
<canvas width="20" height="10" data-expected-width="0" data-expected-height="0"></canvas>
</div>
</div>
<div class="cb">
<div class="test min-width" style="min-width: min-content" data-expected-width="10">
<canvas width="20" height="10" data-expected-width="0" data-expected-height="0"></canvas>
</div>
</div>
<div class="cb">
<div class="test min-width" style="min-width: fit-content" data-expected-width="30">
<canvas width="20" height="10" data-expected-width="20" data-expected-height="10"></canvas>
</div>
</div>
<div class="cb">
<div class="test min-width" style="min-width: max-content" data-expected-width="30">
<canvas width="20" height="10" data-expected-width="20" data-expected-height="10"></canvas>
</div>
</div>
<div class="cb">
<div class="test min-width stretch" data-expected-width="90">
<canvas width="20" height="10" data-expected-width="80" data-expected-height="40"></canvas>
</div>
</div>
<div class="cb">
<div class="test max-width" style="max-width: initial" data-expected-width="510">
<canvas width="20" height="10" data-expected-width="500" data-expected-height="250"></canvas>
</div>
</div>
<div class="cb">
<div class="test max-width" style="max-width: min-content" data-expected-width="10">
<canvas width="20" height="10" data-expected-width="0" data-expected-height="0"></canvas>
</div>
</div>
<div class="cb">
<div class="test max-width" style="max-width: fit-content" data-expected-width="30">
<canvas width="20" height="10" data-expected-width="20" data-expected-height="10"></canvas>
</div>
</div>
<div class="cb">
<div class="test max-width" style="max-width: max-content" data-expected-width="30">
<canvas width="20" height="10" data-expected-width="20" data-expected-height="10"></canvas>
</div>
</div>
<div class="cb">
<div class="test max-width stretch" data-expected-width="90">
<canvas width="20" height="10" data-expected-width="80" data-expected-height="40"></canvas>
</div>
</div>
<div class="cb">
<div class="test height" style="height: initial" data-expected-height="90">XX XX</div>
</div>
<div class="cb">
<div class="test height" style="height: min-content" data-expected-height="50">XX XX</div>
</div>
<div class="cb">
<div class="test height" style="height: fit-content" data-expected-height="50">XX XX</div>
</div>
<div class="cb">
<div class="test height" style="height: max-content" data-expected-height="50">XX XX</div>
</div>
<div class="cb">
<div class="test height stretch" data-expected-height="90">XX XX</div>
</div>
<div class="cb">
<div class="test min-height" style="min-height: initial" data-expected-height="10">XX XX</div>
</div>
<div class="cb">
<div class="test min-height" style="min-height: min-content" data-expected-height="50">XX XX</div>
</div>
<div class="cb">
<div class="test min-height" style="min-height: fit-content" data-expected-height="50">XX XX</div>
</div>
<div class="cb">
<div class="test min-height" style="min-height: max-content" data-expected-height="50">XX XX</div>
</div>
<div class="cb">
<div class="test min-height stretch" data-expected-height="90">XX XX</div>
</div>
<div class="cb">
<div class="test max-height" style="max-height: initial" data-expected-height="510">XX XX</div>
</div>
<div class="cb">
<div class="test max-height" style="max-height: min-content" data-expected-height="50">XX XX</div>
</div>
<div class="cb">
<div class="test max-height" style="max-height: fit-content" data-expected-height="50">XX XX</div>
</div>
<div class="cb">
<div class="test max-height" style="max-height: max-content" data-expected-height="50">XX XX</div>
</div>
<div class="cb">
<div class="test max-height stretch" data-expected-height="90">XX XX</div>
</div>
<div class="cb">
<div class="test height" style="height: initial" data-expected-height="90">
<canvas width="10" height="20" data-expected-width="40" data-expected-height="80"></canvas>
</div>
</div>
<div class="cb">
<div class="test height" style="height: min-content" data-expected-height="30">
<canvas width="10" height="20" data-expected-width="10" data-expected-height="20"></canvas>
</div>
</div>
<div class="cb">
<div class="test height" style="height: fit-content" data-expected-height="30">
<canvas width="10" height="20" data-expected-width="10" data-expected-height="20"></canvas>
</div>
</div>
<div class="cb">
<div class="test height" style="height: max-content" data-expected-height="30">
<canvas width="10" height="20" data-expected-width="10" data-expected-height="20"></canvas>
</div>
</div>
<div class="cb">
<div class="test height stretch" data-expected-height="90">
<canvas width="10" height="20" data-expected-width="40" data-expected-height="80"></canvas>
</div>
</div>
<div class="cb">
<div class="test min-height" style="min-height: initial" data-expected-height="10">
<canvas width="10" height="20" data-expected-width="0" data-expected-height="0"></canvas>
</div>
</div>
<div class="cb">
<div class="test min-height" style="min-height: min-content" data-expected-height="10">
<canvas width="10" height="20" data-expected-width="0" data-expected-height="0"></canvas>
</div>
</div>
<div class="cb">
<div class="test min-height" style="min-height: fit-content" data-expected-height="10">
<canvas width="10" height="20" data-expected-width="0" data-expected-height="0"></canvas>
</div>
</div>
<div class="cb">
<div class="test min-height" style="min-height: max-content" data-expected-height="10">
<canvas width="10" height="20" data-expected-width="0" data-expected-height="0"></canvas>
</div>
</div>
<div class="cb">
<div class="test min-height stretch" data-expected-height="90">
<canvas width="10" height="20" data-expected-width="40" data-expected-height="80"></canvas>
</div>
</div>
<div class="cb">
<div class="test max-height" style="max-height: initial" data-expected-height="510">
<canvas width="10" height="20" data-expected-width="250" data-expected-height="500"></canvas>
</div>
</div>
<div class="cb">
<div class="test max-height" style="max-height: min-content" data-expected-height="510">
<canvas width="10" height="20" data-expected-width="250" data-expected-height="500"></canvas>
</div>
</div>
<div class="cb">
<div class="test max-height" style="max-height: fit-content" data-expected-height="510">
<canvas width="10" height="20" data-expected-width="250" data-expected-height="500"></canvas>
</div>
</div>
<div class="cb">
<div class="test max-height" style="max-height: max-content" data-expected-height="510">
<canvas width="10" height="20" data-expected-width="250" data-expected-height="500"></canvas>
</div>
</div>
<div class="cb">
<div class="test max-height stretch" data-expected-height="90">
<canvas width="10" height="20" data-expected-width="40" data-expected-height="80"></canvas>
</div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
document.fonts.ready.then(() => checkLayout(".test"));
</script>