diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-flexbox/flexbox-items-as-stacking-contexts-003-ref.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-flexbox/flexbox-items-as-stacking-contexts-003-ref.html | 71 |
1 files changed, 71 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-flexbox/flexbox-items-as-stacking-contexts-003-ref.html b/testing/web-platform/tests/css/css-flexbox/flexbox-items-as-stacking-contexts-003-ref.html new file mode 100644 index 0000000000..814f06cca1 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flexbox-items-as-stacking-contexts-003-ref.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .flexContainer { + background: orange; + width: 70px; + height: 20px; + padding: 2px; + margin-bottom: 2px; + } + .item1 { + display: inline-block; + background: lightblue; + width: 30px; + height: 16px; + padding: 2px; + margin-right: 2px; + vertical-align: top; + } + .item2 { + display: inline-block; + background: yellow; + width: 30px; + height: 16px; + padding: 2px; + vertical-align: top; + } + .grandchildA { + background: purple; + width: 80px; + height: 6px; + position: relative; + z-index: 10; + } + .grandchildB { + background: teal; + width: 80px; + height: 6px; + position: relative; + z-index: 20; + } + .grandchildC { + background: lime; + width: 20px; + height: 16px; + position: relative; + /* This z-index should interleave this content + between grandchildA and grandchildB: */ + z-index: 15; + } + </style> +</head> +<body> + <div class="flexContainer" + ><div class="item1" + ><div class="grandchildA"></div + ><div class="grandchildB"></div + ></div + ><div class="item2" + ><div class="grandchildC"></div + ></div + ></div> +</body> +</html> |