layout: Paint stacking contexts' overflow areas properly.

This was making `box-shadow` not show up in many cases, in particular,
but the effects were not limited to that.
This commit is contained in:
Patrick Walton 2014-12-18 18:59:42 -08:00
parent ba8cf6b0e6
commit 5ea2c6dcfd
30 changed files with 357 additions and 179 deletions

View file

@ -222,3 +222,5 @@ fragment=top != ../html/acid2.html acid2_ref.html
!= inset_blackborder.html blackborder_ref.html
!= outset_blackborder.html blackborder_ref.html
== border_radius_clip_a.html border_radius_clip_ref.html
== stacking_context_overflow_a.html stacking_context_overflow_ref.html
== stacking_context_overflow_relative_outline_a.html stacking_context_overflow_relative_outline_ref.html

View file

@ -1,7 +1,7 @@
<html>
<body>
<div style="position: absolute; top: 0px; left: 0px;">
<div style="position: absolute; background: green; margin-left: 512px; width: 20px; height: 20px;"></div>
<div style="position: absolute; background: green; top: 0; margin-left: 512px; width: 20px; height: 20px;"></div>
<!-- This position:fixed sibling should force its sibling to be layerized. -->
<div style="position: fixed;"></div>

View file

@ -0,0 +1,22 @@
<html>
<head>
<!-- Tests that stacking contexts display overflow. -->
<style>
body {
margin: 0;
}
section {
position: absolute;
z-index: 1;
width: 72px;
height: 72px;
border: solid black 2px;
font: 24px Arial;
}
</style>
</head>
<body>
<section>CSS IS AWESOME</section>
</body>
</html>

View file

@ -0,0 +1,21 @@
<html>
<head>
<!-- Tests that stacking contexts display overflow. -->
<style>
body {
margin: 0;
}
section {
width: 72px;
height: 72px;
border: solid black 2px;
font: 24px Arial;
}
</style>
</head>
<body>
<section>CSS IS AWESOME</section>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<style>
section {
position: absolute;
top: 100px;
left: 100px;
width: 10px;
height: 10px;
}
h1 {
position: relative;
top: -50px;
left: -50px;
width: 200px;
height: 200px;
margin: 0;
outline: solid 10px green;
}
</style>
<body>
<section><h1></h1></section>
</body>
</html>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<style>
section {
position: absolute;
top: 40px;
left: 40px;
width: 200px;
height: 200px;
border: solid 10px green;
}
</style>
<body>
<section></section>
</body>
</html>