Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-16 19:05:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Z-index should be ignored for non-positioned stacking contexts

Browse source 
When a stacking-context is not positioned, its z-index should be
ignored. This is per CSS 2 9.9.1. The only exception to this is when
the z-index is applied to an element with display: flex | inline-flex.
inline-flex does not appear to be implemented at this time so we only
do this for flex.
This commit is contained in:
Martin Robinson 2015-10-14 15:13:59 -07:00
parent ef1f0479ad
commit f2a66af463
4 changed files with 36 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

7
tests/wpt/mozilla/tests/css/stacked_layers.html
View file

@ -20,5 +20,12 @@
<div class="grayer box" style="margin-left: 10px; margin-top: 10px; position: fixed;"></div>
<div class="gray box" style="margin-left: 20px; margin-top: 10px; position: absolute; top: 20px; z-index: 5;"> </div>
</div>
<!-- The z-index of the second box should be ignored since it is not a positioned element.
so these boxes stack in tree order. -->
<div class="test grayest box">
<div class="grayer box" style="margin-left: 10px; margin-top: 10px; opacity: 0.999; z-index: -1;"></div>
<div class="gray box" style="margin-left: 20px; margin-top: -40px; opacity: 0.999;"> </div>
</div>
</body>
</html>

7
tests/wpt/mozilla/tests/css/stacked_layers_ref.html
View file

@ -12,12 +12,17 @@
<body>
<div class="test grayest box">
<div class="grayer box" style="margin-left: 10px; margin-top: 10px; position: absolute;"></div>
<div class="gray box" style="margin-left: 20px; margin-top: 10px; position: relative; top: 10px; z-index: 5;"></div>
<div class="gray box" style="margin-left: 20px; margin-top: 20px; position: relative; z-index: 5;"></div>
</div>
<div class="test grayest box">
<div class="grayer box" style="margin-left: 10px; margin-top: 10px; position: absolute;"></div>
<div class="gray box" style="margin-left: 20px; margin-top: 10px; position: absolute; top: 20px; z-index: 5;"></div>
</div>
<div class="test grayest box">
<div class="grayer box" style="margin-left: 10px; margin-top: 10px; position: absolute; opacity: 0.999;"></div>
<div class="gray box" style="margin-left: 20px; margin-top: 20px; position: relative; opacity: 0.999;"></div>
</div>
</body>
</html>