зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1514843 part 3: Add more testcases for 'contain:size' on scrollable elements. r=TYLin
This patch adds tweaked copies of the testcases from the prior patch, exercising the other relevant values for the 'overflow' property (for 'hidden' and 'auto', rather than 'scroll'). Depends on D25155 Differential Revision: https://phabricator.services.mozilla.com/D25317 --HG-- rename : layout/reftests/w3c-css/submitted/contain/contain-size-block-002-ref.html => layout/reftests/w3c-css/submitted/contain/contain-size-block-003-ref.html rename : layout/reftests/w3c-css/submitted/contain/contain-size-block-002.html => layout/reftests/w3c-css/submitted/contain/contain-size-block-003.html rename : layout/reftests/w3c-css/submitted/contain/contain-size-block-002-ref.html => layout/reftests/w3c-css/submitted/contain/contain-size-block-004-ref.html rename : layout/reftests/w3c-css/submitted/contain/contain-size-block-002.html => layout/reftests/w3c-css/submitted/contain/contain-size-block-004.html rename : layout/reftests/w3c-css/submitted/contain/contain-size-inline-block-002-ref.html => layout/reftests/w3c-css/submitted/contain/contain-size-inline-block-003-ref.html rename : layout/reftests/w3c-css/submitted/contain/contain-size-inline-block-002.html => layout/reftests/w3c-css/submitted/contain/contain-size-inline-block-003.html rename : layout/reftests/w3c-css/submitted/contain/contain-size-inline-block-002-ref.html => layout/reftests/w3c-css/submitted/contain/contain-size-inline-block-004-ref.html rename : layout/reftests/w3c-css/submitted/contain/contain-size-inline-block-002.html => layout/reftests/w3c-css/submitted/contain/contain-size-inline-block-004.html extra : moz-landing-system : lando
This commit is contained in:
Daniel Holbert
Родитель
beda2208c9
Коммит
f4e0af6db7
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<style>
|
||||
.basic {
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
border: 2px solid green;
|
||||
}
|
||||
.height-ref {
|
||||
height: 60px;
|
||||
background: lightblue;
|
||||
}
|
||||
.width-ref {
|
||||
width: 60px;
|
||||
}
|
||||
.floatLBasic-ref {
|
||||
float: left;
|
||||
}
|
||||
.floatLWidth-ref {
|
||||
float: left;
|
||||
width: 60px;
|
||||
}
|
||||
.flexBaselineCheck {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
.innerContents {
|
||||
color: transparent;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
}
|
||||
.zeroHeightContents {
|
||||
color: transparent;
|
||||
height: 0px;
|
||||
width: 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- NOTE: In the reference-case scenarios here, we use the same DOM as in
|
||||
the testcase, and we simply use 'position: absolute' on the descendants
|
||||
wherever the testcase has 'contain: size' on the container. This
|
||||
produces an accurate reference rendering, because out-of-flow content
|
||||
doesn't contribute to the container's sizing, but does create scrollable
|
||||
overflow (i.e. it produces scrollbars of the appropriate size for the
|
||||
amount of overflow). -->
|
||||
<div class="basic"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<div class="basic height-ref"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<div class="basic height-ref"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<div class="basic width-ref"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<div class="basic width-ref"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<div class="basic floatLBasic-ref"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<div class="basic floatLWidth-ref"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<div class="flexBaselineCheck">
|
||||
outside before
|
||||
<div class="basic">
|
||||
<!-- We use the out-of-flow "innerContents" to create the correct
|
||||
amount of scrollable overflow to match the testcase, and we
|
||||
use the smaller in-flow "zeroHeightContents" to provide a
|
||||
baseline that we can use to verify the testcase's baseline
|
||||
alignment position. -->
|
||||
<div class="innerContents">inner</div>
|
||||
<div class="zeroHeightContents">i</div>
|
||||
</div>
|
||||
outside after
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: size' on 'overflow:auto' block elements should cause them to be sized as if they had no contents</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
|
||||
<link rel="match" href="contain-size-block-003-ref.html">
|
||||
<style>
|
||||
.contain {
|
||||
contain: size;
|
||||
overflow: auto;
|
||||
border: 2px solid green;
|
||||
}
|
||||
.innerContents {
|
||||
color: transparent;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.minHeight {
|
||||
min-height: 60px;
|
||||
background: lightblue;
|
||||
}
|
||||
.height {
|
||||
height: 60px;
|
||||
background: lightblue;
|
||||
}
|
||||
.maxWidth {
|
||||
max-width: 60px;
|
||||
}
|
||||
.width {
|
||||
width: 60px;
|
||||
}
|
||||
.floatLBasic {
|
||||
float: left;
|
||||
}
|
||||
.floatLWidth {
|
||||
float: left;
|
||||
width: 60px;
|
||||
}
|
||||
.flexBaselineCheck {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- NOTE: In all cases below, the expectation is that the size-contained
|
||||
element should be sized as if it had no contents (while honoring
|
||||
whatever sizing properties are provided). -->
|
||||
|
||||
<!--CSS Test: A size-contained scrollable block with no specified size.-->
|
||||
<div class="contain"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained scrollable block with specified min-height -->
|
||||
<div class="contain minHeight"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained scrollable block with specified height -->
|
||||
<div class="contain height"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained scrollable block with specified max-width -->
|
||||
<div class="contain maxWidth"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained scrollable block with specified width -->
|
||||
<div class="contain width"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained floated scrollable block with auto size -->
|
||||
<div class="contain floatLBasic"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained floated scrollable block with
|
||||
specified width -->
|
||||
<div class="contain floatLWidth"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained scrollable block in a
|
||||
baseline-aligning flex container: should size as if it's empty, but
|
||||
still baseline-align using its contents' baseline -->
|
||||
<div class="flexBaselineCheck">
|
||||
outside before
|
||||
<div class="contain">
|
||||
<div class="innerContents">inner</div>
|
||||
</div>
|
||||
outside after
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<style>
|
||||
.basic {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border: 2px solid green;
|
||||
}
|
||||
.height-ref {
|
||||
height: 60px;
|
||||
background: lightblue;
|
||||
}
|
||||
.width-ref {
|
||||
width: 60px;
|
||||
}
|
||||
.floatLBasic-ref {
|
||||
float: left;
|
||||
}
|
||||
.floatLWidth-ref {
|
||||
float: left;
|
||||
width: 60px;
|
||||
}
|
||||
.flexBaselineCheck {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
.innerContents {
|
||||
color: transparent;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
}
|
||||
.zeroHeightContents {
|
||||
color: transparent;
|
||||
height: 0px;
|
||||
width: 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- NOTE: In the reference-case scenarios here, we use the same DOM as in
|
||||
the testcase, and we simply use 'position: absolute' on the descendants
|
||||
wherever the testcase has 'contain: size' on the container. This
|
||||
produces an accurate reference rendering, because out-of-flow content
|
||||
doesn't contribute to the container's sizing, but does create scrollable
|
||||
overflow. -->
|
||||
<div class="basic"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<div class="basic height-ref"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<div class="basic height-ref"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<div class="basic width-ref"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<div class="basic width-ref"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<div class="basic floatLBasic-ref"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<div class="basic floatLWidth-ref"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<div class="flexBaselineCheck">
|
||||
outside before
|
||||
<div class="basic">
|
||||
<!-- We use the out-of-flow "innerContents" to create the correct
|
||||
amount of scrollable overflow to match the testcase, and we
|
||||
use the smaller in-flow "zeroHeightContents" to provide a
|
||||
baseline that we can use to verify the testcase's baseline
|
||||
alignment position. -->
|
||||
<div class="innerContents">inner</div>
|
||||
<div class="zeroHeightContents">i</div>
|
||||
</div>
|
||||
outside after
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: size' on 'overflow:hidden' block elements should cause them to be sized as if they had no contents</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
|
||||
<link rel="match" href="contain-size-block-004-ref.html">
|
||||
<style>
|
||||
.contain {
|
||||
contain: size;
|
||||
overflow: hidden;
|
||||
border: 2px solid green;
|
||||
}
|
||||
.innerContents {
|
||||
color: transparent;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.minHeight {
|
||||
min-height: 60px;
|
||||
background: lightblue;
|
||||
}
|
||||
.height {
|
||||
height: 60px;
|
||||
background: lightblue;
|
||||
}
|
||||
.maxWidth {
|
||||
max-width: 60px;
|
||||
}
|
||||
.width {
|
||||
width: 60px;
|
||||
}
|
||||
.floatLBasic {
|
||||
float: left;
|
||||
}
|
||||
.floatLWidth {
|
||||
float: left;
|
||||
width: 60px;
|
||||
}
|
||||
.flexBaselineCheck {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- NOTE: In all cases below, the expectation is that the size-contained
|
||||
element should be sized as if it had no contents (while honoring
|
||||
whatever sizing properties are provided). -->
|
||||
|
||||
<!--CSS Test: A size-contained scrollable block with no specified size.-->
|
||||
<div class="contain"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained scrollable block with specified min-height -->
|
||||
<div class="contain minHeight"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained scrollable block with specified height -->
|
||||
<div class="contain height"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained scrollable block with specified max-width -->
|
||||
<div class="contain maxWidth"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained scrollable block with specified width -->
|
||||
<div class="contain width"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained floated scrollable block with auto size -->
|
||||
<div class="contain floatLBasic"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained floated scrollable block with
|
||||
specified width -->
|
||||
<div class="contain floatLWidth"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained scrollable block in a
|
||||
baseline-aligning flex container: should size as if it's empty, but
|
||||
still baseline-align using its contents' baseline -->
|
||||
<div class="flexBaselineCheck">
|
||||
outside before
|
||||
<div class="contain">
|
||||
<div class="innerContents">inner</div>
|
||||
</div>
|
||||
outside after
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<style>
|
||||
.basic {
|
||||
display: inline-block;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
border: 2px solid green;
|
||||
}
|
||||
.height-ref {
|
||||
height: 60px;
|
||||
}
|
||||
.width-ref {
|
||||
width: 60px;
|
||||
}
|
||||
.innerContents {
|
||||
color: transparent;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- NOTE: In the reference-case scenarios here, we use the same DOM as in
|
||||
the testcase, and we simply use 'position: absolute' on the descendants
|
||||
wherever the testcase has 'contain: size' on the container. This
|
||||
produces an accurate reference rendering, because out-of-flow content
|
||||
doesn't contribute to the container's sizing, but does create scrollable
|
||||
overflow (i.e. it produces scrollbars of the appropriate size for the
|
||||
amount of overflow). -->
|
||||
<div class="basic"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
outside before
|
||||
<div class="basic"><div class="innerContents">inner</div></div>
|
||||
outside after
|
||||
<br>
|
||||
|
||||
<div class="basic height-ref"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<div class="basic height-ref"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<div class="basic width-ref"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<div class="basic width-ref"><div class="innerContents">inner</div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: size' on 'overflow:auto' inline-block elements should cause them to be sized as if they had no contents and baseline-aligned regularly.</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
|
||||
<link rel="match" href="contain-size-inline-block-003-ref.html">
|
||||
<style>
|
||||
.contain {
|
||||
display: inline-block;
|
||||
overflow: auto;
|
||||
contain:size;
|
||||
border: 2px solid green;
|
||||
}
|
||||
.innerContents {
|
||||
color: transparent;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.minHeight {
|
||||
min-height: 60px;
|
||||
}
|
||||
.height {
|
||||
height: 60px;
|
||||
}
|
||||
.minWidth {
|
||||
min-width: 60px;
|
||||
}
|
||||
.width {
|
||||
width: 60px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- NOTE: In all cases below, the expectation is that the size-contained
|
||||
element should be sized as if it had no contents (while honoring
|
||||
whatever sizing properties are provided). -->
|
||||
|
||||
<!-- A size-contained scrollable inline-block with no specified size -->
|
||||
<div class="contain"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!-- A size-contained scrollable inline-block should perform baseline
|
||||
alignment regularly, based on contents' baseline. -->
|
||||
outside before
|
||||
<div class="contain"><div class="innerContents">inner</div></div>
|
||||
outside after
|
||||
<br>
|
||||
|
||||
<!-- A size-contained scrollable inline-block with specified min-height -->
|
||||
<div class="contain minHeight"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!-- A size-contained scrollable inline-block with specified height -->
|
||||
<div class="contain height"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!-- A size-contained scrollable inline-block with specified min-width -->
|
||||
<div class="contain minWidth"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!-- A size-contained scrollable inline-block with specified width -->
|
||||
<div class="contain width"><div class="innerContents">inner</div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<style>
|
||||
.basic {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border: 2px solid green;
|
||||
}
|
||||
.height-ref {
|
||||
height: 60px;
|
||||
}
|
||||
.width-ref {
|
||||
width: 60px;
|
||||
}
|
||||
.innerContents {
|
||||
color: transparent;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- NOTE: In the reference-case scenarios here, we use the same DOM as in
|
||||
the testcase, and we simply use 'position: absolute' on the descendants
|
||||
wherever the testcase has 'contain: size' on the container. This
|
||||
produces an accurate reference rendering, because out-of-flow content
|
||||
doesn't contribute to the container's sizing, but does create scrollable
|
||||
overflow. -->
|
||||
<div class="basic"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
outside before
|
||||
<div class="basic"><div class="innerContents">inner</div></div>
|
||||
outside after
|
||||
<br>
|
||||
|
||||
<div class="basic height-ref"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<div class="basic height-ref"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<div class="basic width-ref"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<div class="basic width-ref"><div class="innerContents">inner</div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: size' on 'overflow:hidden' inline-block elements should cause them to be sized as if they had no contents and baseline-aligned regularly.</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
|
||||
<link rel="match" href="contain-size-inline-block-004-ref.html">
|
||||
<style>
|
||||
.contain {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
contain:size;
|
||||
border: 2px solid green;
|
||||
}
|
||||
.innerContents {
|
||||
color: transparent;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.minHeight {
|
||||
min-height: 60px;
|
||||
}
|
||||
.height {
|
||||
height: 60px;
|
||||
}
|
||||
.minWidth {
|
||||
min-width: 60px;
|
||||
}
|
||||
.width {
|
||||
width: 60px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- NOTE: In all cases below, the expectation is that the size-contained
|
||||
element should be sized as if it had no contents (while honoring
|
||||
whatever sizing properties are provided). -->
|
||||
|
||||
<!-- A size-contained scrollable inline-block with no specified size -->
|
||||
<div class="contain"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!-- A size-contained scrollable inline-block should perform baseline
|
||||
alignment regularly, based on contents' baseline. -->
|
||||
outside before
|
||||
<div class="contain"><div class="innerContents">inner</div></div>
|
||||
outside after
|
||||
<br>
|
||||
|
||||
<!-- A size-contained scrollable inline-block with specified min-height -->
|
||||
<div class="contain minHeight"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!-- A size-contained scrollable inline-block with specified height -->
|
||||
<div class="contain height"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!-- A size-contained scrollable inline-block with specified min-width -->
|
||||
<div class="contain minWidth"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!-- A size-contained scrollable inline-block with specified width -->
|
||||
<div class="contain width"><div class="innerContents">inner</div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -21,8 +21,12 @@ pref(layout.css.overflow-clip-box.enabled,true) == contain-paint-clip-006.html c
|
|||
fails == contain-size-button-001.html contain-size-button-001-ref.html # bug 1508441
|
||||
== contain-size-block-001.html contain-size-block-001-ref.html
|
||||
== contain-size-block-002.html contain-size-block-002-ref.html
|
||||
== contain-size-block-003.html contain-size-block-003-ref.html
|
||||
== contain-size-block-004.html contain-size-block-004-ref.html
|
||||
== contain-size-inline-block-001.html contain-size-inline-block-001-ref.html
|
||||
== contain-size-inline-block-002.html contain-size-inline-block-002-ref.html
|
||||
== contain-size-inline-block-003.html contain-size-inline-block-003-ref.html
|
||||
== contain-size-inline-block-004.html contain-size-inline-block-004-ref.html
|
||||
== contain-size-flex-001.html contain-size-flex-001-ref.html
|
||||
fuzzy-if(webrender&&winWidget,0-24,0-2) == contain-size-inline-flex-001.html contain-size-inline-flex-001-ref.html # bug 1474093
|
||||
== contain-size-grid-001.html contain-size-grid-001-ref.html
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче