mirror of
https://github.com/servo/servo.git
synced 2025-08-15 18:35:33 +01:00
Update web-platform-tests to revision b'7af9d6ec48ab04043a2bea85a3599904a1a19efa'
This commit is contained in:
WPT Sync Bot
Josh Matthews
parent
8050c95e31
commit
87be1008de
2742 changed files with 142451 additions and 40667 deletions
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: layout' element should contain absolute position elements.</title>
|
||||
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
|
||||
<link rel="match" href="contain-paint-containing-block-absolute-001-ref.html">
|
||||
<style>
|
||||
#a {
|
||||
contain: layout;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
margin: 50px;
|
||||
}
|
||||
#b {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="a">
|
||||
<div>
|
||||
<div id="b"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: layout' element should contain fixed position elements.</title>
|
||||
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
|
||||
<link rel="match" href="contain-paint-containing-block-fixed-001-ref.html">
|
||||
<style>
|
||||
#a {
|
||||
contain: layout;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
margin: 50px;
|
||||
}
|
||||
#b {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="a">
|
||||
<div>
|
||||
<div id="b"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: layout' should contain floats as a formatting context.</title>
|
||||
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">
|
||||
<link rel="match" href="contain-paint-formatting-context-float-001-ref.html">
|
||||
<style>
|
||||
#left {
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 10px;
|
||||
background: blue;
|
||||
}
|
||||
#a {
|
||||
contain: layout;
|
||||
background: red;
|
||||
margin: 10px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
#b {
|
||||
clear: left;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="left"></div>
|
||||
<div id="a">
|
||||
<div id="b"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Test</title>
|
||||
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<style>
|
||||
#a {
|
||||
background: blue;
|
||||
margin: 10px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
#b {
|
||||
width: 50px;
|
||||
height: 40px;
|
||||
background: green;
|
||||
}
|
||||
#b-padding {
|
||||
height: 10px;
|
||||
}
|
||||
#c {
|
||||
width: 50px;
|
||||
height: 10px;
|
||||
background: lightblue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="a">
|
||||
<div id="b-padding"></div>
|
||||
<div id="b"></div>
|
||||
<div id="c"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: layout' with a vertical margin child. Margin collapse should not occur, and neither should overflow clipping.</title>
|
||||
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">
|
||||
<link rel="match" href="contain-layout-formatting-context-margin-001-ref.html">
|
||||
<style>
|
||||
#a {
|
||||
contain:layout;
|
||||
background: blue;
|
||||
margin: 10px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
#b {
|
||||
width: 50px;
|
||||
height: 40px;
|
||||
background: green;
|
||||
margin-top: 10px;
|
||||
}
|
||||
#c {
|
||||
background: lightblue;
|
||||
width: 50px;
|
||||
height: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="a">
|
||||
<div id="b"></div>
|
||||
<div id="c"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.abspos-box {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
/* The boxes should stack in the order that I've listed their CSS classes
|
||||
here. The class names' first word (outside/before/inside/after) refers
|
||||
to the boxes' DOM position, and "background"/"midground"/"foreground"
|
||||
refers to their z-index values. */
|
||||
|
||||
.before-IB-background {
|
||||
background: darkmagenta;
|
||||
z-index: -1;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
}
|
||||
.after-IB-background {
|
||||
background: magenta;
|
||||
z-index: -1;
|
||||
top: 70px;
|
||||
left: 70px;
|
||||
}
|
||||
.outside-span-midground {
|
||||
background: darkkhaki;
|
||||
top: 90px;
|
||||
left: 90px;
|
||||
}
|
||||
.inside-IB-midground {
|
||||
background: khaki;
|
||||
top: 110px;
|
||||
left: 110px;
|
||||
}
|
||||
.before-IB-foreground {
|
||||
background: darkcyan;
|
||||
z-index: 1;
|
||||
top: 130px;
|
||||
left: 130px;
|
||||
}
|
||||
.after-IB-foreground {
|
||||
background: cyan;
|
||||
z-index: 1;
|
||||
top: 150px;
|
||||
left: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- The expectation here is that 'abspos-box' elements will all interact in
|
||||
the same top-level stacking context. That means the box ordering should
|
||||
be (back to front): darkmagenta/magenta/darkkhaki/khaki/darkcyan/cyan,
|
||||
with the boxes stacked (visually) from top-left to bottom-right. -->
|
||||
|
||||
<div class="abspos-box outside-span-midground"></div>
|
||||
|
||||
<!-- Note: this file is identical to the testcase,
|
||||
except for the lack of "contain: layout" on this span. -->
|
||||
<span>
|
||||
<div class="abspos-box before-IB-background"></div>
|
||||
<div class="abspos-box before-IB-foreground"></div>
|
||||
<!-- This unstyled div crates the IB split: -->
|
||||
<div>
|
||||
<div class="abspos-box inside-IB-midground"></div>
|
||||
</div>
|
||||
<div class="abspos-box after-IB-background"></div>
|
||||
<div class="abspos-box after-IB-foreground"></div>
|
||||
</span>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: layout' should have no effect on non-atomic inline
|
||||
(including its block part, if there's a block-in-inline split)</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">
|
||||
<link rel="match" href="contain-layout-ignored-cases-ib-split-001-ref.html">
|
||||
<style>
|
||||
.abspos-box {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
/* The boxes should stack in the order that I've listed their CSS classes
|
||||
here. The class names' first word (outside/before/inside/after) refers
|
||||
to the boxes' DOM position, and "background"/"midground"/"foreground"
|
||||
refers to their z-index values. */
|
||||
|
||||
.before-IB-background {
|
||||
background: darkmagenta;
|
||||
z-index: -1;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
}
|
||||
.after-IB-background {
|
||||
background: magenta;
|
||||
z-index: -1;
|
||||
top: 70px;
|
||||
left: 70px;
|
||||
}
|
||||
.outside-span-midground {
|
||||
background: darkkhaki;
|
||||
top: 90px;
|
||||
left: 90px;
|
||||
}
|
||||
.inside-IB-midground {
|
||||
background: khaki;
|
||||
top: 110px;
|
||||
left: 110px;
|
||||
}
|
||||
.before-IB-foreground {
|
||||
background: darkcyan;
|
||||
z-index: 1;
|
||||
top: 130px;
|
||||
left: 130px;
|
||||
}
|
||||
.after-IB-foreground {
|
||||
background: cyan;
|
||||
z-index: 1;
|
||||
top: 150px;
|
||||
left: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- The expectation here is that 'abspos-box' elements will all interact in
|
||||
the same top-level stacking context. That means the box ordering should
|
||||
be (back to front): darkmagenta/magenta/darkkhaki/khaki/darkcyan/cyan,
|
||||
with the boxes stacked (visually) from top-left to bottom-right. -->
|
||||
|
||||
<div class="abspos-box outside-span-midground"></div>
|
||||
|
||||
<span style="contain: layout">
|
||||
<div class="abspos-box before-IB-background"></div>
|
||||
<div class="abspos-box before-IB-foreground"></div>
|
||||
<!-- This unstyled div crates the IB split: -->
|
||||
<div>
|
||||
<div class="abspos-box inside-IB-midground"></div>
|
||||
</div>
|
||||
<div class="abspos-box after-IB-background"></div>
|
||||
<div class="abspos-box after-IB-foreground"></div>
|
||||
</span>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: layout' should not create a stacking context when no principle box is generated.</title>
|
||||
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@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-layout">
|
||||
<link rel="match" href="contain-paint-ignored-cases-no-principal-box-001-ref.html">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
}
|
||||
#div1,
|
||||
#div3 {
|
||||
background-color: #cfc;
|
||||
height: 100px;
|
||||
}
|
||||
#div1 {
|
||||
z-index: 5;
|
||||
}
|
||||
#div2 {
|
||||
display: contents;
|
||||
contain: layout;
|
||||
background-color: #fdd;
|
||||
height: 100px;
|
||||
top: -20px;
|
||||
}
|
||||
#div2_1 {
|
||||
background-color: #ffc;
|
||||
z-index: 6;
|
||||
top: -10px;
|
||||
height: 100px;
|
||||
}
|
||||
#div2_2 {
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
width: 40px;
|
||||
height: 300px;
|
||||
background-color: #ddf;
|
||||
}
|
||||
#div3 {
|
||||
z-index: 2;
|
||||
top: -50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="div1"></div>
|
||||
|
||||
<div id="div2">
|
||||
<div id="div2_1"></div>
|
||||
|
||||
<div id="div2_2"></div>
|
||||
</div>
|
||||
|
||||
<div id="div3"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<style>
|
||||
#a {
|
||||
display: contents;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
margin: 50px;
|
||||
}
|
||||
#b {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="a">
|
||||
<div>
|
||||
<div id="b"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: layout' element should not contain absolute/fixed position elements when no principal box is generated.</title>
|
||||
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
|
||||
<link rel="match" href="contain-layout-ignored-cases-no-principal-box-002-ref.html">
|
||||
<style>
|
||||
#a {
|
||||
contain: layout;
|
||||
display: contents;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
margin: 50px;
|
||||
}
|
||||
#b {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="a">
|
||||
<div>
|
||||
<div id="b"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<style>
|
||||
#a {
|
||||
display: contents;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
margin: 50px;
|
||||
}
|
||||
#b {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="a">
|
||||
<div>
|
||||
<div id="b"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: layout' element should not contain absolute/fixed position elements when no principal box is generated.</title>
|
||||
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
|
||||
<link rel="match" href="contain-layout-ignored-cases-no-principal-box-003-ref.html">
|
||||
<style>
|
||||
#a {
|
||||
contain: layout;
|
||||
display: contents;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
margin: 50px;
|
||||
}
|
||||
#b {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="a">
|
||||
<div>
|
||||
<div id="b"></div>
|
||||
</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="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<style>
|
||||
.outer {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.auto {
|
||||
overflow: auto;
|
||||
}
|
||||
.inner-sm {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
background: lightblue;
|
||||
}
|
||||
.inner-lg-1 {
|
||||
height: 95px;
|
||||
width: 95px;
|
||||
background: lightblue;
|
||||
}
|
||||
.inner-lg-2 {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
.pass {
|
||||
background: green;
|
||||
}
|
||||
.border {
|
||||
border: 5px solid green;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer">
|
||||
<div class="inner-sm"></div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="outer auto">
|
||||
<div class="inner-lg-2 pass">
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="inner-sm border">
|
||||
<div class="inner-lg-1">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: layout' should force all overflow to be ink overflow.</title>
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">
|
||||
<link rel="match" href="contain-layout-overflow-001-ref.html">
|
||||
<style>
|
||||
.contain {
|
||||
contain: layout;
|
||||
}
|
||||
.outer {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.auto {
|
||||
overflow: auto;
|
||||
}
|
||||
.inner-sm {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
background: lightblue;
|
||||
}
|
||||
.inner-lg {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
background: lightblue;
|
||||
}
|
||||
.pass {
|
||||
background: green;
|
||||
}
|
||||
.fail {
|
||||
background: red;
|
||||
}
|
||||
.border {
|
||||
border: 5px solid green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!--CSS Test: Elements with contain:layout that do not produce scrollable overflow should paint as if containment were not applied. -->
|
||||
<div class="outer">
|
||||
<div class="inner-sm contain"></div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: Layout-contained elements that overflow their container and have children who overflow should produce the same amount of scrollable overflow as if there were no children. -->
|
||||
<div class="outer auto">
|
||||
<div class="inner-lg contain">
|
||||
<div class="inner-lg pass"></div>
|
||||
<div class="inner-lg fail"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: Layout-contained elements that do not overflow their container, but have children who overflow, should not allow their children to affect the scrollable overflow regions of their parent. -->
|
||||
<div class="outer auto">
|
||||
<div class="inner-sm contain border">
|
||||
<div class="inner-lg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<style>
|
||||
.outer {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.auto {
|
||||
overflow: auto;
|
||||
}
|
||||
.inner-sm {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
background: lightblue;
|
||||
}
|
||||
.inner-lg-1 {
|
||||
height: 95px;
|
||||
width: 95px;
|
||||
float:left;
|
||||
background: lightblue;
|
||||
}
|
||||
.inner-lg-2 {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
float:left;
|
||||
}
|
||||
.pass {
|
||||
background: green;
|
||||
}
|
||||
.border {
|
||||
border: 5px solid green;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer">
|
||||
<div class="inner-sm" style="float:left;"></div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="outer auto">
|
||||
<div class="inner-lg-2 pass">
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="inner-sm border">
|
||||
<div class="inner-lg-1">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: layout' should force all overflow to be ink overflow (including when the overflow comes from floated descendants)</title>
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">
|
||||
<link rel="match" href="contain-layout-overflow-002-ref.html">
|
||||
<style>
|
||||
.contain {
|
||||
contain: layout;
|
||||
}
|
||||
.float { float: left; }
|
||||
.outer {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.auto {
|
||||
overflow: auto;
|
||||
}
|
||||
.inner-sm {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
background: lightblue;
|
||||
}
|
||||
.inner-lg {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
background: lightblue;
|
||||
}
|
||||
.pass {
|
||||
background: green;
|
||||
}
|
||||
.fail {
|
||||
background: red;
|
||||
}
|
||||
.border {
|
||||
border: 5px solid green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!--CSS Test: Elements with contain:layout that do not produce scrollable overflow should paint as if containment were not applied. -->
|
||||
<div class="outer">
|
||||
<div class="inner-sm contain float"></div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: Layout-contained elements that overflow their container and have children who overflow should produce the same amount of scrollable overflow as if there were no children. -->
|
||||
<div class="outer auto">
|
||||
<div class="inner-lg contain">
|
||||
<div class="inner-lg pass float"></div>
|
||||
<div class="inner-lg fail float"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: Layout-contained elements that do not overflow their container, but have children who overflow, should not allow their children to affect the scrollable overflow regions of their parent. -->
|
||||
<div class="outer auto">
|
||||
<div class="inner-sm contain border">
|
||||
<div class="inner-lg float">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: layout' with stacking contents. Z-index is defined only for siblings and children.</title>
|
||||
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#x43">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">
|
||||
<link rel="match" href="contain-paint-stacking-context-001-ref.html">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
}
|
||||
#div1,
|
||||
#div3 {
|
||||
background-color: #cfc;
|
||||
}
|
||||
#div1 {
|
||||
z-index: 5;
|
||||
}
|
||||
#div2 {
|
||||
contain: layout;
|
||||
background-color: #fdd;
|
||||
height: 100px;
|
||||
top: -20px;
|
||||
}
|
||||
#div2_1 {
|
||||
background-color: #ffc;
|
||||
z-index: 6;
|
||||
top: -10px;
|
||||
}
|
||||
#div2_2 {
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
width: 40px;
|
||||
height: 100px;
|
||||
background-color: #ddf;
|
||||
}
|
||||
#div3 {
|
||||
z-index: 2;
|
||||
top: -50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="div1">
|
||||
<br/><br/>
|
||||
</div>
|
||||
|
||||
<div id="div2">
|
||||
<div id="div2_1">
|
||||
<br/><br/>
|
||||
</div>
|
||||
|
||||
<div id="div2_2">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="div3">
|
||||
<br/><br/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.flexBaselineCheck {
|
||||
display: flex;
|
||||
border: 1px solid black;
|
||||
height: 100px;
|
||||
}
|
||||
.flexBaselineCheck > * {
|
||||
border: 2px solid teal;
|
||||
|
||||
/* In the testcase, the (baseline-aligned) items should all have their
|
||||
bottom borders aligned with the 80px-tall canvas. In other words, their
|
||||
bottom borders should all be 20px away from the bottom of their flex
|
||||
container. Here in the reference case, we just use "flex-end" alignment
|
||||
plus a hardcoded 20px margin-bottom to produce a precise reference
|
||||
for what that should look like. */
|
||||
align-self: flex-end;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
canvas {
|
||||
background: purple;
|
||||
width: 20px;
|
||||
height: 80px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
.multicol {
|
||||
column-count: 2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexBaselineCheck">
|
||||
<canvas></canvas>
|
||||
<div>block</div>
|
||||
<fieldset><legend>leg</legend>fieldset</fieldset>
|
||||
<div class="flex">flex</div>
|
||||
<div class="grid">grid</div>
|
||||
<div class="multicol">multi<br>col</div>
|
||||
<details open><summary>summary</summary>details</details>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: layout' should make elements behave as if they have no baseline</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-baseline">
|
||||
<link rel="match" href="contain-layout-suppress-baseline-001-ref.html">
|
||||
<style>
|
||||
.flexBaselineCheck {
|
||||
display: flex;
|
||||
border: 1px solid black;
|
||||
height: 100px;
|
||||
}
|
||||
.flexBaselineCheck > * {
|
||||
contain: layout;
|
||||
border: 2px solid teal;
|
||||
align-self: baseline;
|
||||
}
|
||||
canvas {
|
||||
background: purple;
|
||||
width: 20px;
|
||||
height: 80px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
.multicol {
|
||||
column-count: 2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexBaselineCheck">
|
||||
<!-- This canvas just exists to establish a precise, far-down baseline
|
||||
alignment position: -->
|
||||
<canvas></canvas>
|
||||
<!-- "contain:layout" should force all the elements below to behave as if
|
||||
they have no baseline. That means they all should *synthesize* a
|
||||
baseline from their border-box edge, in order to participate in flex
|
||||
item baseline alignment (to honor the outer flex container's
|
||||
"align-items:baseline"). So, the expectation here is that all of these
|
||||
elements' border-bottom edges should be aligned. -->
|
||||
<div>block</div>
|
||||
<fieldset><legend>leg</legend>fieldset</fieldset>
|
||||
<div class="flex">flex</div>
|
||||
<div class="grid">grid</div>
|
||||
<div class="multicol">multi<br>col</div>
|
||||
<details open><summary>summary</summary>details</details>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.flexBaselineCheck {
|
||||
display: flex;
|
||||
border: 1px solid black;
|
||||
}
|
||||
.flexBaselineCheck > * {
|
||||
border: 2px solid teal;
|
||||
/* In the testcase, the (baseline-aligned) items should all have their
|
||||
bottom borders aligned with the 50px-tall canvas. In other words, their
|
||||
bottom borders should all be aligned at the bottom of their flex
|
||||
container, separated from the bottom by only by their margin-end
|
||||
distance. Here in the reference case, we just use "flex-end" alignment
|
||||
(plus the same amount of margin) to produce a precise reference for what
|
||||
that should look like. */
|
||||
align-self: flex-end;
|
||||
margin: 2px;
|
||||
}
|
||||
canvas {
|
||||
background: purple;
|
||||
width: 20px;
|
||||
height: 50px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexBaselineCheck">
|
||||
<canvas></canvas>
|
||||
<button>btn</button>
|
||||
<input type="button" value="i-btn">
|
||||
<input type="submit" value="i-sub">
|
||||
</div>
|
||||
|
||||
<div class="flexBaselineCheck">
|
||||
<canvas></canvas>
|
||||
<input type="text" value="text">
|
||||
<input type="number" value="0">
|
||||
</div>
|
||||
|
||||
<div class="flexBaselineCheck">
|
||||
<canvas></canvas>
|
||||
<input type="date">
|
||||
<input type="time">
|
||||
</div>
|
||||
|
||||
<div class="flexBaselineCheck">
|
||||
<canvas></canvas>
|
||||
<input type="file">
|
||||
<textarea>textarea</textarea>
|
||||
</div>
|
||||
|
||||
<div class="flexBaselineCheck">
|
||||
<canvas></canvas>
|
||||
<select><option>dropdown</option></select>
|
||||
<select multiple style="max-height:40px"><option>multi</option></select>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: layout' should make elements behave as if they have no baseline</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-baseline">
|
||||
<link rel="match" href="contain-layout-suppress-baseline-002-ref.html">
|
||||
<style>
|
||||
.flexBaselineCheck {
|
||||
display: flex;
|
||||
border: 1px solid black;
|
||||
}
|
||||
.flexBaselineCheck > * {
|
||||
contain: layout;
|
||||
border: 2px solid teal;
|
||||
align-self: baseline;
|
||||
margin: 2px;
|
||||
}
|
||||
canvas {
|
||||
background: purple;
|
||||
width: 20px;
|
||||
height: 50px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexBaselineCheck">
|
||||
<!-- This canvas just exists to establish a precise, far-down baseline
|
||||
alignment position: -->
|
||||
<canvas></canvas>
|
||||
<!-- "contain:layout" should force all the elements below to behave as if
|
||||
they have no baseline. That means they all should *synthesize* a
|
||||
baseline from their border-box edge, in order to participate in flex
|
||||
item baseline alignment (to honor the outer flex container's
|
||||
"align-items:baseline"). So, the expectation here is that all of these
|
||||
elements' border-bottom edges should be aligned. -->
|
||||
<button>btn</button>
|
||||
<input type="button" value="i-btn">
|
||||
<input type="submit" value="i-sub">
|
||||
</div>
|
||||
|
||||
<!-- Same as above, but with different form controls:
|
||||
(split into multiple flex containers so as not to be too wide): -->
|
||||
<div class="flexBaselineCheck">
|
||||
<canvas></canvas>
|
||||
<input type="text" value="text">
|
||||
<input type="number" value="0">
|
||||
</div>
|
||||
|
||||
<div class="flexBaselineCheck">
|
||||
<canvas></canvas>
|
||||
<input type="date">
|
||||
<input type="time">
|
||||
</div>
|
||||
|
||||
<div class="flexBaselineCheck">
|
||||
<canvas></canvas>
|
||||
<input type="file">
|
||||
<textarea>textarea</textarea>
|
||||
</div>
|
||||
|
||||
<div class="flexBaselineCheck">
|
||||
<canvas></canvas>
|
||||
<select><option>dropdown</option></select>
|
||||
<select multiple style="max-height:40px"><option>multi</option></select>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
|
||||
<style>
|
||||
#a {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: green;
|
||||
margin: 25px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="a"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: paint' with various overflowing block descendants.</title>
|
||||
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
<link rel="match" href="contain-paint-clip-001-ref.html">
|
||||
<style>
|
||||
.root {
|
||||
contain: paint;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
margin: 25px;
|
||||
padding: 25px;
|
||||
}
|
||||
.a {
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
background: red;
|
||||
}
|
||||
.b {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: green;
|
||||
position: relative;
|
||||
top: -25px;
|
||||
left: -25px;
|
||||
}
|
||||
.background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: red;
|
||||
z-index: -1;
|
||||
}
|
||||
.foreground {
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
left: -25px;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 25px solid red;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="root">
|
||||
<div class="a">
|
||||
<div class="b"></div>
|
||||
<!--These two absolutely positioned elements are checking that all sides are-->
|
||||
<!--clipped. They also test that clipping is done correctly on absolutely-->
|
||||
<!--positioned elements.-->
|
||||
<div class="background"></div>
|
||||
<div class="foreground"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
|
||||
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
|
||||
<style>
|
||||
.root {
|
||||
overflow: hidden;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
margin: 25px;
|
||||
padding: 10px;
|
||||
border-radius: 4em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="root">
|
||||
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
|
||||
be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
|
||||
nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
|
||||
Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
|
||||
Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
|
||||
torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales
|
||||
ligula in libero.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: paint' with overflowing text contents inside a rounded rectangle box.</title>
|
||||
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
|
||||
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
<link rel="match" href="contain-paint-clip-002-ref.html">
|
||||
<style>
|
||||
.root {
|
||||
contain: paint;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
margin: 25px;
|
||||
padding: 10px;
|
||||
border-radius: 4em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="root">
|
||||
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
|
||||
be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
|
||||
nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
|
||||
Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
|
||||
Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
|
||||
torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales
|
||||
ligula in libero.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
|
||||
<style>
|
||||
.root {
|
||||
overflow-x: scroll;
|
||||
overflow-y: scroll;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
margin: 25px;
|
||||
padding: 25px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="root">
|
||||
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
|
||||
be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
|
||||
nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
|
||||
Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
|
||||
Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
|
||||
torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales
|
||||
ligula in libero.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: paint' with overflowing text contents, and 'overflow-y: scroll'.</title>
|
||||
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
<link rel="match" href="contain-paint-clip-003-ref.html">
|
||||
<style>
|
||||
.root {
|
||||
contain: paint;
|
||||
overflow-y: scroll;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
margin: 25px;
|
||||
padding: 25px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="root">
|
||||
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
|
||||
be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
|
||||
nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
|
||||
Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
|
||||
Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
|
||||
torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales
|
||||
ligula in libero.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
|
||||
<style>
|
||||
.root {
|
||||
overflow-y: scroll;
|
||||
overflow-x: scroll;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
margin: 25px;
|
||||
padding: 25px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="root">
|
||||
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
|
||||
be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
|
||||
nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
|
||||
Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
|
||||
Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
|
||||
torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales
|
||||
ligula in libero.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: paint' with overflowing text contents, and 'overflow-x: scroll'.</title>
|
||||
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
<link rel="match" href="contain-paint-clip-004-ref.html">
|
||||
<style>
|
||||
.root {
|
||||
contain: paint;
|
||||
overflow-x: scroll;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
margin: 25px;
|
||||
padding: 25px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="root">
|
||||
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
|
||||
be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
|
||||
nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
|
||||
Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
|
||||
Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
|
||||
torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales
|
||||
ligula in libero.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: paint' on li with overflowing text contents and
|
||||
bullet, and 'overflow-y: scroll'.</title>
|
||||
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
<link rel="match" href="contain-paint-clip-003-ref.html">
|
||||
<style>
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.root {
|
||||
contain: paint;
|
||||
overflow-y: scroll;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
margin: 25px;
|
||||
padding: 25px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li class="root">
|
||||
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
|
||||
be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
|
||||
Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis
|
||||
ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris
|
||||
massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu
|
||||
ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur
|
||||
sodales ligula in libero.
|
||||
</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
|
||||
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
|
||||
<style>
|
||||
.root {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
margin: 25px;
|
||||
padding: 25px;
|
||||
overflow: hidden;
|
||||
overflow-clip-box: content-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="root">
|
||||
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
|
||||
be clipped to the content box. Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
|
||||
nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
|
||||
Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
|
||||
Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
|
||||
torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales
|
||||
ligula in libero.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: paint' with overflowing text contents while "overflow-clip-box: content-box" enabled.</title>
|
||||
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
|
||||
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
<link rel="match" href="contain-paint-clip-006-ref.html">
|
||||
<style>
|
||||
.root {
|
||||
contain: paint;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
margin: 25px;
|
||||
padding: 25px;
|
||||
overflow-clip-box: content-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="root">
|
||||
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
|
||||
be clipped to the content box. Lorem ipsum dolor sit amet, consectetur adipiscing
|
||||
elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
|
||||
nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
|
||||
Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
|
||||
Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
|
||||
torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales
|
||||
ligula in libero.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
|
||||
<style>
|
||||
#a {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
margin: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="a"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: paint' element should contain absolute position elements.</title>
|
||||
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
<link rel="match" href="contain-paint-containing-block-absolute-001-ref.html">
|
||||
<style>
|
||||
#a {
|
||||
contain: paint;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
margin: 50px;
|
||||
}
|
||||
#b {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="a">
|
||||
<div>
|
||||
<div id="b"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
|
||||
<style>
|
||||
#a {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
margin: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="a"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: paint' element should contain fixed position elements.</title>
|
||||
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
<link rel="match" href="contain-paint-containing-block-fixed-001-ref.html">
|
||||
<style>
|
||||
#a {
|
||||
contain: paint;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
margin: 50px;
|
||||
}
|
||||
#b {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="a">
|
||||
<div>
|
||||
<div id="b"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
|
||||
<style>
|
||||
#left {
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 10px;
|
||||
background: blue;
|
||||
}
|
||||
#a {
|
||||
background: green;
|
||||
margin: 10px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="left"></div>
|
||||
<div id="a"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: paint' should contain floats as a formatting context.</title>
|
||||
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
<link rel="match" href="contain-paint-formatting-context-float-001-ref.html">
|
||||
<style>
|
||||
#left {
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 10px;
|
||||
background: blue;
|
||||
}
|
||||
#a {
|
||||
contain: paint;
|
||||
background: red;
|
||||
margin: 10px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
#b {
|
||||
clear: left;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="left"></div>
|
||||
<div id="a">
|
||||
<div id="b"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Test</title>
|
||||
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
|
||||
<style>
|
||||
#a {
|
||||
background: blue;
|
||||
margin: 10px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
#b {
|
||||
width: 50px;
|
||||
height: 40px;
|
||||
background: green;
|
||||
}
|
||||
#b-padding {
|
||||
height: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="a">
|
||||
<div id="b-padding"></div>
|
||||
<div id="b"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: paint' with a vertical margin child. Margin collapse should not occur.</title>
|
||||
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
<link rel="match" href="contain-paint-formatting-context-margin-001-ref.html">
|
||||
<style>
|
||||
#a {
|
||||
contain: paint;
|
||||
background: blue;
|
||||
margin: 10px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
#b {
|
||||
width: 50px;
|
||||
height: 40px;
|
||||
background: green;
|
||||
margin-top: 10px;
|
||||
}
|
||||
#c {
|
||||
background: red;
|
||||
width: 50px;
|
||||
height: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="a">
|
||||
<div id="b"></div>
|
||||
<div id="c"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.abspos-box {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
/* The boxes should stack in the order that I've listed their CSS classes
|
||||
here. The class names' first word (outside/before/inside/after) refers
|
||||
to the boxes' DOM position, and "background"/"midground"/"foreground"
|
||||
refers to their z-index values. */
|
||||
|
||||
.before-IB-background {
|
||||
background: darkmagenta;
|
||||
z-index: -1;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
}
|
||||
.after-IB-background {
|
||||
background: magenta;
|
||||
z-index: -1;
|
||||
top: 70px;
|
||||
left: 70px;
|
||||
}
|
||||
.outside-span-midground {
|
||||
background: darkkhaki;
|
||||
top: 90px;
|
||||
left: 90px;
|
||||
}
|
||||
.inside-IB-midground {
|
||||
background: khaki;
|
||||
top: 110px;
|
||||
left: 110px;
|
||||
}
|
||||
.before-IB-foreground {
|
||||
background: darkcyan;
|
||||
z-index: 1;
|
||||
top: 130px;
|
||||
left: 130px;
|
||||
}
|
||||
.after-IB-foreground {
|
||||
background: cyan;
|
||||
z-index: 1;
|
||||
top: 150px;
|
||||
left: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- The expectation here is that 'abspos-box' elements will all interact in
|
||||
the same top-level stacking context. That means the box ordering should
|
||||
be (back to front): darkmagenta/magenta/darkkhaki/khaki/darkcyan/cyan,
|
||||
with the boxes stacked (visually) from top-left to bottom-right. -->
|
||||
|
||||
<div class="abspos-box outside-span-midground"></div>
|
||||
|
||||
<!-- Note: this file is identical to the testcase,
|
||||
except for the lack of "contain: paint" on this span. -->
|
||||
<span>
|
||||
<div class="abspos-box before-IB-background"></div>
|
||||
<div class="abspos-box before-IB-foreground"></div>
|
||||
<!-- This unstyled div crates the IB split: -->
|
||||
<div>
|
||||
<div class="abspos-box inside-IB-midground"></div>
|
||||
</div>
|
||||
<div class="abspos-box after-IB-background"></div>
|
||||
<div class="abspos-box after-IB-foreground"></div>
|
||||
</span>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: paint' should have no effect on non-atomic inline
|
||||
(including its block part, if there's a block-in-inline split)</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
<link rel="match" href="contain-paint-ignored-cases-ib-split-001-ref.html">
|
||||
<style>
|
||||
.abspos-box {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
/* The boxes should stack in the order that I've listed their CSS classes
|
||||
here. The class names' first word (outside/before/inside/after) refers
|
||||
to the boxes' DOM position, and "background"/"midground"/"foreground"
|
||||
refers to their z-index values. */
|
||||
|
||||
.before-IB-background {
|
||||
background: darkmagenta;
|
||||
z-index: -1;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
}
|
||||
.after-IB-background {
|
||||
background: magenta;
|
||||
z-index: -1;
|
||||
top: 70px;
|
||||
left: 70px;
|
||||
}
|
||||
.outside-span-midground {
|
||||
background: darkkhaki;
|
||||
top: 90px;
|
||||
left: 90px;
|
||||
}
|
||||
.inside-IB-midground {
|
||||
background: khaki;
|
||||
top: 110px;
|
||||
left: 110px;
|
||||
}
|
||||
.before-IB-foreground {
|
||||
background: darkcyan;
|
||||
z-index: 1;
|
||||
top: 130px;
|
||||
left: 130px;
|
||||
}
|
||||
.after-IB-foreground {
|
||||
background: cyan;
|
||||
z-index: 1;
|
||||
top: 150px;
|
||||
left: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- The expectation here is that 'abspos-box' elements will all interact in
|
||||
the same top-level stacking context. That means the box ordering should
|
||||
be (back to front): darkmagenta/magenta/darkkhaki/khaki/darkcyan/cyan,
|
||||
with the boxes stacked (visually) from top-left to bottom-right. -->
|
||||
|
||||
<div class="abspos-box outside-span-midground"></div>
|
||||
|
||||
<span style="contain: paint">
|
||||
<div class="abspos-box before-IB-background"></div>
|
||||
<div class="abspos-box before-IB-foreground"></div>
|
||||
<!-- This unstyled div crates the IB split: -->
|
||||
<div>
|
||||
<div class="abspos-box inside-IB-midground"></div>
|
||||
</div>
|
||||
<div class="abspos-box after-IB-background"></div>
|
||||
<div class="abspos-box after-IB-foreground"></div>
|
||||
</span>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
|
||||
<style>
|
||||
tr {
|
||||
z-index: 10;
|
||||
}
|
||||
th {
|
||||
background-color: blue;
|
||||
padding-left: 50px;
|
||||
}
|
||||
caption {
|
||||
position: fixed;
|
||||
background-color: yellow;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<caption>PASS</caption>
|
||||
<tr>
|
||||
<th> </th>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: paint containment on internal table elements except table-cell.</title>
|
||||
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
<link rel="match" href="contain-paint-ignored-cases-internal-table-001-ref.html">
|
||||
<meta name="assert" content="Paint containment should not apply to internal table elements except table-cell. This test testes only the tr element, and confirms contain:paint does not create a stacking context.">
|
||||
<style>
|
||||
tr {
|
||||
contain: paint;
|
||||
z-index: 10;
|
||||
}
|
||||
th {
|
||||
background-color: blue;
|
||||
padding-left: 50px;
|
||||
}
|
||||
caption {
|
||||
position: fixed;
|
||||
background-color: yellow;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<caption>PASS</caption>
|
||||
<tr>
|
||||
<th> </th>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: paint containment on internal table elements except table-cell.</title>
|
||||
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
<link rel="match" href="contain-paint-ignored-cases-internal-table-001-ref.html">
|
||||
<meta name="assert" content="Paint containment should not apply to internal table elements except table-cell. This test testes only the tbody element, and confirms contain:paint does not create a stacking context.">
|
||||
<style>
|
||||
tbody {
|
||||
contain: paint;
|
||||
z-index: 10;
|
||||
}
|
||||
th {
|
||||
background-color: blue;
|
||||
padding-left: 50px;
|
||||
}
|
||||
caption {
|
||||
position: fixed;
|
||||
background-color: yellow;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<caption>PASS</caption>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th> </th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
}
|
||||
#div1,
|
||||
#div3 {
|
||||
background-color: #cfc;
|
||||
height: 100px;
|
||||
}
|
||||
#div1 {
|
||||
z-index: 5;
|
||||
}
|
||||
#div2 {
|
||||
display: contents;
|
||||
background-color: #fdd;
|
||||
height: 100px;
|
||||
top: -20px;
|
||||
}
|
||||
#div2_1 {
|
||||
background-color: #ffc;
|
||||
z-index: 6;
|
||||
top: -10px;
|
||||
height: 100px;
|
||||
}
|
||||
#div2_2 {
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
width: 40px;
|
||||
height: 300px;
|
||||
background-color: #ddf;
|
||||
}
|
||||
#div3 {
|
||||
z-index: 2;
|
||||
top: -50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="div1"></div>
|
||||
|
||||
<div id="div2">
|
||||
<div id="div2_1"></div>
|
||||
|
||||
<div id="div2_2"></div>
|
||||
</div>
|
||||
|
||||
<div id="div3"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: paint' with 'display: contents'.</title>
|
||||
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
<link rel="match" href="contain-paint-ignored-cases-no-principal-box-001-ref.html">
|
||||
<meta name="assert" content="Contain:paint should have no effect when no principle box is generated.">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
}
|
||||
#div1,
|
||||
#div3 {
|
||||
background-color: #cfc;
|
||||
height: 100px;
|
||||
}
|
||||
#div1 {
|
||||
z-index: 5;
|
||||
}
|
||||
#div2 {
|
||||
display: contents;
|
||||
contain: paint;
|
||||
background-color: #fdd;
|
||||
height: 100px;
|
||||
top: -20px;
|
||||
}
|
||||
#div2_1 {
|
||||
background-color: #ffc;
|
||||
z-index: 6;
|
||||
top: -10px;
|
||||
height: 100px;
|
||||
}
|
||||
#div2_2 {
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
width: 40px;
|
||||
height: 300px;
|
||||
background-color: #ddf;
|
||||
}
|
||||
#div3 {
|
||||
z-index: 2;
|
||||
top: -50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="div1"></div>
|
||||
|
||||
<div id="div2">
|
||||
<div id="div2_1"></div>
|
||||
|
||||
<div id="div2_2"></div>
|
||||
</div>
|
||||
|
||||
<div id="div3"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<head>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
|
||||
<style>
|
||||
rb,
|
||||
rbc,
|
||||
rt,
|
||||
rtc {
|
||||
background-color: yellow;
|
||||
font-size: 2em;
|
||||
}
|
||||
rbc {
|
||||
display: ruby-base-container;
|
||||
}
|
||||
.contained {
|
||||
width: 50px;
|
||||
height: 10px;
|
||||
background-color: blue;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
}
|
||||
.wrapper {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper"><ruby><rt> <div class="contained"></div></rt></ruby></div>
|
||||
<div class="wrapper"><ruby><rtc> <div class="contained"></div></rtc></ruby></div>
|
||||
<div class="wrapper"><ruby><rb> <div class="contained"></div></rb></ruby></div>
|
||||
<div class="wrapper"><ruby><rbc> <div class="contained"></div></rbc></ruby></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<head>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: paint containment on internal ruby elements.</title>
|
||||
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
<link rel="match" href="contain-paint-ignored-cases-ruby-containing-block-001-ref.html">
|
||||
<meta name="assert" content="Paint containment should not apply to ruby base, ruby base container, ruby text, and ruby text container. This test confirms contain:paint does not act as a containing block for fixed positioned descendants.">
|
||||
<style>
|
||||
rb,
|
||||
rbc,
|
||||
rt,
|
||||
rtc {
|
||||
contain: paint;
|
||||
background-color: yellow;
|
||||
font-size: 2em;
|
||||
}
|
||||
rbc {
|
||||
display: ruby-base-container;
|
||||
}
|
||||
.contained {
|
||||
width: 50px;
|
||||
height: 10px;
|
||||
background-color: blue;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
}
|
||||
.wrapper {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper"><ruby><rt> <div class="contained"></div></rt></ruby></div>
|
||||
<div class="wrapper"><ruby><rtc> <div class="contained"></div></rtc></ruby></div>
|
||||
<div class="wrapper"><ruby><rb> <div class="contained"></div></rb></ruby></div>
|
||||
<div class="wrapper"><ruby><rbc> <div class="contained"></div></rbc></ruby></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<head>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
}
|
||||
rbc {
|
||||
display: ruby-base-container;
|
||||
}
|
||||
.contained {
|
||||
z-index: 5;
|
||||
width: 70px;
|
||||
height: 10px;
|
||||
background-color: blue;
|
||||
margin-left: -25px;
|
||||
}
|
||||
.background {
|
||||
display: inline-block;
|
||||
background-color: yellow;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
}
|
||||
.group {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="group">
|
||||
<div class="background"></div>
|
||||
<ruby><rb> <div class="contained"></div></rb></ruby>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div class="background"></div>
|
||||
<ruby><rbc> <div class="contained"></div></rbc></ruby>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div class="background"></div>
|
||||
<ruby><rt> <div class="contained"></div></rt></ruby>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div class="background"></div>
|
||||
<ruby><rtc> <div class="contained"></div></rtc></ruby>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<head>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: paint containment on internal ruby elements.</title>
|
||||
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
<link rel="match" href="contain-paint-ignored-cases-ruby-stacking-and-clipping-001-ref.html">
|
||||
<meta name="assert" content="Paint containment should not apply to ruby base, ruby base container, ruby text, and ruby text container. This test confirms that contain:paint does not create a stacking context and does not apply overflow clipping.">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
}
|
||||
rb,
|
||||
rbc,
|
||||
rt,
|
||||
rtc {
|
||||
contain: paint;
|
||||
}
|
||||
rbc {
|
||||
display: ruby-base-container;
|
||||
}
|
||||
.contained {
|
||||
z-index: 5;
|
||||
width: 70px;
|
||||
height: 10px;
|
||||
background-color: blue;
|
||||
margin-left: -25px;
|
||||
}
|
||||
.background {
|
||||
background-color: yellow;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
}
|
||||
.group {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="group">
|
||||
<div class="background"></div>
|
||||
<ruby><rb> <div class="contained"></div></rb></ruby>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div class="background"></div>
|
||||
<ruby><rbc> <div class="contained"></div></rbc></ruby>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div class="background"></div>
|
||||
<ruby><rt> <div class="contained"></div></rt></ruby>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div class="background"></div>
|
||||
<ruby><rtc> <div class="contained"></div></rtc></ruby>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
}
|
||||
#div1,
|
||||
#div3 {
|
||||
background-color: #cfc;
|
||||
}
|
||||
#div1 {
|
||||
z-index: 5;
|
||||
}
|
||||
#div2 {
|
||||
z-index: 1;
|
||||
background-color: #fdd;
|
||||
height: 100px;
|
||||
top: -20px;
|
||||
}
|
||||
#div2_1 {
|
||||
background-color: #ffc;
|
||||
z-index: 6;
|
||||
top: -10px;
|
||||
}
|
||||
#div2_2 {
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
width: 40px;
|
||||
height: 100px;
|
||||
background-color: #ddf;
|
||||
}
|
||||
#div3 {
|
||||
z-index: 2;
|
||||
top: -50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="div1">
|
||||
<br/><br/>
|
||||
</div>
|
||||
|
||||
<div id="div2">
|
||||
<div id="div2_1">
|
||||
<br/><br/>
|
||||
</div>
|
||||
|
||||
<div id="div2_2">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="div3">
|
||||
<br/><br/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: paint' with stacking contents. Z-index is defined only for siblings and children.</title>
|
||||
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
|
||||
|
||||
<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#x43">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
<link rel="match" href="contain-paint-stacking-context-001-ref.html">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
}
|
||||
#div1,
|
||||
#div3 {
|
||||
background-color: #cfc;
|
||||
}
|
||||
#div1 {
|
||||
z-index: 5;
|
||||
}
|
||||
#div2 {
|
||||
contain: paint;
|
||||
background-color: #fdd;
|
||||
height: 100px;
|
||||
top: -20px;
|
||||
}
|
||||
#div2_1 {
|
||||
background-color: #ffc;
|
||||
z-index: 6;
|
||||
top: -10px;
|
||||
}
|
||||
#div2_2 {
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
width: 40px;
|
||||
height: 100px;
|
||||
background-color: #ddf;
|
||||
}
|
||||
#div3 {
|
||||
z-index: 2;
|
||||
top: -50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="div1">
|
||||
<br/><br/>
|
||||
</div>
|
||||
|
||||
<div id="div2">
|
||||
<div id="div2_1">
|
||||
<br/><br/>
|
||||
</div>
|
||||
|
||||
<div id="div2_2">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="div3">
|
||||
<br/><br/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'will-change: contain' with stacking contents. Z-index is defined only for siblings and children.</title>
|
||||
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
|
||||
|
||||
<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#x43">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
<link rel="match" href="contain-paint-stacking-context-001-ref.html">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
}
|
||||
#div1,
|
||||
#div3 {
|
||||
background-color: #cfc;
|
||||
}
|
||||
#div1 {
|
||||
z-index: 5;
|
||||
}
|
||||
#div2 {
|
||||
will-change: contain;
|
||||
background-color: #fdd;
|
||||
height: 100px;
|
||||
top: -20px;
|
||||
}
|
||||
#div2_1 {
|
||||
background-color: #ffc;
|
||||
z-index: 6;
|
||||
top: -10px;
|
||||
}
|
||||
#div2_2 {
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
width: 40px;
|
||||
height: 100px;
|
||||
background-color: #ddf;
|
||||
}
|
||||
#div3 {
|
||||
z-index: 2;
|
||||
top: -50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="div1">
|
||||
<br/><br/>
|
||||
</div>
|
||||
|
||||
<div id="div2">
|
||||
<div id="div2_1">
|
||||
<br/><br/>
|
||||
</div>
|
||||
|
||||
<div id="div2_2">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="div3">
|
||||
<br/><br/>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<style>
|
||||
.basic {
|
||||
border: 1em solid green;
|
||||
}
|
||||
.height-ref {
|
||||
height: 50px;
|
||||
background: lightblue;
|
||||
}
|
||||
.width-ref {
|
||||
width: 50px;
|
||||
}
|
||||
.floatLBasic-ref {
|
||||
float: left;
|
||||
}
|
||||
.floatLWidth-ref {
|
||||
float: left;
|
||||
width: 50px;
|
||||
}
|
||||
.flexBaselineCheck {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
.innerContents {
|
||||
color: transparent;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="basic"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic height-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic height-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic width-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic width-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic floatLBasic-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic floatLWidth-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="flexBaselineCheck">
|
||||
outside before<div class="basic innerContents">i</div>outside after
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: size' on block elements should cause them to be sized as if they had no contents</title>
|
||||
<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-001-ref.html">
|
||||
<style>
|
||||
.contain {
|
||||
contain: size;
|
||||
border: 1em solid green;
|
||||
background: red;
|
||||
}
|
||||
.innerContents {
|
||||
color: transparent;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.minHeight {
|
||||
min-height: 50px;
|
||||
background: lightblue;
|
||||
}
|
||||
.height {
|
||||
height: 50px;
|
||||
background: lightblue;
|
||||
}
|
||||
.maxWidth {
|
||||
max-width: 50px;
|
||||
}
|
||||
.width {
|
||||
width: 50px;
|
||||
}
|
||||
.floatLBasic {
|
||||
float: left;
|
||||
}
|
||||
.floatLWidth {
|
||||
float: left;
|
||||
width: 50px;
|
||||
}
|
||||
.flexBaselineCheck {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!--CSS Test: A size-contained block element with no specified size should render at 0 height regardless of content.-->
|
||||
<div class="contain"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained block element with specified min-height should render at given min-height regardless of content.-->
|
||||
<div class="contain minHeight"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained block element with specified height should render at given height regardless of content.-->
|
||||
<div class="contain height"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained block element with specified max-width should render at given max-width and zero height regardless of content.-->
|
||||
<div class="contain maxWidth"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained block element with specified width should render at given width and zero height regardless of content.-->
|
||||
<div class="contain width"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained floated block element with no specified size should render at 0px by 0px regardless of content.-->
|
||||
<div class="contain floatLBasic"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained floated block element with specified width and no specified height should render at given width and 0 height regardless of content.-->
|
||||
<div class="contain floatLWidth"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained block element should perform baseline alignment regularly.-->
|
||||
<div class="flexBaselineCheck">
|
||||
outside before<div class="contain"><div class="innerContents">inner</div></div>outside after
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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: scroll;
|
||||
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:scroll' 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-002-ref.html">
|
||||
<style>
|
||||
.contain {
|
||||
contain: size;
|
||||
overflow: scroll;
|
||||
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,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,86 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<style>
|
||||
button {
|
||||
border: 1em solid green;
|
||||
/* In case the testcase's 'inner' text is taller than the button, don't let
|
||||
it influence its line-box's size. This lets us more-easily compare
|
||||
sizing between empty buttons vs. contained nonempty buttons. */
|
||||
vertical-align: top;
|
||||
}
|
||||
.vaBaseline {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.width-ref {
|
||||
width: 50px;
|
||||
}
|
||||
.height-ref {
|
||||
height: 50px;
|
||||
background: lightblue;
|
||||
}
|
||||
.floatLBasic-ref {
|
||||
float: left;
|
||||
}
|
||||
.floatLWidth-ref {
|
||||
float: left;
|
||||
width: 50px;
|
||||
}
|
||||
br { clear: both }
|
||||
.iFlexBasic-ref {
|
||||
display: inline-flex;
|
||||
}
|
||||
.iFlexWidth-ref {
|
||||
display: inline-flex;
|
||||
width: 50px;
|
||||
}
|
||||
.innerContents {
|
||||
color: transparent;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
.orthog-ref {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<button></button>
|
||||
<br>
|
||||
|
||||
<button class="floatLBasic-ref"></button>
|
||||
<br>
|
||||
|
||||
<button class="floatLWidth-ref"></button>
|
||||
<br>
|
||||
|
||||
<button class="iFlexBasic-ref"></button>
|
||||
<br>
|
||||
|
||||
<button class="iFlexWidth-ref"></button>
|
||||
<br>
|
||||
|
||||
outside before<button class="vaBaseline"><div class="innerContents">inner</div></button>outside after
|
||||
<br>
|
||||
|
||||
<button class="width-ref"></button>
|
||||
<br>
|
||||
|
||||
<button class="width-ref"></button>
|
||||
<br>
|
||||
|
||||
<button class="height-ref"></button>
|
||||
<br>
|
||||
|
||||
<button class="height-ref"></button>
|
||||
<br>
|
||||
|
||||
s<button class="orthog-ref vaBaseline"><div class="innerContents">inner</div></button>endtext
|
||||
<br>
|
||||
|
||||
<button class="height-ref width-ref">inside</button>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: size' on buttons should cause them to be sized as if they had no contents.</title>
|
||||
<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-button-002-ref.html">
|
||||
<style>
|
||||
button {
|
||||
contain: size;
|
||||
border: 1em solid green;
|
||||
/* In case the testcase's 'inner' text is taller than the button, don't let
|
||||
it influence its line-box's size. This lets us more-easily compare
|
||||
sizing between empty buttons vs. contained nonempty buttons. */
|
||||
vertical-align: top;
|
||||
}
|
||||
.vaBaseline {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.innerContents {
|
||||
color: transparent;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.minWidth {
|
||||
min-width: 50px;
|
||||
}
|
||||
.width {
|
||||
width: 50px;
|
||||
}
|
||||
.minHeight {
|
||||
min-height: 50px;
|
||||
background: lightblue;
|
||||
}
|
||||
.height {
|
||||
height: 50px;
|
||||
background: lightblue;
|
||||
}
|
||||
.floatLBasic {
|
||||
float: left;
|
||||
}
|
||||
.floatLWidth {
|
||||
float: left;
|
||||
width: 50px;
|
||||
}
|
||||
br { clear: both }
|
||||
.iFlexBasic {
|
||||
display: inline-flex;
|
||||
}
|
||||
.iFlexWidth {
|
||||
display: inline-flex;
|
||||
width: 50px;
|
||||
}
|
||||
.orthog {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!--CSS Test: A size-contained button with no specified size should render at 0 height regardless of content.-->
|
||||
<button><div class="innerContents">inner</div></button>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained floated button with no specified size should render at 0px by 0px regardless of content.-->
|
||||
<button class="floatLBasic"><div class="innerContents">inner</div></button>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained floated button with specified width and no specified height should render at given width and 0 height regardless of content.-->
|
||||
<button class="floatLWidth"><div class="innerContents">inner</div></button>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained inline-flex button with no specified size should render at 0px by 0px regardless of content.-->
|
||||
<button class="iFlexBasic"><div class="innerContents">inner</div></button>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained inline-flex button with specified width and no specified height should render at given width and 0 height regardless of content.-->
|
||||
<button class="iFlexWidth"><div class="innerContents">inner</div></button>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained button should perform baseline alignment regularly.-->
|
||||
outside before<button class="vaBaseline"><div class="innerContents">inner</div></button>outside after
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained button with specified min-width should render at given min-width and zero height regardless of content.-->
|
||||
<button class="minWidth"><div class="innerContents">inner</div></button>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained button with specified width should render at given width and zero height regardless of content.-->
|
||||
<button class="width"><div class="innerContents">inner</div></button>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained button with specified min-height should render at given min-height regardless of content.-->
|
||||
<button class="minHeight"><div class="innerContents">inner</div></button>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained button with specified height should render at given height regardless of content.-->
|
||||
<button class="height"><div class="innerContents">inner</div></button>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained button with vertical text should perform baseline alignment regularly.-->
|
||||
s<button class="orthog vaBaseline"><div class="innerContents">inner</div></button>endtext
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained button with inner text should layout the text in the same manner as a container of the same type with identical contents.-->
|
||||
<button class="height width">inside</button>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<style>
|
||||
.basic {
|
||||
visibility: hidden;
|
||||
border: none;
|
||||
}
|
||||
.container {
|
||||
border: 10px solid green;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.height {
|
||||
height: 30px;
|
||||
}
|
||||
.width {
|
||||
width: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container"><fieldset class="basic"></fieldset></div>
|
||||
<br>
|
||||
|
||||
<div class="container"><fieldset class="basic height"></fieldset></div>
|
||||
<br>
|
||||
|
||||
<div class="container"><fieldset class="basic height"></fieldset></div>
|
||||
<br>
|
||||
|
||||
<div class="container"><fieldset class="basic width"></fieldset></div>
|
||||
<br>
|
||||
|
||||
<div class="container"><fieldset class="basic width"></fieldset></div>
|
||||
<br>
|
||||
|
||||
<fieldset class="height"><legend>legend</legend></fieldset>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: size' on fieldset elements should cause them to be sized as if they had no contents.</title>
|
||||
<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-fieldset-003-ref.html">
|
||||
<style>
|
||||
.contain {
|
||||
contain: size;
|
||||
visibility: hidden;
|
||||
border: none;
|
||||
color: transparent;
|
||||
}
|
||||
.container {
|
||||
border: 10px solid green;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.innerContents {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
.minHeight {
|
||||
min-height: 30px;
|
||||
}
|
||||
.height {
|
||||
height: 30px;
|
||||
}
|
||||
.minWidth {
|
||||
min-width: 30px;
|
||||
}
|
||||
.width {
|
||||
width: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!--Note: The following .container class is used to help test if size-contained
|
||||
fieldsets and non-contained fieldsets have the same size. Normally, we'd test
|
||||
that a fieldset with children and size-containment is drawn identically to a
|
||||
fieldset without containment or children. However, when we have a legend as
|
||||
a child, border placement and padding of the fieldset are changed.
|
||||
To check the dimensions between the ref-case and test-case without
|
||||
failing because of the border/padding differences, we make the fieldset
|
||||
{visibility:hidden; border:none;} and add a .container wrapper div.-->
|
||||
|
||||
<!--CSS Test: A size-contained fieldset element with no specified size should size itself as if it had no contents.-->
|
||||
<div class="container">
|
||||
<fieldset class="contain">
|
||||
<legend>legend</legend>
|
||||
<div class="innerContents">inner</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained fieldset element with specified min-height should size itself as if it had no contents.-->
|
||||
<div class="container">
|
||||
<fieldset class="contain minHeight">
|
||||
<legend>legend</legend>
|
||||
<div class="innerContents">inner</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained fieldset element with specified height should size itself as if it had no contents.-->
|
||||
<div class="container">
|
||||
<fieldset class="contain height">
|
||||
<legend>legend</legend>
|
||||
<div class="innerContents">inner</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained fieldset element with specified min-width should size itself as if it had no contents.-->
|
||||
<div class="container">
|
||||
<fieldset class="contain minWidth">
|
||||
<legend>legend</legend>
|
||||
<div class="innerContents">inner</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained fieldset element with specified width should size itself as if it had no contents.-->
|
||||
<div class="container">
|
||||
<fieldset class="contain width">
|
||||
<legend>legend</legend>
|
||||
<div class="innerContents">inner</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size contained fieldset element with a legend should draw its legend and border in the same way as a non-contained fieldset element-->
|
||||
<fieldset class="height" style="contain:size;">
|
||||
<legend>legend</legend>
|
||||
</fieldset>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<style>
|
||||
.container {
|
||||
border: 10px solid green;
|
||||
display: inline-block;
|
||||
}
|
||||
.floatLBasic-ref {
|
||||
float: left;
|
||||
}
|
||||
.floatLWidth-ref {
|
||||
float: left;
|
||||
width: 30px;
|
||||
}
|
||||
.flexBaselineCheck {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
fieldset {
|
||||
border: none;
|
||||
color: transparent;
|
||||
}
|
||||
legend, .innerContents {
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexBaselineCheck">
|
||||
outside before<fieldset>
|
||||
<legend>l</legend>
|
||||
<div class="innerContents">i</div>
|
||||
</fieldset>outside after
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: size' on fieldset elements shouldn't prevent them from being baseline-aligned regularly.</title>
|
||||
<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-fieldset-004-ref.html">
|
||||
<style>
|
||||
.contain {
|
||||
contain: size;
|
||||
border: none;
|
||||
color: transparent;
|
||||
visibility: hidden;
|
||||
}
|
||||
.innerContents {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
.flexBaselineCheck {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!--CSS Test: A size-contained fieldset element should perform baseline alignment regularly.-->
|
||||
<div class="flexBaselineCheck">
|
||||
outside before<fieldset class="contain">
|
||||
<legend>legend</legend>
|
||||
<div class="innerContents">inner</div>
|
||||
</fieldset>outside after
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<style>
|
||||
.basic {
|
||||
display: flex;
|
||||
border: 1em solid green;
|
||||
}
|
||||
.height-ref {
|
||||
height: 40px;
|
||||
background: lightblue;
|
||||
}
|
||||
.width-ref {
|
||||
width: 40px;
|
||||
}
|
||||
.floatLBasic-ref {
|
||||
float: left;
|
||||
}
|
||||
.floatLWidth-ref {
|
||||
float: left;
|
||||
width: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="basic"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic height-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic height-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic width-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic width-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic floatLBasic-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic floatLWidth-ref"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: size' on flex elements should cause them to be sized as if they had no contents.</title>
|
||||
<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-flex-001-ref.html">
|
||||
<style>
|
||||
.contain {
|
||||
display: flex;
|
||||
contain:size;
|
||||
border: 1em solid green;
|
||||
background: red;
|
||||
}
|
||||
.innerContents {
|
||||
color: transparent;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.minHeight {
|
||||
min-height: 40px;
|
||||
background: lightblue;
|
||||
}
|
||||
.height {
|
||||
height: 40px;
|
||||
background: lightblue;
|
||||
}
|
||||
.maxWidth {
|
||||
max-width: 40px;
|
||||
}
|
||||
.width {
|
||||
width: 40px;
|
||||
}
|
||||
.floatLBasic {
|
||||
float: left;
|
||||
}
|
||||
.floatLWidth {
|
||||
float: left;
|
||||
width: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!--CSS Test: A size-contained flex element with no specified size should render at 0 height regardless of content.-->
|
||||
<div class="contain"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained flex element with specified min-height should render at given min-height regardless of content.-->
|
||||
<div class="contain minHeight"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained flex element with specified height should render at given height regardless of content.-->
|
||||
<div class="contain height"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained flex element with specified max-width should render at given max-width and zero height regardless of content.-->
|
||||
<div class="contain maxWidth"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained flex element with specified width should render at given width and zero height regardless of content.-->
|
||||
<div class="contain width"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained floated flex element with no specified size should render at 0px by 0px regardless of content.-->
|
||||
<div class="contain floatLBasic"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained floated flex element with specified width and no specified height should render at given width and 0 height regardless of content.-->
|
||||
<div class="contain floatLWidth"><div class="innerContents">inner</div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Gerald Squelart" href="mailto:gsquelart@mozilla.com">
|
||||
<style>
|
||||
.basic {
|
||||
display: grid;
|
||||
border: 1em solid green;
|
||||
}
|
||||
.height-ref {
|
||||
height: 40px;
|
||||
background: lightblue;
|
||||
}
|
||||
.width-ref {
|
||||
width: 40px;
|
||||
}
|
||||
.floatLBasic-ref {
|
||||
float: left;
|
||||
}
|
||||
.floatLWidth-ref {
|
||||
float: left;
|
||||
width: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="basic"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic height-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic height-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic width-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic width-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic floatLBasic-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic floatLWidth-ref"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: size' on grid elements should cause them to be sized as if they had no contents.</title>
|
||||
<link rel="author" title="Gerald Squelart" href="mailto:gsquelart@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
|
||||
<link rel="match" href="contain-size-grid-005-ref.html">
|
||||
<style>
|
||||
.contain {
|
||||
display: grid;
|
||||
contain:size;
|
||||
border: 1em solid green;
|
||||
background: red;
|
||||
}
|
||||
.innerContents {
|
||||
color: transparent;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.minHeight {
|
||||
min-height: 40px;
|
||||
background: lightblue;
|
||||
}
|
||||
.height {
|
||||
height: 40px;
|
||||
background: lightblue;
|
||||
}
|
||||
.maxWidth {
|
||||
max-width: 40px;
|
||||
}
|
||||
.width {
|
||||
width: 40px;
|
||||
}
|
||||
.floatLBasic {
|
||||
float: left;
|
||||
}
|
||||
.floatLWidth {
|
||||
float: left;
|
||||
width: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!--CSS Test: A size-contained grid element with no specified size should render at 0 height regardless of content.-->
|
||||
<div class="contain"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained grid element with specified min-height should render at given min-height regardless of content.-->
|
||||
<div class="contain minHeight"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained grid element with specified height should render at given height regardless of content.-->
|
||||
<div class="contain height"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained grid element with specified max-width should render at given max-width and zero height regardless of content.-->
|
||||
<div class="contain maxWidth"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained grid element with specified width should render at given width and zero height regardless of content.-->
|
||||
<div class="contain width"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained floated grid element with no specified size should render at 0px by 0px regardless of content.-->
|
||||
<div class="contain floatLBasic"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained floated grid element with specified width and no specified height should render at given width and 0 height regardless of content.-->
|
||||
<div class="contain floatLWidth"><div class="innerContents">inner</div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<style>
|
||||
.basic {
|
||||
display: inline-block;
|
||||
border: 1em solid green;
|
||||
}
|
||||
.height-ref {
|
||||
height: 50px;
|
||||
}
|
||||
.width-ref {
|
||||
width: 50px;
|
||||
}
|
||||
.innerContents {
|
||||
color: transparent;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="basic"><div class="innerContents">i</div></div>
|
||||
<br>
|
||||
|
||||
outside before<div class="basic"><div class="innerContents">i</div></div>outside after
|
||||
<br>
|
||||
|
||||
<div class="basic height-ref"><div class="innerContents">i</div></div>
|
||||
<br>
|
||||
|
||||
<div class="basic height-ref"><div class="innerContents">i</div></div>
|
||||
<br>
|
||||
|
||||
<div class="basic width-ref"><div class="innerContents">i</div></div>
|
||||
<br>
|
||||
|
||||
<div class="basic width-ref"><div class="innerContents">i</div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: size' on inline-block elements should cause them to be sized as if they had no contents and baseline-aligned regularly.</title>
|
||||
<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-001-ref.html">
|
||||
<style>
|
||||
.contain {
|
||||
display: inline-block;
|
||||
contain:size;
|
||||
border: 1em solid green;
|
||||
background: red;
|
||||
}
|
||||
.innerContents {
|
||||
color: transparent;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.minHeight {
|
||||
min-height: 50px;
|
||||
}
|
||||
.height {
|
||||
height: 50px;
|
||||
}
|
||||
.minWidth {
|
||||
min-width: 50px;
|
||||
}
|
||||
.width {
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!--CSS Test: A size-contained inline-block element with no specified size should render at 0 height and 0 width regardless of content.-->
|
||||
<div class="contain"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained inline-block element should perform baseline alignment regularly.-->
|
||||
outside before<div class="contain"><div class="innerContents">inner</div></div>outside after
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained inline-block element with specified min-height should render at given min-height and 0 width regardless of content.-->
|
||||
<div class="contain minHeight"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained inline-block element with specified height should render at given height and 0 width regardless of content.-->
|
||||
<div class="contain height"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained inline-block element with specified min-width should render at given min-width and 0 height regardless of content.-->
|
||||
<div class="contain minWidth"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained inline-block element with specified width should render at given width and 0 height regardless of content.-->
|
||||
<div class="contain width"><div class="innerContents">inner</div></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: scroll;
|
||||
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:scroll' 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-002-ref.html">
|
||||
<style>
|
||||
.contain {
|
||||
display: inline-block;
|
||||
overflow: scroll;
|
||||
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,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>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<style>
|
||||
.basic {
|
||||
border: 1em solid green;
|
||||
display: inline-flex;
|
||||
}
|
||||
.width-ref {
|
||||
width: 50px;
|
||||
}
|
||||
.innerContents {
|
||||
color: transparent;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
aa<div class="basic"><div class="innerContents">i</div></div>bb
|
||||
<br>
|
||||
|
||||
aa<div class="basic width-ref"><div class="innerContents">i</div></div>bb
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: size' on inline-flex elements should cause them to be sized as if they had no contents and baseline-aligned regularly.</title>
|
||||
<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-flex-001-ref.html">
|
||||
<style>
|
||||
.contain {
|
||||
display: inline-flex;
|
||||
contain:size;
|
||||
border: 1em solid green;
|
||||
background: red;
|
||||
}
|
||||
.innerContents {
|
||||
color: transparent;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.width {
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!--CSS Test: A size-contained inline-flex element without dimensions should ensure baseline alignment behaves regularly.-->
|
||||
aa<div class="contain"><div class="innerContents">inner</div></div>bb
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained inline-flex element with specified width should ensure baseline alignment behaves regularly.-->
|
||||
aa<div class="contain width"><div class="innerContents">inner</div></div>bb
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<style>
|
||||
.basic {
|
||||
border: 1em solid green;
|
||||
column-count: 3;
|
||||
}
|
||||
.height-ref {
|
||||
height: 20px;
|
||||
background: lightblue;
|
||||
}
|
||||
.width-ref {
|
||||
width: 20px;
|
||||
}
|
||||
.floatLBasic-ref {
|
||||
float: left;
|
||||
}
|
||||
.floatLWidth-ref {
|
||||
float: left;
|
||||
width: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="basic"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic height-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic height-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic width-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic width-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic floatLBasic-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic floatLWidth-ref"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: size' on multicol elements should cause them to be sized as if they had no contents.</title>
|
||||
<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-multicol-002-ref.html">
|
||||
<style>
|
||||
.contain {
|
||||
contain: size;
|
||||
border: 1em solid green;
|
||||
background: red;
|
||||
column-count: 3;
|
||||
}
|
||||
.innerContents {
|
||||
color: transparent;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
.minHeight {
|
||||
min-height: 20px;
|
||||
background: lightblue;
|
||||
}
|
||||
.height {
|
||||
height: 20px;
|
||||
background: lightblue;
|
||||
}
|
||||
.maxWidth {
|
||||
max-width: 20px;
|
||||
}
|
||||
.width {
|
||||
width: 20px;
|
||||
}
|
||||
.floatLBasic {
|
||||
float: left;
|
||||
}
|
||||
.floatLWidth {
|
||||
float: left;
|
||||
width: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!--CSS Test: A size-contained multicol element with no specified size should render at 0 height regardless of content.-->
|
||||
<div class="contain"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained multicol element with specified min-height should render at given min-height regardless of content.-->
|
||||
<div class="contain minHeight"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained multicol element with specified height should render at given height regardless of content.-->
|
||||
<div class="contain height"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained multicol element with specified max-width should render at given max-width and zero height regardless of content.-->
|
||||
<div class="contain maxWidth"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained multicol element with specified width should render at given width and zero height regardless of content.-->
|
||||
<div class="contain width"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained floated multicol element with no specified size should render at 0px by 0px regardless of content.-->
|
||||
<div class="contain floatLBasic"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained floated multicol element with specified width and no specified height should render at given width and 0 height regardless of content.-->
|
||||
<div class="contain floatLWidth"><div class="innerContents">inner</div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<style>
|
||||
.basic {
|
||||
border: 1em solid green;
|
||||
column-count: 3;
|
||||
}
|
||||
.innerContents {
|
||||
color: transparent;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
.col-width-ref {
|
||||
column-width: 20px;
|
||||
}
|
||||
.col-gap-ref {
|
||||
column-gap: 5px;
|
||||
}
|
||||
.flexBaselineCheck {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
.min {
|
||||
width: min-content;
|
||||
}
|
||||
.max {
|
||||
width: max-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexBaselineCheck">
|
||||
outside before
|
||||
<div class="basic" style="max-height:0px">
|
||||
<div class="innerContents">inner</div>
|
||||
</div>
|
||||
outside after
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="basic min col-width-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic max col-width-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic min col-gap-ref col-width-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic max col-gap-ref col-width-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="min">
|
||||
<div class="basic"></div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="max">
|
||||
<div class="basic"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: size' on multicol elements should cause them to be sized as if they had no contents</title>
|
||||
<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-multicol-003-ref.html">
|
||||
<style>
|
||||
.contain {
|
||||
contain: size;
|
||||
border: 1em solid green;
|
||||
background: red;
|
||||
column-count: 3;
|
||||
}
|
||||
.innerContents {
|
||||
color: transparent;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.col-width {
|
||||
column-width: 20px;
|
||||
}
|
||||
.col-gap {
|
||||
column-gap: 5px;
|
||||
}
|
||||
.flexBaselineCheck {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
.min {
|
||||
width: min-content;
|
||||
}
|
||||
.max {
|
||||
width: max-content;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- This test verifies that contain:size doesn't interfere with the
|
||||
determination of a multicol element's baseline. -->
|
||||
<div class="flexBaselineCheck">
|
||||
outside before
|
||||
<div class="contain">
|
||||
<div class="innerContents">inner</div>
|
||||
</div>
|
||||
outside after
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!--The following tests are used to ensure column-gaps and column-widths continue to contribute to the minimum and maximum width of a size-contained multicol element. Each should render as if it had no contents.-->
|
||||
|
||||
<div class="contain min col-width"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<div class="contain max col-width"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<div class="contain min col-gap col-width"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<div class="contain max col-gap col-width"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<div class="min">
|
||||
<div class="contain">
|
||||
<div class="innerContents">inner</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="max">
|
||||
<div class="contain">
|
||||
<div class="innerContents">inner</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<style>
|
||||
.cols {
|
||||
column-count: 3;
|
||||
column-rule: 1px dotted blue;
|
||||
column-fill: auto;
|
||||
border: 2px solid blue;
|
||||
height: 50px;
|
||||
width: 300px;
|
||||
}
|
||||
.innerObject {
|
||||
height: 200px;
|
||||
width: 100px;
|
||||
background: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="cols">
|
||||
<canvas class="innerObject">
|
||||
<!-- Note: We use a canvas object here as a generic reference for
|
||||
something monolithic/non-fragmentable. -->
|
||||
</canvas>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: size' should force elements to be monolithic, i.e. to not fragment inside a multicol element.</title>
|
||||
<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-multicol-004-ref.html">
|
||||
<style>
|
||||
.contain {
|
||||
contain:size;
|
||||
}
|
||||
.cols {
|
||||
column-count: 3;
|
||||
column-rule: 1px dotted blue;
|
||||
column-fill: auto;
|
||||
border: 2px solid blue;
|
||||
height: 50px;
|
||||
width: 300px;
|
||||
}
|
||||
.innerObject {
|
||||
height: 200px;
|
||||
width: 100px;
|
||||
background: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="cols">
|
||||
<div class="contain innerObject">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<style>
|
||||
select {
|
||||
color: transparent;
|
||||
}
|
||||
.minWidth {
|
||||
min-width: 100px;
|
||||
}
|
||||
.width {
|
||||
width: 100px;
|
||||
}
|
||||
.floatLWidth {
|
||||
float: left;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<select class="floatLWidth">
|
||||
</select>
|
||||
<br style="clear:both;">
|
||||
|
||||
<select class="minWidth">
|
||||
</select>
|
||||
<br>
|
||||
|
||||
<select class="width">
|
||||
</select>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: size' on select objects should cause them to be sized as if they have no contents.</title>
|
||||
<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-select-elem-001-ref.html">
|
||||
<style>
|
||||
select {
|
||||
contain: size;
|
||||
color: transparent;
|
||||
}
|
||||
.minWidth {
|
||||
min-width: 100px;
|
||||
}
|
||||
.width {
|
||||
width: 100px;
|
||||
}
|
||||
.floatLWidth {
|
||||
float: left;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<select class="floatLWidth">
|
||||
<option>CSS Test: A size-contained floated select with specified width and no specified height should size itself as if it had no contents.</option>
|
||||
<option>a</option>
|
||||
<option>b</option>
|
||||
<option>c</option>
|
||||
</select>
|
||||
<br style="clear:both;">
|
||||
|
||||
<select class="minWidth">
|
||||
<option>CSS Test: A size-contained select with specified min-width should size itself as if it had no contents.</option>
|
||||
<option>a</option>
|
||||
<option>b</option>
|
||||
<option>c</option>
|
||||
</select>
|
||||
<br>
|
||||
|
||||
<select class="width">
|
||||
<option>CSS Test: A size-contained select with specified width should size itself as if it had no contents.</option>
|
||||
<option>a</option>
|
||||
<option>b</option>
|
||||
<option>c</option>
|
||||
</select>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<style>
|
||||
select {
|
||||
color: transparent;
|
||||
}
|
||||
.floatLBasic {
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<select>
|
||||
</select>
|
||||
<br>
|
||||
|
||||
<select class="floatLBasic">
|
||||
</select>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: size' on select objects should cause them to be sized as if they have no contents.</title>
|
||||
<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-select-elem-002-ref.html">
|
||||
<style>
|
||||
select {
|
||||
contain: size;
|
||||
color: transparent;
|
||||
}
|
||||
.floatLBasic {
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<select>
|
||||
<option>CSS Test: A size-contained select with no specified size should size itself as if it had no contents.</option>
|
||||
<option>aaaaaa</option>
|
||||
<option>b</option>
|
||||
<option>c</option>
|
||||
</select>
|
||||
<br>
|
||||
|
||||
<select class="floatLBasic">
|
||||
<option>CSS Test: A size-contained floated select with no specified size should size itself as if it had no contents.</option>
|
||||
<option>a</option>
|
||||
<option>b</option>
|
||||
<option>c</option>
|
||||
</select>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<style>
|
||||
select {
|
||||
color: transparent;
|
||||
}
|
||||
.minWidth {
|
||||
min-width: 100px;
|
||||
}
|
||||
.width {
|
||||
width: 100px;
|
||||
}
|
||||
.floatLWidth {
|
||||
float: left;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<select multiple class="floatLWidth">
|
||||
</select>
|
||||
<br style="clear:both;">
|
||||
|
||||
<select multiple class="minWidth">
|
||||
</select>
|
||||
<br>
|
||||
|
||||
<select multiple class="width">
|
||||
</select>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: size' on select objects should cause them to be sized as if they have no contents.</title>
|
||||
<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-select-elem-003-ref.html">
|
||||
<style>
|
||||
select {
|
||||
contain: size;
|
||||
color: transparent;
|
||||
}
|
||||
.minWidth {
|
||||
min-width: 100px;
|
||||
}
|
||||
.width {
|
||||
width: 100px;
|
||||
}
|
||||
.floatLWidth {
|
||||
float: left;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<select multiple class="floatLWidth">
|
||||
<option>CSS Test: A size-contained floated select with specified width and no specified height should size itself as if it had no contents.</option>
|
||||
<option>a</option>
|
||||
</select>
|
||||
<br style="clear:both;">
|
||||
|
||||
<select multiple class="minWidth">
|
||||
<option>CSS Test: A size-contained select with specified min-width should size itself as if it had no contents.</option>
|
||||
<option>a</option>
|
||||
</select>
|
||||
<br>
|
||||
|
||||
<select multiple class="width">
|
||||
<option>CSS Test: A size-contained select with specified width should size itself as if it had no contents.</option>
|
||||
<option>a</option>
|
||||
</select>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<style>
|
||||
select {
|
||||
color: transparent;
|
||||
}
|
||||
.floatLBasic {
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<select multiple>
|
||||
</select>
|
||||
<br>
|
||||
|
||||
<select multiple class="floatLBasic">
|
||||
</select>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: size' on select objects should cause them to be sized as if they have no contents.</title>
|
||||
<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-select-elem-004-ref.html">
|
||||
<style>
|
||||
select {
|
||||
contain: size;
|
||||
color: transparent;
|
||||
}
|
||||
.floatLBasic {
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<select multiple>
|
||||
<option>CSS Test: A size-contained select with no specified size should size itself as if it had no contents.</option>
|
||||
<option>aaaaaa</option>
|
||||
</select>
|
||||
<br>
|
||||
|
||||
<select multiple class="floatLBasic">
|
||||
<option>CSS Test: A size-contained floated select with no specified size should size itself as if it had no contents.</option>
|
||||
<option>a</option>
|
||||
</select>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
select {
|
||||
color: transparent;
|
||||
/* We make scrollbars transparent because some <option> elements can cause
|
||||
overflow, which can cause scrollbars to be active in the test and
|
||||
inactive in the reference. But the test only cares about the sizing. */
|
||||
scrollbar-color: transparent transparent;
|
||||
}
|
||||
.fsMedium {
|
||||
/* custom styling for some select elements, which is allowed to influence
|
||||
their size (in the same way that it influences the size of an empty
|
||||
select element): */
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<select multiple ></select>
|
||||
<select multiple size="1" ></select>
|
||||
<select multiple class="fsMedium"></select>
|
||||
|
||||
<select multiple ></select>
|
||||
<select multiple size="1" ></select>
|
||||
<select multiple class="fsMedium"></select>
|
||||
|
||||
<br><br>
|
||||
|
||||
<select multiple ></select>
|
||||
<select multiple size="1" ></select>
|
||||
<select multiple class="fsMedium"></select>
|
||||
|
||||
<select multiple ></select>
|
||||
<select multiple size="1" ></select>
|
||||
<select multiple class="fsMedium"></select>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: size' on select objects should cause them to be sized as if they have no contents.</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
|
||||
<link rel="match" href="contain-size-select-elem-005-ref.html">
|
||||
<style>
|
||||
select {
|
||||
contain: size;
|
||||
color: transparent;
|
||||
/* We make scrollbars transparent because some <option> elements can cause
|
||||
overflow, which can cause scrollbars to be active in the test and
|
||||
inactive in the reference. But the test only cares about the sizing. */
|
||||
scrollbar-color: transparent transparent;
|
||||
}
|
||||
.fsMedium {
|
||||
/* custom styling for some select elements, which is allowed to influence
|
||||
their size (in the same way that it influences the size of an empty
|
||||
select element): */
|
||||
font-size: 10px;
|
||||
}
|
||||
.fsSmall {
|
||||
/* custom styling for some option elements (which would make their parent
|
||||
select elem shorter, except for the fact that it's size-contained): */
|
||||
font-size: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- No contents: -->
|
||||
<select multiple ></select>
|
||||
<select multiple size="1" ></select>
|
||||
<select multiple class="fsMedium"></select>
|
||||
|
||||
<!-- Empty option: -->
|
||||
<select multiple ><option></option></select>
|
||||
<select multiple size="1" ><option></option></select>
|
||||
<select multiple class="fsMedium"><option></option></select>
|
||||
|
||||
<br><br>
|
||||
|
||||
<!-- Nonempty option: -->
|
||||
<select multiple ><option>X</option></select>
|
||||
<select multiple size="1" ><option>X</option></select>
|
||||
<select multiple class="fsMedium"><option>X</option></select>
|
||||
|
||||
<!-- Nonempty option with custom font-size: -->
|
||||
<select multiple ><option class="fsSmall">X</option></select>
|
||||
<select multiple size="1" ><option class="fsSmall">X</option></select>
|
||||
<select multiple class="fsMedium"><option class="fsSmall">X</option></select>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<style>
|
||||
caption {
|
||||
border: 1em solid green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<caption></caption>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: size' on table captions should cause them to be sized as if they had no contents.</title>
|
||||
<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-table-caption-001-ref.html">
|
||||
<style>
|
||||
.contain {
|
||||
contain:size;
|
||||
}
|
||||
.innerContents {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
color: transparent;
|
||||
}
|
||||
caption {
|
||||
border: 1em solid green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<caption class="contain">
|
||||
<div class="innerContents">
|
||||
inner
|
||||
</div>
|
||||
</caption>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue