зеркало из https://github.com/mozilla/gecko-dev.git
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:
Родитель
2bdeb3ab01
Коммит
62fdac80b2
|
@ -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>
|
Загрузка…
Ссылка в новой задаче