| Index: LayoutTests/css3/flexbox/mozilla/flexbox-items-as-stacking-contexts-2.html
|
| diff --git a/LayoutTests/css3/flexbox/mozilla/flexbox-items-as-stacking-contexts-2.html b/LayoutTests/css3/flexbox/mozilla/flexbox-items-as-stacking-contexts-2.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..429497fd5f49a97a6f26e22c91743ebc2b4f6908
|
| --- /dev/null
|
| +++ b/LayoutTests/css3/flexbox/mozilla/flexbox-items-as-stacking-contexts-2.html
|
| @@ -0,0 +1,82 @@
|
| +<!DOCTYPE html>
|
| +<!--
|
| + Any copyright is dedicated to the Public Domain.
|
| + http://creativecommons.org/publicdomain/zero/1.0/
|
| +-->
|
| +<!-- This testcase checks flex items are painted atomically. In particular,
|
| + if one item has content that overflows into the region of another item,
|
| + then one item is painted "behind" the other; there shouldn't normally
|
| + any interleaving of backgrounds and content between the two items.
|
| +
|
| + This testcase also tests some special cases that will change the paint
|
| + ordering - specifically, the properties "position", "z-index", and
|
| + "order" on flex items.
|
| + -->
|
| +<html>
|
| +<head>
|
| + <style>
|
| + body { font: 10px sans-serif }
|
| + .flexContainer {
|
| + background: orange;
|
| + display: flex;
|
| + justify-content: space-between;
|
| + width: 70px;
|
| + padding: 2px;
|
| + margin-bottom: 2px;
|
| + }
|
| + .item1 {
|
| + background: lightblue;
|
| + width: 30px;
|
| + }
|
| + .item2 {
|
| + background: yellow;
|
| + width: 30px;
|
| + }
|
| + </style>
|
| +</head>
|
| +<body>
|
| + <!-- This container has two flex items, the first of which has content
|
| + sticking out & overlapping the second. If they're painting atomically
|
| + (and in the right order), the second item's background should cover the
|
| + first item's overflowing content. -->
|
| + <div class="flexContainer"
|
| + ><div class="item1">ThisIsALongUnbrokenString</div
|
| + ><div class="item2">HereIsSomeMoreLongText</div
|
| + ></div>
|
| +
|
| + <!-- Now, the first item is relatively positioned, which should make it paint
|
| + on top of everything. -->
|
| + <div class="flexContainer"
|
| + ><div class="item1" style="position:relative">ThisIsALongUnbrokenString</div
|
| + ><div class="item2">HereIsSomeMoreLongText</div
|
| + ></div>
|
| +
|
| + <!-- Now, the first item is has "z-index" set, which should make it paint on
|
| + top of everything. -->
|
| + <div class="flexContainer"
|
| + ><div class="item1" style="z-index: 1">ThisIsALongUnbrokenString</div
|
| + ><div class="item2">HereIsSomeMoreLongText</div
|
| + ></div>
|
| +
|
| + <!-- Now, the first item has "order" set to a higher value than default,
|
| + which should make it paint on top (and at the far right) -->
|
| + <div class="flexContainer"
|
| + ><div class="item1" style="order: 1">ThisIsALongUnbrokenString</div
|
| + ><div class="item2">HereIsSomeMoreLongText</div
|
| + ></div>
|
| +
|
| + <!-- And for thoroughness, let's set "order" to a lower value than default,
|
| + on the second item. (Should render the same as previous example.) -->
|
| + <div class="flexContainer"
|
| + ><div class="item1">ThisIsALongUnbrokenString</div
|
| + ><div class="item2" style="order: -1">HereIsSomeMoreLongText</div
|
| + ></div>
|
| +
|
| + <!-- ...but if we relatively position that second item, it should paint
|
| + on top again, despite its low "order" value. -->
|
| + <div class="flexContainer"
|
| + ><div class="item1">ThisIsALongUnbrokenString</div
|
| + ><div class="item2" style="order: -1; position: relative">HereIsSomeMoreLongText</div
|
| + ></div>
|
| +</body>
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 23737004:
Paint flex items atomically, like inline-blocks (Closed)
Base URL: svn://svn.chromium.org/blink/trunk