mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-12 14:20:14 +02:00
62 lines
No EOL
1.7 KiB
HTML
62 lines
No EOL
1.7 KiB
HTML
<!doctype html>
|
|
<meta charset=utf-8>
|
|
<title>Layout Helpers</title>
|
|
<style id="styles">
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#hidden-node {
|
|
display: none;
|
|
}
|
|
|
|
#simple-node-with-margin-padding-border {
|
|
width: 200px;
|
|
height: 200px;
|
|
background: #f06;
|
|
|
|
padding: 20px;
|
|
margin: 50px;
|
|
border: 10px solid black;
|
|
}
|
|
|
|
#scrolled-node {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
width: 300px;
|
|
height: 100px;
|
|
overflow: scroll;
|
|
background: linear-gradient(red, pink);
|
|
}
|
|
|
|
#sub-scrolled-node {
|
|
width: 200px;
|
|
height: 200px;
|
|
overflow: scroll;
|
|
background: linear-gradient(yellow, green);
|
|
}
|
|
|
|
#inner-scrolled-node {
|
|
width: 100px;
|
|
height: 400px;
|
|
background: linear-gradient(black, white);
|
|
}
|
|
</style>
|
|
<div id="hidden-node"></div>
|
|
<div id="simple-node-with-margin-padding-border"></div>
|
|
<!-- The inline encoded code below corresponds to:
|
|
<iframe style="margin:10px;border:0;width:300px;height:300px;">
|
|
<iframe style="margin:10px;border:0;width:200px;height:200px;">
|
|
<div id="inner-node" style="width:100px;height:100px;border:10px solid red;margin:10px;padding:10px;"></div>
|
|
</iframe>
|
|
</iframe>
|
|
-->
|
|
<iframe src="data:text/html,%3Cstyle%3Ebody%7Bmargin:0;padding:0;%7D%3C/style%3E%3Ciframe%20src=%22data:text/html,%253Cstyle%253Ebody%257Bmargin:0;padding:0;%257D%253C/style%253E%253Cdiv%2520id='inner-node'%2520style='width:100px;height:100px;border:10px%2520solid%2520red;margin:10px;padding:10px;'%253E%253C/div%253E%22%20style=%22margin:10px;border:0;width:200px;height:200px;%22%3E%3C/iframe%3E" style="margin:10px;border:0;width:300px;height:300px;"></iframe>
|
|
<div id="scrolled-node">
|
|
<div id="sub-scrolled-node">
|
|
<div id="inner-scrolled-node"></div>
|
|
</div>
|
|
</div> |