mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-09-21 00:38:56 +00:00
LibWeb: Implement CSS 'contain' property
This commit is contained in:
Psychpsyo
Sam Atkins
parent
c53c781745
commit
67ed676831
Notes:
github-actions[bot]
2025-01-28 11:25:39 +00:00
Author: https://github.com/Psychpsyo
Commit: 67ed676831
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3296
Reviewed-by: https://github.com/AtkinsSJ ✅
154 changed files with 4200 additions and 117 deletions
|
|
@ -0,0 +1,9 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test Reference</title>
|
||||
<p>You should see a wide orange rectangle to the left of the third float, overlapping the float.</p>
|
||||
<div style="width:400px;position:relative">
|
||||
<div style="float:right;width:200px;height:100px;background:blue"></div>
|
||||
<div style="float:left;width:250px;height:100px;background:blue"></div>
|
||||
<div style="float:right;width:300px;height:100px;background:blue"></div>
|
||||
<div style="position:absolute;left:0;top:200px;width:200px;height:20px;background-color:orange"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test Reference</title>
|
||||
<p>You should see a wide orange rectangle to the left of the first float, overlapping the float.</p>
|
||||
<div style="width:400px;position:relative">
|
||||
<div style="float:right;width:200px;height:100px;background:blue"></div>
|
||||
<div style="float:left;width:250px;height:100px;background:blue"></div>
|
||||
<div style="float:right;width:300px;height:100px;background:blue"></div>
|
||||
<div style="position:absolute;left:0;top:0;width:300px;height:20px;background-color:orange"></div>
|
||||
</div>
|
||||
|
|
@ -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,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,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,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,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<title>CSS Containment Test: Scrolling overflow works when paint is contained"</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
|
||||
<meta name="assert" content="Scrolling overflow works when paint is contained.">
|
||||
|
||||
<script src="../../common/reftest-wait.js"></script>
|
||||
<script src="../../common/rendering-utils.js"></script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div class="content"></div>
|
||||
|
||||
<script>
|
||||
waitForAtLeastOneFrame().then(() => {
|
||||
document.body.scrollTop = 100;
|
||||
takeScreenshot();
|
||||
});
|
||||
</script>
|
||||
|
||||
</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,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,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,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,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Reference: Size containment replaced elements intrinsic size</title>
|
||||
<style>
|
||||
body > div, video, audio, img, canvas, svg, iframe {
|
||||
border: 3px solid orange;
|
||||
contain: size;
|
||||
margin-bottom: 15px;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
</style>
|
||||
<div>abc</div>
|
||||
<video></video><br>
|
||||
<video controls></video><br>
|
||||
<img src="support/60x60-green.png"><br>
|
||||
<picture>
|
||||
<source srcset="support/60x60-green.png">
|
||||
<img>
|
||||
</picture><br>
|
||||
<canvas></canvas><br>
|
||||
<svg></svg><br>
|
||||
<iframe></iframe>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Reference: Size containment replaced elements intrinsic size</title>
|
||||
<style>
|
||||
body > div, video, audio, img, canvas, svg, iframe {
|
||||
position: absolute;
|
||||
border: 3px solid orange;
|
||||
contain: size;
|
||||
margin-bottom: 15px;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
</style>
|
||||
<div>abc</div>
|
||||
<video></video><br>
|
||||
<video controls></video><br>
|
||||
<img src="support/60x60-green.png"><br>
|
||||
<picture>
|
||||
<source srcset="support/60x60-green.png">
|
||||
<img>
|
||||
</picture><br>
|
||||
<canvas></canvas><br>
|
||||
<svg></svg><br>
|
||||
<iframe></iframe>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Reference: Size containment replaced elements intrinsic size</title>
|
||||
<style>
|
||||
div, video, audio, img, canvas, svg, iframe {
|
||||
border: 3px solid orange;
|
||||
margin-bottom: 15px;
|
||||
width: 25px;
|
||||
height: 35px;
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
</style>
|
||||
<div>abc</div>
|
||||
<video></video><br>
|
||||
<video controls></video><br>
|
||||
<img src="support/60x60-green.png"><br>
|
||||
<picture>
|
||||
<source srcset="support/60x60-green.png">
|
||||
<img>
|
||||
</picture><br>
|
||||
<canvas></canvas><br>
|
||||
<svg></svg><br>
|
||||
<iframe></iframe>
|
||||
|
|
@ -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,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,15 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test referemce</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
|
||||
<style>
|
||||
html, body, p, div {
|
||||
margin: 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reference Test</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<style>
|
||||
div#green-square
|
||||
{
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
div#result
|
||||
{
|
||||
font-size: 3em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square, no red and the number 17.
|
||||
|
||||
<div id="green-square"></div>
|
||||
|
||||
<div id="result">17</div>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS Containment Test: Removing layout containment and contained positioned elements</title>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
.fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.abspos {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="fixed box"></div>
|
||||
<div class="abspos box"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Layout containment fixed positioned descendants</title>
|
||||
<style>
|
||||
#green {
|
||||
background: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
body {
|
||||
height: 3000px;
|
||||
margin: 0px;
|
||||
}
|
||||
#spacer {
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function runTest() {
|
||||
document.documentElement.scrollTop += 200;
|
||||
}
|
||||
</script>
|
||||
<body onload="runTest()">
|
||||
<div id="spacer"></div>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="green"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reference Test</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<style>
|
||||
table
|
||||
{
|
||||
background-color: blue;
|
||||
border-spacing: 2px;
|
||||
height: 206px;
|
||||
table-layout: fixed;
|
||||
width: 206px;
|
||||
}
|
||||
|
||||
td
|
||||
{
|
||||
background-color: white;
|
||||
padding: 0px;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
span
|
||||
{
|
||||
background-color: green;
|
||||
color: white;
|
||||
font-family: monospace;
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is the word PASS and if there is <strong>no red</strong>.
|
||||
|
||||
<table>
|
||||
|
||||
<tr><td> <td>
|
||||
|
||||
<tr><td> <td><span>PASS</span>
|
||||
|
||||
</table>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reference Test</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
color: transparent;
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
div#blue-rectangle
|
||||
{
|
||||
background-color: blue;
|
||||
margin: 8px;
|
||||
width: 6em;
|
||||
}
|
||||
|
||||
div#orange-rectangle
|
||||
{
|
||||
background-color: orange;
|
||||
width: 12em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the orange rectangle and blue rectangle do not overlap.
|
||||
|
||||
<div id="blue-rectangle">Some text in a blue rectangle.</div>
|
||||
|
||||
<div id="orange-rectangle">Some text in an orange rectangle. Some text in an orange rectangle. Some text in an orange rectangle.</div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reference Test</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
font-family: monospace;
|
||||
font-size: 100px;
|
||||
height: 3em;
|
||||
overflow: scroll;
|
||||
width: 4ch;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
||||
<div></div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reference Test</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
font-family: monospace;
|
||||
font-size: 100px;
|
||||
height: 2.8ch;
|
||||
overflow: scroll;
|
||||
width: 4ch;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
||||
<div></div>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reference Test</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reference Test</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
color: transparent;
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
div#blue-rectangle
|
||||
{
|
||||
background-color: blue;
|
||||
margin: 8px;
|
||||
width: 6em;
|
||||
}
|
||||
|
||||
div#orange-rectangle
|
||||
{
|
||||
background-color: orange;
|
||||
height: 0px;
|
||||
width: 12em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the orange rectangle and blue rectangle do not overlap.
|
||||
|
||||
<div id="blue-rectangle">Some text in a blue rectangle.</div>
|
||||
|
||||
<div id="orange-rectangle">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reference Test</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
left: 100px;
|
||||
position: relative;
|
||||
top: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.
|
||||
|
||||
<div></div>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reference Test</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<style>
|
||||
p
|
||||
{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
div.orange
|
||||
{
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
div.blue
|
||||
{
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
div#lime
|
||||
{
|
||||
background-color: lime;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are 5 horizontal stripes across the page in this order (from top to bottom): an orange stripe, a blue stripe, a bright green stripe, a blue stripe and then an orange stripe.
|
||||
|
||||
<div class="orange"></div>
|
||||
|
||||
<div class="blue"></div>
|
||||
|
||||
<div id="lime"></div>
|
||||
|
||||
<div class="blue"></div>
|
||||
|
||||
<div class="orange"></div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Reference file</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<style>
|
||||
.wrapper {
|
||||
border: solid thick;
|
||||
margin: 1em;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if it has the same output than the reference.</p>
|
||||
<div class="wrapper">
|
||||
<div style="margin: 2em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Reference file</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<style>
|
||||
.wrapper {
|
||||
border: solid thick;
|
||||
margin: 1em;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if it has the same output than the reference.</p>
|
||||
<div class="wrapper">
|
||||
<div style="margin: 1em 0;">This text should have 1em top and bottom margins.</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reference Test</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<p>This test passes if the painted blue area is <strong>exactly as tall as</strong> the orange square.
|
||||
|
||||
<div><img src="../support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled"> <img src="../support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled"></div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<style>
|
||||
div { font-size: 50px; }
|
||||
.green { background: green; }
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: min-content max-content;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if there are two green rectangles and no red.
|
||||
|
||||
<div class=grid>
|
||||
<div style="grid-area: 1/1"> </div>
|
||||
<div style="grid-area: 2/2"id=test class="grid">
|
||||
<div> </div>
|
||||
<div class=green></div>
|
||||
<div class=green></div>
|
||||
<div> </div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reference Test</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
font-size: 3em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is the number 14.
|
||||
|
||||
<div>14</div>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reference Test</title>
|
||||
|
||||
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
font-size: 3em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is the number 13.
|
||||
|
||||
<div>13</div>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
|
||||
<p>Test passes if the text below is "1 1.2" (not including the quotation marks).<p>
|
||||
<div>1 1.2</div>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
|
||||
<p>Test passes if the text below is "1 2" (not including the quotation marks).<p>
|
||||
<div>1 2</div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!doctype html>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS Test Reference</title>
|
||||
<style>
|
||||
.list-item {
|
||||
margin-left: 40px;
|
||||
}
|
||||
</style>
|
||||
<div class="list-item">
|
||||
[1] A1
|
||||
<div class="list-item">[1] B1</div>
|
||||
<div class="list-item">[2] B2</div>
|
||||
</div>
|
||||
<div class="list-item">[2] A2</div>
|
||||
<div class="list-item">[3] A3</div>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Reference rendering - passes if there is the word "PASS" below</title>
|
||||
<style>
|
||||
div { overflow: hidden; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is the word "PASS" below.</p>
|
||||
<div>PASS</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 86 B |
Loading…
Add table
Add a link
Reference in a new issue