141 lines
2.4 KiB
HTML
141 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<body>
|
|
<style>
|
|
#container {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
</style>
|
|
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
|
<div id="container">
|
|
<div id="host">
|
|
<span>a</span>
|
|
<span>b</span>
|
|
</div>
|
|
<div id="host2">
|
|
<span>a</span>
|
|
<span class="abs">b</span>
|
|
</div>
|
|
<div id="host3">
|
|
<span>a</span>
|
|
<span>b</span>
|
|
</div>
|
|
<div id="host4">
|
|
<span>a</span>
|
|
<span>b</span>
|
|
</div>
|
|
<div id="host5">
|
|
<span>a</span>
|
|
<span>b</span>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
|
|
document.querySelector('#host').attachShadow({mode:'closed'}).innerHTML = `
|
|
<style>
|
|
:host {
|
|
width: 100%;
|
|
height: 20%;
|
|
display: flex;
|
|
}
|
|
::slotted(span) {
|
|
flex: 1;
|
|
color: green;
|
|
background: green;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
<slot></slot>`;
|
|
|
|
document.querySelector('#host2').attachShadow({mode:'closed'}).innerHTML = `
|
|
<style>
|
|
:host {
|
|
width: 150%;
|
|
height: 20%;
|
|
display: flex;
|
|
}
|
|
::slotted(span) {
|
|
flex: 2;
|
|
color: green;
|
|
background: green;
|
|
display: inline-block;
|
|
z-index: 10;
|
|
height: 100%;
|
|
}
|
|
::slotted(span.abs) {
|
|
flex: 1;
|
|
background: red;
|
|
z-index: 5;
|
|
left: -75px;
|
|
position: relative;
|
|
}
|
|
</style>
|
|
<slot></slot>`;
|
|
|
|
document.querySelector('#host3').attachShadow({mode:'closed'}).innerHTML = `
|
|
<style>
|
|
:host {
|
|
width: 100%;
|
|
height: 20%;
|
|
}
|
|
:host(.flex) {
|
|
display:flex;
|
|
}
|
|
::slotted(span) {
|
|
flex: 1;
|
|
color: green;
|
|
background: green;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
<slot></slot>`;
|
|
window.getComputedStyle(document.querySelector('#host3')).width;
|
|
document.querySelector('#host3').className = "flex";
|
|
|
|
const root4 = document.querySelector('#host4').attachShadow({mode:'closed'});
|
|
root4.innerHTML = `
|
|
<style>
|
|
:host {
|
|
width: 100%;
|
|
height: 20%;
|
|
}
|
|
#deephost {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
background: red;
|
|
}
|
|
::slotted(span) {
|
|
flex: 1;
|
|
color: green;
|
|
background: green;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
<div id="deephost">
|
|
<slot></slot>
|
|
</div>`;
|
|
root4.querySelector('#deephost').attachShadow({mode:'closed'}).innerHTML = `<slot></slot>`;
|
|
|
|
document.querySelector('#host5').attachShadow({mode:'closed'}).innerHTML = `
|
|
<style>
|
|
:host {
|
|
width: 100%;
|
|
height: 20%;
|
|
}
|
|
::slotted(span) {
|
|
flex: 1;
|
|
color: green;
|
|
background: green;
|
|
height: 100%;
|
|
}
|
|
slot {
|
|
display:flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
<slot></slot>`;
|
|
|
|
</script>
|