mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-22 17:55:50 +00:00
ce0842d7b9
Sometimes, in very specific cases, the visible region gets simplified to one rect and is thus much bigger than the draw region. This becomes a problem if we decide to pull an opaque background color from a lower layer so that we are opaque. In which case we draw the background color over the whole visible region. But we use the draw region to determine if we can place items below this layer, so that background color could cover them incorrectly.
208 lines
8.2 KiB
HTML
208 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||
<style>
|
||
.container-ext {
|
||
padding-left: 180px;
|
||
padding-right: 180px;
|
||
}
|
||
|
||
.headline {
|
||
line-height: 30px;
|
||
text-shadow: 1px 1px rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
ul {
|
||
list-style: none;
|
||
}
|
||
|
||
.headline-left {
|
||
left: 30px;
|
||
}
|
||
|
||
.headline-right {
|
||
top: 20px !important;
|
||
/*bottom:370px !important;*/
|
||
right: 20px;
|
||
}
|
||
|
||
.headline-active {
|
||
position: fixed;
|
||
top: 100px;
|
||
}
|
||
|
||
.list-author:before,
|
||
.list-author:after {
|
||
content: "\200e";
|
||
display: table;
|
||
}
|
||
.list-author:after {
|
||
clear: both;
|
||
}
|
||
|
||
.list-author-vocal {
|
||
float: left;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.ff { position: fixed; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container-ext">
|
||
|
||
<div class="headline headline-left headline-active">
|
||
<ul class="list-author">
|
||
<li class="list-author-vocal">
|
||
A
|
||
</li>
|
||
<li class="list-author-vocal">
|
||
B
|
||
</li>
|
||
<li class="list-author-vocal">
|
||
C
|
||
</li>
|
||
<li class="list-author-vocal">
|
||
D
|
||
</li>
|
||
<li class="list-author-vocal">
|
||
E
|
||
</li>
|
||
</ul>
|
||
<ul class="list-author">
|
||
<li class="list-author-vocal">
|
||
F
|
||
</li>
|
||
<li class="list-author-vocal">
|
||
G
|
||
</li>
|
||
<li class="list-author-vocal">
|
||
H
|
||
</li>
|
||
<li class="list-author-vocal">
|
||
I
|
||
</li>
|
||
<li class="list-author-vocal">
|
||
J
|
||
</li>
|
||
</ul>
|
||
<ul class="list-author">
|
||
<li class="list-author-vocal">
|
||
K
|
||
</li>
|
||
<li class="list-author-vocal">
|
||
L
|
||
</li>
|
||
<li class="list-author-vocal">
|
||
M
|
||
</li>
|
||
<li class="list-author-vocal">
|
||
N
|
||
</li>
|
||
<li class="list-author-vocal">
|
||
O
|
||
</li>
|
||
</ul>
|
||
<ul class="list-author">
|
||
<li class="list-author-vocal active">
|
||
P
|
||
</li>
|
||
<li class="list-author-vocal">
|
||
R
|
||
</li>
|
||
<li class="list-author-vocal">
|
||
S
|
||
</li>
|
||
<li class="list-author-vocal">
|
||
T
|
||
</li>
|
||
<li class="list-author-vocal">
|
||
V
|
||
</li>
|
||
</ul>
|
||
<ul class="list-author">
|
||
<li class="list-author-vocal">
|
||
W
|
||
</li>
|
||
<li class="list-author-vocal">
|
||
Y
|
||
</li>
|
||
<li class="list-author-vocal">
|
||
Z
|
||
</li>
|
||
</ul>
|
||
<div class="ff" style="left: 69px; top: 115px; width: 3px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 69px; top: 145px; width: 3px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 69px; top: 161px; width: 3px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 69px; top: 191px; width: 3px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 69px; top: 207px; width: 3px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 69px; top: 237px; width: 3px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 69px; top: 253px; width: 3px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 69px; top: 283px; width: 3px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 69px; top: 299px; width: 3px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 135px; top: 299px; width: 4px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 135px; top: 299px; width: 4px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 135px; top: 299px; width: 4px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 135px; top: 299px; width: 4px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 69px; top: 329px; width: 3px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 69px; top: 345px; width: 3px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 68px; top: 352px; width: 41px; height: 19px; background: blue;"></div>
|
||
<div class="ff" style="left: 68px; top: 382px; width: 41px; height: 19px; background: blue;"></div>
|
||
<div class="ff" style="left: 68px; top: 412px; width: 41px; height: 19px; background: blue;"></div>
|
||
<div class="ff" style="left: 68px; top: 442px; width: 41px; height: 19px; background: blue;"></div>
|
||
<div class="ff" style="left: 69px; top: 465px; width: 3px; height: 3px; background: blue;"></div>
|
||
<div class="ff" style="left: 69px; top: 469px; width: 3px; height: 3px; background: blue;"></div><!-- only needed after whitespace opt -->
|
||
<div class="ff" style="left: 69px; top: 473px; width: 3px; height: 3px; background: blue;"></div><!-- only needed after whitespace opt -->
|
||
|
||
<ul class="list-author">
|
||
<li>
|
||
Word
|
||
</li>
|
||
<li>
|
||
Word
|
||
</li>
|
||
<li>
|
||
Word
|
||
</li>
|
||
<li>
|
||
Word
|
||
</li>
|
||
</ul>
|
||
</div> <!-- headline headline-left headline-active -->
|
||
<div class="headline headline-right headline-active">
|
||
<!--‎f--><div style="width: 2px; height: 2px; background: white;"></div>
|
||
</div>
|
||
|
||
<div style="position:relative;">
|
||
<div style="height: 4000px; background: red;">
|
||
</div>
|
||
</div>
|
||
</div> <!-- container-ext -->
|
||
</body>
|
||
</html>
|