Bug 1320484 part 3: Add reftest for simple positioning of abspos child inside of a -webkit-box container. r=mats

MozReview-Commit-ID: 4SIys1zdkvy

--HG--
extra : rebase_source : 376a8110fbc9ac5475e2231c74ba58195b2ed6ee
This commit is contained in:
Daniel Holbert 2017-01-04 20:43:04 -08:00
Родитель 2bdeb3ab01
Коммит 62fdac80b2
3 изменённых файлов: 92 добавлений и 0 удалений

Просмотреть файл

@ -2,6 +2,9 @@
# CSS properties. These tests require webkit prefix support to be enabled.
default-preferences pref(layout.css.prefixes.webkit,true)
# Tests for abspos children inside of a -webkit-box:
== webkit-box-abspos-children-1.html webkit-box-abspos-children-1-ref.html
# Tests for anonymous flex item formation inside of a "-webkit-box":
# Note: some of these tests are marked as failing, because we don't match
# WebKit/Blink on them. (The reference case represents the WebKit/Blink

Просмотреть файл

@ -0,0 +1,47 @@
<!DOCTYPE html>
<!-- NOTE: This reference case uses the same markup as the testcase, except:
(1) This reference case uses modern flexbox CSS instead of -webkit-box.
(2) In the 2nd and 4th containers here (where the testcase makes the
*2nd* flex item abspos), this reference case simply uses no absolute
positioning at all, to produce the correct expected rendering
(with the 2nd flex item being positioned after the 1st, rather than
being superimposed on top of it).
-->
<html>
<head>
<title>Reference: simple positioning of abspos children in -webkit-box</title>
<style>
.container {
border: 1px solid black;
width: 200px;
}
.box { display: flex }
.inline-box { display: inline-flex }
.abs { position: absolute }
.a { border: 3px solid purple }
.b { border: 3px solid orange }
</style>
</head>
<body>
<!-- Test abspos child in -webkit-box: -->
<div class="container box">
<div class="a abs">aa</div>
<div class="b">bbbb</div>
</div>
<div class="container box">
<div class="a">aa</div>
<div class="b">bbbb</div>
</div>
<!-- Test abspos child in -webkit-inline-box: -->
<div class="container inline-box">
<div class="a abs">aa</div>
<div class="b">bbbb</div>
</div>
<div class="container inline-box">
<div class="a">aa</div>
<div class="b">bbbb</div>
</div>
</body>
</html>

Просмотреть файл

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<title>Testcase: simple positioning of abspos children in -webkit-box</title>
<style>
.container {
border: 1px solid black;
width: 200px;
}
.box { display: -webkit-box }
.inline-box { display: -webkit-inline-box }
.abs { position: absolute }
.a { border: 3px solid purple }
.b { border: 3px solid orange }
</style>
</head>
<body>
<!-- Test abspos child in -webkit-box: -->
<div class="container box">
<div class="a abs">aa</div>
<div class="b">bbbb</div>
</div>
<div class="container box">
<div class="a">aa</div>
<div class="b abs">bbbb</div>
</div>
<!-- Test abspos child in -webkit-inline-box: -->
<div class="container inline-box">
<div class="a abs">aa</div>
<div class="b">bbbb</div>
</div>
<div class="container inline-box"
style="vertical-align: top">
<!-- XXXdholbert 'vertical-align' here is a hackaround for bug 1328792 -->
<div class="a">aa</div>
<div class="b abs">bbbb</div>
</div>
</body>
</html>