1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-2.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,88 @@
1.4 +<!DOCTYPE html>
1.5 +<!--
1.6 + Any copyright is dedicated to the Public Domain.
1.7 + http://creativecommons.org/publicdomain/zero/1.0/
1.8 +-->
1.9 +<!-- This testcase checks flex items are painted atomically. In particular,
1.10 + if one item has content that overflows into the region of another item,
1.11 + then one item is painted "behind" the other; there shouldn't normally
1.12 + any interleaving of backgrounds and content between the two items.
1.13 +
1.14 + This testcase also tests some special cases that will change the paint
1.15 + ordering - specifically, the properties "position", "z-index", and
1.16 + "order" on flex items.
1.17 + -->
1.18 +<!-- This was resolved by the CSSWG in April 2013:
1.19 + http://krijnhoetmer.nl/irc-logs/css/20130403#l-455 -->
1.20 +<html>
1.21 +<head>
1.22 + <title>CSS Test: Testing that flex items paint as pseudo-stacking contexts (like inline-blocks): atomically, in the absence of 'z-index' on descendants</title>
1.23 + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
1.24 + <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#painting">
1.25 + <link rel="match" href="flexbox-items-as-stacking-contexts-2-ref.html">
1.26 + <style>
1.27 + body { font: 10px sans-serif }
1.28 + .flexContainer {
1.29 + background: orange;
1.30 + display: flex;
1.31 + justify-content: space-between;
1.32 + width: 70px;
1.33 + padding: 2px;
1.34 + margin-bottom: 2px;
1.35 + }
1.36 + .item1 {
1.37 + background: lightblue;
1.38 + width: 30px;
1.39 + }
1.40 + .item2 {
1.41 + background: yellow;
1.42 + width: 30px;
1.43 + }
1.44 + </style>
1.45 +</head>
1.46 +<body>
1.47 + <!-- This container has two flex items, the first of which has content
1.48 + sticking out & overlapping the second. If they're painting atomically
1.49 + (and in the right order), the second item's background should cover the
1.50 + first item's overflowing content. -->
1.51 + <div class="flexContainer"
1.52 + ><div class="item1">ThisIsALongUnbrokenString</div
1.53 + ><div class="item2">HereIsSomeMoreLongText</div
1.54 + ></div>
1.55 +
1.56 + <!-- Now, the first item is relatively positioned, which should make it paint
1.57 + on top of everything. -->
1.58 + <div class="flexContainer"
1.59 + ><div class="item1" style="position:relative">ThisIsALongUnbrokenString</div
1.60 + ><div class="item2">HereIsSomeMoreLongText</div
1.61 + ></div>
1.62 +
1.63 + <!-- Now, the first item is has "z-index" set, which should make it paint on
1.64 + top of everything. -->
1.65 + <div class="flexContainer"
1.66 + ><div class="item1" style="z-index: 1">ThisIsALongUnbrokenString</div
1.67 + ><div class="item2">HereIsSomeMoreLongText</div
1.68 + ></div>
1.69 +
1.70 + <!-- Now, the first item has "order" set to a higher value than default,
1.71 + which should make it paint on top (and at the far right) -->
1.72 + <div class="flexContainer"
1.73 + ><div class="item1" style="order: 1">ThisIsALongUnbrokenString</div
1.74 + ><div class="item2">HereIsSomeMoreLongText</div
1.75 + ></div>
1.76 +
1.77 + <!-- And for thoroughness, let's set "order" to a lower value than default,
1.78 + on the second item. (Should render the same as previous example.) -->
1.79 + <div class="flexContainer"
1.80 + ><div class="item1">ThisIsALongUnbrokenString</div
1.81 + ><div class="item2" style="order: -1">HereIsSomeMoreLongText</div
1.82 + ></div>
1.83 +
1.84 + <!-- ...but if we relatively position that second item, it should paint
1.85 + on top again, despite its low "order" value. -->
1.86 + <div class="flexContainer"
1.87 + ><div class="item1">ThisIsALongUnbrokenString</div
1.88 + ><div class="item2" style="order: -1; position: relative">HereIsSomeMoreLongText</div
1.89 + ></div>
1.90 +</body>
1.91 +</html>
