mirror of
https://github.com/lexmount/moli.git
synced 2026-09-23 16:01:25 +00:00
64 lines
5.6 KiB
HTML
64 lines
5.6 KiB
HTML
<!doctype html>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
html,body{margin:0;padding:0;background:white}
|
|
#stage{position:relative;width:800px;height:600px}
|
|
.cb{position:absolute;top:20px;box-sizing:border-box;width:160px;height:100px;border:4px solid black;padding:6px;background:rgb(230,230,230)}
|
|
#layout{left:20px;contain:layout}
|
|
#paint{left:220px;contain:paint}
|
|
#content{left:420px;contain:content}
|
|
#strict{left:620px;contain:strict}
|
|
.abs{position:absolute;right:10px;top:8px;width:20px;height:16px;background:red}
|
|
.fixed{position:fixed;left:12px;top:10px;width:18px;height:14px;background:blue}
|
|
.overflow{position:absolute;left:-20px;bottom:-20px;width:40px;height:40px;background:lime}
|
|
#shadow-host{position:absolute;left:100px;top:180px;width:300px;height:100px;background:rgb(240,240,240)}
|
|
#inline-outer{position:absolute;left:500px;top:180px;width:250px;height:100px;background:rgb(240,240,240)}
|
|
#inline-container{contain:paint}
|
|
#inline-abs{position:absolute;right:5px;top:6px;width:20px;height:15px;background:purple}
|
|
#will-contain{position:absolute;left:20px;top:320px;width:140px;height:80px;will-change:contain;background:silver}
|
|
#will-position{position:absolute;left:180px;top:320px;width:140px;height:80px;will-change:position;background:silver}
|
|
#will-transform{position:absolute;left:340px;top:320px;width:140px;height:80px;will-change:transform;background:silver}
|
|
#content-auto{position:absolute;left:380px;top:500px;width:140px;height:80px;content-visibility:auto;background:silver}
|
|
.will-abs{position:absolute;right:7px;top:8px;width:20px;height:15px}
|
|
.will-fixed{position:fixed;left:9px;top:10px;width:18px;height:14px}
|
|
#bfc-row{position:absolute;left:20px;top:430px;width:500px}
|
|
.bfc{display:block;position:relative;width:100px;background:yellow}
|
|
.bfc.plain{left:0}
|
|
.bfc.layout{left:120px;contain:layout}
|
|
.bfc.paint{left:220px;contain:paint}
|
|
.float{float:left;width:20px;height:30px;background:red}
|
|
#table{position:absolute;left:560px;top:320px;width:220px;height:100px}
|
|
#table-row{contain:paint}
|
|
#table-cell-contained{contain:paint}
|
|
.table-abs{position:absolute;right:3px;top:4px;width:10px;height:10px}
|
|
</style>
|
|
<div id="stage">
|
|
<div id="layout" class="cb"><div id="layout-abs" class="abs"></div><div id="layout-fixed" class="fixed"></div><div class="overflow"></div></div>
|
|
<div id="paint" class="cb"><div id="paint-abs" class="abs"></div><div id="paint-fixed" class="fixed"></div><div class="overflow"></div></div>
|
|
<div id="content" class="cb"><div id="content-abs" class="abs"></div><div id="content-fixed" class="fixed"></div><div class="overflow"></div></div>
|
|
<div id="strict" class="cb"><div id="strict-abs" class="abs"></div><div id="strict-fixed" class="fixed"></div><div class="overflow"></div></div>
|
|
<div id="shadow-host"></div>
|
|
<div id="inline-outer"><span id="inline-container">inline<div id="inline-abs"></div></span></div>
|
|
<div id="will-contain"><div id="will-contain-abs" class="will-abs"></div><div id="will-contain-fixed" class="will-fixed"></div></div>
|
|
<div id="will-position"><div id="will-position-abs" class="will-abs"></div><div id="will-position-fixed" class="will-fixed"></div></div>
|
|
<div id="will-transform"><div id="will-transform-abs" class="will-abs"></div><div id="will-transform-fixed" class="will-fixed"></div></div>
|
|
<div id="content-auto"><div id="content-auto-abs" class="will-abs"></div><div id="content-auto-fixed" class="will-fixed"></div></div>
|
|
<div id="bfc-row"><div id="plain-bfc" class="bfc plain"><div class="float"></div></div><div id="layout-bfc" class="bfc layout"><div class="float"></div></div><div id="paint-bfc" class="bfc paint"><div class="float"></div></div></div>
|
|
<table id="table"><tbody><tr id="table-row"><td><div id="row-abs" class="table-abs"></div></td></tr><tr><td id="table-cell-contained"><div id="cell-abs" class="table-abs"></div></td></tr></tbody></table>
|
|
</div>
|
|
<pre id="output"></pre>
|
|
<script>
|
|
const shadow=document.getElementById('shadow-host').attachShadow({mode:'open'});
|
|
shadow.innerHTML=`<style>.root{contain:content;margin-left:40px;width:200px;height:100px;background:orange}.action{position:absolute;right:8px;top:9px;width:30px;height:20px;background:black}</style><div id=root class=root><div id=shadow-action class=action></div></div>`;
|
|
const ids=['layout','layout-abs','layout-fixed','paint','paint-abs','paint-fixed','content','content-abs','content-fixed','strict','strict-abs','strict-fixed','inline-outer','inline-container','inline-abs','will-contain','will-contain-abs','will-contain-fixed','will-position','will-position-abs','will-position-fixed','will-transform','will-transform-abs','will-transform-fixed','content-auto','content-auto-abs','content-auto-fixed','plain-bfc','layout-bfc','paint-bfc','table','table-row','table-cell-contained','row-abs','cell-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))]));
|
|
geometry['shadow-host']=rect(document.getElementById('shadow-host'));
|
|
geometry['shadow-root']=rect(shadow.getElementById('root'));
|
|
geometry['shadow-action']=rect(shadow.getElementById('shadow-action'));
|
|
const offsets={};
|
|
for(const id of ['layout-abs','layout-fixed','paint-abs','paint-fixed','content-abs','content-fixed','strict-abs','strict-fixed','inline-abs','will-contain-abs','will-contain-fixed','will-position-abs','will-position-fixed','will-transform-abs','will-transform-fixed','content-auto-abs','content-auto-fixed','row-abs','cell-abs']) offsets[id]=document.getElementById(id).offsetParent?.id??null;
|
|
offsets['shadow-action']=shadow.getElementById('shadow-action').offsetParent?.id??null;
|
|
document.getElementById('output').textContent=JSON.stringify({geometry,offsets});
|
|
</script>
|