Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-07 06:25:32 +01:00
Code Issues Projects Releases Packages Wiki Activity

layout: Implement opacity per CSS-COLOR § 3.2.

Browse source 
This adds the infrastructure necessary to support stacking contexts that
are not containing blocks for absolutely-positioned elements. Our
infrastructure did not support that before. This minor revamp actually
ended up simplifying the logic around display list building and
stacking-relative position computation for absolutely-positioned flows,
which was nice.
This commit is contained in:
Patrick Walton 2014-11-18 15:37:53 -08:00
parent 873ca6cadd
commit 1c1c507c03
17 changed files with 421 additions and 146 deletions
Download patch file Download diff file Expand all files Collapse all files

3
tests/ref/basic.list
View file

@ -185,4 +185,5 @@ fragment=top != ../html/acid2.html acid2_ref.html
!= linear_gradients_corners_a.html linear_gradients_corners_ref.html
== linear_gradients_lengths_a.html linear_gradients_lengths_ref.html
== incremental_float_a.html incremental_float_ref.html
== table_specified_width_a.html table_specified_width_ref.html
== opacity_simple_a.html opacity_simple_ref.html
== opacity_stacking_context_a.html opacity_stacking_context_ref.html

27
tests/ref/opacity_simple_a.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that opacity works. -->
<style>
section {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
left: 50px;
}
#a {
background: #800000;
}
#b {
background: #000080;
opacity: 0.75;
}
</style>
</head>
<body>
<section id=a></section>
<section id=b></section>
</body>
</html>

20
tests/ref/opacity_simple_ref.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that opacity works. -->
<style>
section {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
left: 50px;
background: #200060;
}
</style>
</head>
<body>
<section></section>
</body>
</html>

48
tests/ref/opacity_stacking_context_a.html Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that `opacity` causes a new stacking context to be formed. -->
<style>
section {
position: absolute;
width: 100px;
height: 100px;
}
#a {
background: red;
top: 0;
left: 0;
z-index: 1;
}
#b {
background: #00ff00;
top: 25px;
left: 25px;
z-index: 2;
}
#c {
background: blue;
top: 50px;
left: 50px;
z-index: 3;
}
#container {
opacity: 0.5;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<section id=a></section>
<section id=c></section>
<div id=container>
<section id=b></section>
</div>
</body>
</html>

48
tests/ref/opacity_stacking_context_ref.html Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<!-- Tests that `opacity` causes a new stacking context to be formed. -->
<style>
section {
position: absolute;
width: 100px;
height: 100px;
}
#a {
background: red;
top: 0;
left: 0;
z-index: 2;
}
#b {
background: #00ff00;
top: 25px;
left: 25px;
z-index: 1;
opacity: 0.5;
}
#c {
background: blue;
top: 50px;
left: 50px;
z-index: 3;
}
#container {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<section id=a></section>
<section id=c></section>
<div id=container>
<section id=b></section>
</div>
</body>
</html>