mirror of
https://github.com/lexmount/moli.git
synced 2026-09-23 08:01:28 +00:00
58 lines
4.7 KiB
HTML
58 lines
4.7 KiB
HTML
<!doctype html>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
html,body{margin:0;padding:0;background:white}
|
|
#stage{position:relative;width:800px;height:600px}
|
|
.case{position:absolute;height:70px;background:rgb(235,235,235);font-size:0}
|
|
.prefix{display:inline-block;width:30px;height:10px;background:rgb(80,80,80)}
|
|
.abs{position:absolute;top:5px;background:rgb(200,220,255)}
|
|
.headline{height:auto;background:rgb(220,255,220)}
|
|
.primary,.secondary{display:inline-block;height:20px}
|
|
.primary{width:160px;background:rgb(255,0,0)}
|
|
.secondary{width:80px;margin-left:8px;background:rgb(0,0,255)}
|
|
#left-max-case{left:20px;top:20px;width:300px}
|
|
#left-limit-case{left:380px;top:20px;width:200px}
|
|
#left-min-case{left:640px;top:20px;width:120px}
|
|
#right-max-case{left:20px;top:110px;width:300px}
|
|
#stretch-case{left:380px;top:110px;width:300px}
|
|
#margin-min-case{left:20px;top:200px;width:200px}
|
|
#max-clamp-case{left:260px;top:200px;width:300px}
|
|
#min-clamp-case{left:20px;top:290px;width:300px}
|
|
#specified-case{left:380px;top:290px;width:300px}
|
|
#static-ltr-case{left:20px;top:380px;width:300px}
|
|
#static-rtl-case{left:380px;top:380px;width:300px;direction:rtl;text-align:left}
|
|
#flex-case{display:flex;left:20px;top:470px;width:300px}
|
|
#left-max{left:20px}
|
|
#left-limit{left:20px}
|
|
#left-min{left:10px}
|
|
#right-max{right:20px}
|
|
#stretch{left:20px;right:30px}
|
|
#margin-min{left:20px;margin-left:10px;margin-right:15px}
|
|
#max-clamp{left:20px;max-width:200px}
|
|
#min-clamp{left:20px;min-width:260px}
|
|
#specified{left:20px;width:120px}
|
|
#flex-abs{left:20px}
|
|
</style>
|
|
<div id="stage">
|
|
<div id="left-max-case" class="case"><span class="prefix"></span><div id="left-max" class="abs"><div class="headline"><span class="primary"></span> <span class="secondary"></span></div></div></div>
|
|
<div id="left-limit-case" class="case"><span class="prefix"></span><div id="left-limit" class="abs"><div class="headline"><span class="primary"></span> <span class="secondary"></span></div></div></div>
|
|
<div id="left-min-case" class="case"><span class="prefix"></span><div id="left-min" class="abs"><div class="headline"><span class="primary"></span> <span class="secondary"></span></div></div></div>
|
|
<div id="right-max-case" class="case"><span class="prefix"></span><div id="right-max" class="abs"><div class="headline"><span class="primary"></span> <span class="secondary"></span></div></div></div>
|
|
<div id="stretch-case" class="case"><span class="prefix"></span><div id="stretch" class="abs"><div class="headline"><span class="primary"></span> <span class="secondary"></span></div></div></div>
|
|
<div id="margin-min-case" class="case"><span class="prefix"></span><div id="margin-min" class="abs"><div class="headline"><span class="primary"></span> <span class="secondary"></span></div></div></div>
|
|
<div id="max-clamp-case" class="case"><span class="prefix"></span><div id="max-clamp" class="abs"><div class="headline"><span class="primary"></span> <span class="secondary"></span></div></div></div>
|
|
<div id="min-clamp-case" class="case"><span class="prefix"></span><div id="min-clamp" class="abs"><div class="headline"><span class="primary"></span> <span class="secondary"></span></div></div></div>
|
|
<div id="specified-case" class="case"><span class="prefix"></span><div id="specified" class="abs"><div class="headline"><span class="primary"></span> <span class="secondary"></span></div></div></div>
|
|
<div id="static-ltr-case" class="case"><span id="static-ltr-prefix" class="prefix"></span><span id="static-ltr" class="abs"><span class="primary"></span> <span class="secondary"></span></span></div>
|
|
<div id="static-rtl-case" class="case"><span id="static-rtl-prefix" class="prefix"></span><span id="static-rtl" class="abs"><span class="primary"></span> <span class="secondary"></span></span></div>
|
|
<div id="flex-case" class="case"><span class="prefix"></span><div id="flex-abs" class="abs"><div class="headline"><span class="primary"></span> <span class="secondary"></span></div></div></div>
|
|
</div>
|
|
<pre id="output"></pre>
|
|
<script>
|
|
const ids=['left-max-case','left-max','left-limit-case','left-limit','left-min-case','left-min','right-max-case','right-max','stretch-case','stretch','margin-min-case','margin-min','max-clamp-case','max-clamp','min-clamp-case','min-clamp','specified-case','specified','static-ltr-case','static-ltr-prefix','static-ltr','static-rtl-case','static-rtl-prefix','static-rtl','flex-case','flex-abs'];
|
|
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 offsets=Object.fromEntries(ids.filter(id=>!id.endsWith('-case')).map(id=>[id,document.getElementById(id).offsetParent?.id??null]));
|
|
document.getElementById('output').textContent=JSON.stringify({geometry,offsets});
|
|
</script>
|