mirror of
https://github.com/lexmount/moli.git
synced 2026-09-23 00:01:25 +00:00
129 lines
12 KiB
HTML
129 lines
12 KiB
HTML
<!doctype html>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
html,body{margin:0;padding:0;background:white}
|
|
#stage{position:relative;width:1200px;height:1420px}
|
|
.case{position:absolute;width:300px;height:70px;background:rgb(235,235,235);font-size:0}
|
|
.narrow{width:200px}
|
|
.very-narrow{width:120px}
|
|
.probe{height:20px;background:rgb(200,220,255)}
|
|
.a,.b{display:inline-block;height:20px}
|
|
.a{width:160px;background:rgb(255,0,0)}
|
|
.b{width:80px;margin-left:8px;background:rgb(0,0,255)}
|
|
#min-case{left:20px;top:20px}
|
|
#max-case{left:380px;top:20px}
|
|
#fit-case{left:740px;top:20px}
|
|
#fit-narrow-case{left:20px;top:120px}
|
|
#fit-min-case{left:380px;top:120px}
|
|
#min-clamp-case{left:740px;top:120px}
|
|
#max-clamp-case{left:20px;top:220px}
|
|
#conflict-case{left:380px;top:220px}
|
|
#content-box-case{left:740px;top:220px}
|
|
#border-box-case{left:20px;top:320px}
|
|
#flex-min-case{left:380px;top:320px;display:flex}
|
|
#flex-max-case{left:740px;top:320px;display:flex}
|
|
#flex-cross-case{left:20px;top:420px;display:flex;flex-direction:column}
|
|
#grid-min-case{left:380px;top:420px;display:grid}
|
|
#grid-max-case{left:740px;top:420px;display:grid}
|
|
#absolute-min-case{left:20px;top:520px;position:absolute}
|
|
#absolute-fit-case{left:380px;top:520px;position:absolute;width:200px}
|
|
#float-min-case{left:740px;top:520px}
|
|
#float-max-case{left:20px;top:620px}
|
|
#replaced-case{left:380px;top:620px}
|
|
#stretch-case{left:740px;top:620px}
|
|
#webkit-fill-case{left:20px;top:720px}
|
|
#aspect-block-case{left:380px;top:720px}
|
|
#aspect-flex-case{left:740px;top:720px}
|
|
#aspect-grid-case{left:20px;top:820px}
|
|
#flex-grow-case{left:380px;top:820px;display:flex}
|
|
#flex-shrink-case{left:740px;top:820px;width:120px;display:flex}
|
|
#flex-basis-content-case{left:20px;top:920px;display:flex}
|
|
#auto-grid-min-case{left:380px;top:920px}
|
|
#auto-grid-max-case{left:740px;top:920px}
|
|
#absolute-inset-fit-case{left:20px;top:1020px;width:200px}
|
|
#float-fit-margin-case{left:380px;top:1020px;width:200px}
|
|
#float-stretch-margin-case{left:740px;top:1020px;width:200px}
|
|
#inline-min-case{left:20px;top:1120px}
|
|
#inline-max-case{left:380px;top:1120px}
|
|
#inline-fit-case{left:740px;top:1120px;width:200px}
|
|
#min-fit-case{left:20px;top:1220px;width:200px}
|
|
#max-fit-case{left:380px;top:1220px;width:200px}
|
|
#min-stretch-case{left:740px;top:1220px}
|
|
#max-stretch-case{left:20px;top:1320px}
|
|
#min-webkit-fill-case{left:380px;top:1320px}
|
|
#max-webkit-fill-case{left:740px;top:1320px}
|
|
.edge{padding:0 10px;border:2px solid rgb(0,0,0)}
|
|
.content-box{box-sizing:content-box}
|
|
.border-box{box-sizing:border-box}
|
|
.flex-item{flex:0 0 auto}
|
|
.absolute{position:absolute;left:0;right:0}
|
|
.float{float:left}
|
|
.stretch{margin-left:10px;margin-right:15px}
|
|
.aspect-probe{height:20px;aspect-ratio:20}
|
|
.grow{flex:1 1 auto}
|
|
.shrink{flex:0 1 auto;min-width:0}
|
|
.basis-content{flex:0 0 content}
|
|
.auto-grid{display:grid;width:max-content}
|
|
</style>
|
|
<div id="stage">
|
|
<div id="min-case" class="case"><div id="min" class="probe" style="width:min-content"><span class="a"></span> <span class="b"></span></div></div>
|
|
<div id="max-case" class="case"><div id="max" class="probe" style="width:max-content"><span class="a"></span> <span class="b"></span></div></div>
|
|
<div id="fit-case" class="case"><div id="fit" class="probe" style="width:fit-content"><span class="a"></span> <span class="b"></span></div></div>
|
|
<div id="fit-narrow-case" class="case narrow"><div id="fit-narrow" class="probe" style="width:fit-content"><span class="a"></span> <span class="b"></span></div></div>
|
|
<div id="fit-min-case" class="case very-narrow"><div id="fit-min" class="probe" style="width:fit-content"><span class="a"></span> <span class="b"></span></div></div>
|
|
<div id="min-clamp-case" class="case"><div id="min-clamp" class="probe" style="width:100px;min-width:max-content"><span class="a"></span> <span class="b"></span></div></div>
|
|
<div id="max-clamp-case" class="case"><div id="max-clamp" class="probe" style="width:300px;max-width:min-content"><span class="a"></span> <span class="b"></span></div></div>
|
|
<div id="conflict-case" class="case"><div id="conflict" class="probe" style="width:200px;min-width:max-content;max-width:min-content"><span class="a"></span> <span class="b"></span></div></div>
|
|
<div id="content-box-case" class="case"><div id="content-box" class="probe edge content-box" style="width:min-content"><span class="a"></span> <span class="b"></span></div></div>
|
|
<div id="border-box-case" class="case"><div id="border-box" class="probe edge border-box" style="width:min-content"><span class="a"></span> <span class="b"></span></div></div>
|
|
<div id="flex-min-case" class="case"><div id="flex-min" class="probe flex-item" style="width:min-content"><span class="a"></span> <span class="b"></span></div></div>
|
|
<div id="flex-max-case" class="case"><div id="flex-max" class="probe flex-item" style="width:max-content"><span class="a"></span> <span class="b"></span></div></div>
|
|
<div id="flex-cross-case" class="case"><div id="flex-cross" class="probe" style="width:min-content"><span class="a"></span> <span class="b"></span></div></div>
|
|
<div id="grid-min-case" class="case"><div id="grid-min" class="probe" style="width:min-content"><span class="a"></span> <span class="b"></span></div></div>
|
|
<div id="grid-max-case" class="case"><div id="grid-max" class="probe" style="width:max-content"><span class="a"></span> <span class="b"></span></div></div>
|
|
<div id="absolute-min-case" class="case"><div id="absolute-min" class="probe absolute" style="width:min-content"><span class="a"></span> <span class="b"></span></div></div>
|
|
<div id="absolute-fit-case" class="case"><div id="absolute-fit" class="probe absolute" style="width:fit-content"><span class="a"></span> <span class="b"></span></div></div>
|
|
<div id="float-min-case" class="case"><div id="float-min" class="probe float" style="width:min-content"><span class="a"></span> <span class="b"></span></div></div>
|
|
<div id="float-max-case" class="case"><div id="float-max" class="probe float" style="width:max-content"><span class="a"></span> <span class="b"></span></div></div>
|
|
<div id="replaced-case" class="case"><svg id="replaced" style="display:block;width:min-content;background:rgb(200,220,255)" width="180" height="40" viewBox="0 0 180 40"></svg></div>
|
|
<div id="stretch-case" class="case"><div id="stretch" class="probe stretch" style="width:stretch"></div></div>
|
|
<div id="webkit-fill-case" class="case"><div id="webkit-fill" class="probe stretch" style="width:-webkit-fill-available"></div></div>
|
|
<div id="aspect-block-case" class="case"><div id="aspect-block" class="probe aspect-probe" style="width:min-content"><span class="a"></span> <span class="b"></span></div></div>
|
|
<div id="aspect-flex-case" class="case"><div id="aspect-flex" class="probe aspect-probe" style="display:flex;width:min-content"><span class="a"></span><span class="b"></span></div></div>
|
|
<div id="aspect-grid-case" class="case"><div id="aspect-grid" class="probe aspect-probe" style="display:grid;width:min-content"><span class="a"></span><span class="b"></span></div></div>
|
|
<div id="flex-grow-case" class="case"><div id="flex-grow" class="probe grow" style="width:min-content"><span class="a"></span> <span class="b"></span></div></div>
|
|
<div id="flex-shrink-case" class="case"><div id="flex-shrink" class="probe shrink" style="width:max-content"><span class="a"></span> <span class="b"></span></div></div>
|
|
<div id="flex-basis-content-case" class="case"><div id="flex-basis-content" class="probe basis-content" style="width:min-content"><span class="a"></span> <span class="b"></span></div></div>
|
|
<div id="auto-grid-min-case" class="case"><div id="auto-grid-min" class="auto-grid"><div id="auto-grid-min-item" class="probe" style="width:min-content"><span class="a"></span> <span class="b"></span></div></div></div>
|
|
<div id="auto-grid-max-case" class="case"><div id="auto-grid-max" class="auto-grid"><div id="auto-grid-max-item" class="probe" style="width:max-content"><span class="a"></span> <span class="b"></span></div></div></div>
|
|
<div id="absolute-inset-fit-case" class="case"><div id="absolute-inset-fit" class="probe absolute" style="left:40px;right:auto;width:fit-content"><span class="a"></span> <span class="b"></span></div></div>
|
|
<div id="float-fit-margin-case" class="case"><div id="float-fit-margin" class="probe float stretch" style="width:fit-content"><span class="a"></span> <span class="b"></span></div></div>
|
|
<div id="float-stretch-margin-case" class="case"><div id="float-stretch-margin" class="probe float stretch" style="width:stretch"><span class="a"></span> <span class="b"></span></div></div>
|
|
<div id="inline-min-case" class="case"><span id="inline-min" class="probe" style="display:inline-block;width:min-content"><span class="a"></span> <span class="b"></span></span></div>
|
|
<div id="inline-max-case" class="case"><span id="inline-max" class="probe" style="display:inline-block;width:max-content"><span class="a"></span> <span class="b"></span></span></div>
|
|
<div id="inline-fit-case" class="case"><span id="inline-fit" class="probe" style="display:inline-block;width:fit-content"><span class="a"></span> <span class="b"></span></span></div>
|
|
<div id="min-fit-case" class="case"><div id="min-fit" class="probe" style="width:100px;min-width:fit-content"><span class="a"></span> <span class="b"></span></div></div>
|
|
<div id="max-fit-case" class="case"><div id="max-fit" class="probe" style="width:300px;max-width:fit-content"><span class="a"></span> <span class="b"></span></div></div>
|
|
<div id="min-stretch-case" class="case"><div id="min-stretch" class="probe stretch" style="width:100px;min-width:stretch"></div></div>
|
|
<div id="max-stretch-case" class="case"><div id="max-stretch" class="probe stretch" style="width:400px;max-width:stretch"></div></div>
|
|
<div id="min-webkit-fill-case" class="case"><div id="min-webkit-fill" class="probe stretch" style="width:100px;min-width:-webkit-fill-available"></div></div>
|
|
<div id="max-webkit-fill-case" class="case"><div id="max-webkit-fill" class="probe stretch" style="width:400px;max-width:-webkit-fill-available"></div></div>
|
|
</div>
|
|
<pre id="output"></pre>
|
|
<script>
|
|
const ids=['min','max','fit','fit-narrow','fit-min','min-clamp','max-clamp','conflict','content-box','border-box','flex-min','flex-max','flex-cross','grid-min','grid-max','absolute-min','absolute-fit','float-min','float-max','replaced','stretch','webkit-fill','aspect-block','aspect-flex','aspect-grid','flex-grow','flex-shrink','flex-basis-content','auto-grid-min','auto-grid-min-item','auto-grid-max','auto-grid-max-item','absolute-inset-fit','float-fit-margin','float-stretch-margin','inline-min','inline-max','inline-fit','min-fit','max-fit','min-stretch','max-stretch','min-webkit-fill','max-webkit-fill'];
|
|
const rect=e=>{const r=e.getBoundingClientRect();return [r.x,r.y,r.width,r.height]};
|
|
const geometry=Object.fromEntries(ids.map(id=>[id,rect(document.getElementById(id))]));
|
|
const computed=Object.fromEntries(['min-clamp','max-clamp','conflict','min-fit','max-fit','min-stretch','max-stretch','min-webkit-fill','max-webkit-fill'].map(id=>{const s=getComputedStyle(document.getElementById(id));return [id,{width:s.width,minWidth:s.minWidth,maxWidth:s.maxWidth}]}));
|
|
const syntaxValues=['min-content','max-content','fit-content','fit-content(120px)','fit-content(50%)','stretch','-webkit-fill-available'];
|
|
const supports=Object.fromEntries(syntaxValues.map(value=>[value,CSS.supports('width',value)]));
|
|
supports['grid-fit-content(120px)']=CSS.supports('grid-template-columns','fit-content(120px)');
|
|
supports['min-width:fit-content']=CSS.supports('min-width','fit-content');
|
|
supports['max-width:fit-content']=CSS.supports('max-width','fit-content');
|
|
supports['min-width:stretch']=CSS.supports('min-width','stretch');
|
|
supports['max-width:stretch']=CSS.supports('max-width','stretch');
|
|
supports['min-width:-webkit-fill-available']=CSS.supports('min-width','-webkit-fill-available');
|
|
supports['max-width:-webkit-fill-available']=CSS.supports('max-width','-webkit-fill-available');
|
|
document.getElementById('output').textContent=JSON.stringify({geometry,computed,supports});
|
|
</script>
|