mirror of
https://github.com/servo/servo.git
synced 2025-08-03 20:50:07 +01:00
Update web-platform-tests to revision b'468d01bbd84da2babf265c6af46947be68713440'
This commit is contained in:
WPT Sync Bot
cybai
parent
35e95f55a1
commit
58e8ee674b
9438 changed files with 266112 additions and 106976 deletions
|
|
@ -0,0 +1,26 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: layout containment on body prevents background propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="layout containment on body prevents background propagation">
|
||||
<link rel="match" href="reference/contain-body-bg-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html, body, p {
|
||||
margin: 0;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
}
|
||||
p {
|
||||
background: white;
|
||||
}
|
||||
body {
|
||||
background: red;
|
||||
contain: layout;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: paint containment on body prevents background propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="paint containment on body prevents background propagation">
|
||||
<link rel="match" href="reference/contain-body-bg-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html, body, p {
|
||||
margin: 0;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
}
|
||||
p {
|
||||
background: white;
|
||||
}
|
||||
body {
|
||||
background: red;
|
||||
contain: paint;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: size containment on body prevents background propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="size containment on body prevents background propagation">
|
||||
<link rel="match" href="reference/contain-body-bg-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html, body, p {
|
||||
margin: 0;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
}
|
||||
p {
|
||||
background: white;
|
||||
}
|
||||
body {
|
||||
background: red;
|
||||
contain: size;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment on body prevents background propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="style containment on body prevents background propagation">
|
||||
<link rel="match" href="reference/contain-body-bg-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-2/#contain-property">
|
||||
|
||||
<style>
|
||||
html, body, p {
|
||||
margin: 0;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
}
|
||||
p {
|
||||
background: white;
|
||||
}
|
||||
body {
|
||||
background: red;
|
||||
contain: style;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: layout containment on body prevents direction propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="layout containment on body prevents direction propagation">
|
||||
<link rel="match" href="reference/contain-body-w-m-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html::before {
|
||||
content: "";
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: orange;
|
||||
display: block;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
direction: ltr;
|
||||
}
|
||||
body {
|
||||
margin: 0 auto 0 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
direction: rtl;
|
||||
contain: layout;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the orange square is in the upper-left corner.
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: paint containment on body prevents direction propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="paint containment on body prevents direction propagation">
|
||||
<link rel="match" href="reference/contain-body-w-m-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html::before {
|
||||
content: "";
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: orange;
|
||||
display: block;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
direction: ltr;
|
||||
}
|
||||
body {
|
||||
margin: 0 auto 0 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
direction: rtl;
|
||||
contain: paint;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the orange square is in the upper-left corner.
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: size containment on body prevents direction propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="size containment on body prevents direction propagation">
|
||||
<link rel="match" href="reference/contain-body-w-m-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html::before {
|
||||
content: "";
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: orange;
|
||||
display: block;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
direction: ltr;
|
||||
}
|
||||
body {
|
||||
margin: 0 auto 0 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
direction: rtl;
|
||||
contain: size;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the orange square is in the upper-left corner.
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment on body prevents direction propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="style containment on body prevents direction propagation">
|
||||
<link rel="match" href="reference/contain-body-w-m-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html::before {
|
||||
content: "";
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: orange;
|
||||
display: block;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
direction: ltr;
|
||||
}
|
||||
body {
|
||||
margin: 0 auto 0 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
direction: rtl;
|
||||
contain: style;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the orange square is in the upper-left corner.
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: layout containment on body prevents overflow propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="layout containment on body prevents overflow propagation">
|
||||
<link rel="match" href="reference/contain-body-overflow-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html, body, p, div {
|
||||
margin: 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
div { background: red; }
|
||||
body {
|
||||
overflow: hidden;
|
||||
contain: layout;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
||||
<div></div>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: paint containment on body prevents overflow propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="paint containment on body prevents overflow propagation">
|
||||
<link rel="match" href="reference/contain-body-overflow-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html, body, p, div {
|
||||
margin: 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
div { background: red; }
|
||||
body {
|
||||
overflow: hidden;
|
||||
contain: paint;
|
||||
}
|
||||
:focus {
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div></div>
|
||||
<p tabindex=1 id=target>Test passes if there is no red.
|
||||
<script>
|
||||
window.onload = function() {
|
||||
document.getElementById("target").focus()
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: size containment on body prevents overflow propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="size containment on body prevents overflow propagation">
|
||||
<link rel="match" href="reference/contain-body-overflow-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html, body, p, div {
|
||||
margin: 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
div { background: red; }
|
||||
body {
|
||||
overflow: hidden;
|
||||
contain: size;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
||||
<div></div>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment on body prevents overflow propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="style containment on body prevents overflow propagation">
|
||||
<link rel="match" href="reference/contain-body-overflow-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-2/#contain-property">
|
||||
|
||||
<style>
|
||||
html, body, p, div {
|
||||
margin: 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
div { background: red; }
|
||||
body {
|
||||
overflow: hidden;
|
||||
contain: style;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
||||
<div></div>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: layout containment on body prevents text-orientation propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="layout containment on body prevents text-orientation propagation">
|
||||
<link rel="match" href="reference/contain-body-t-o-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html {
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
border-top: 100px solid red;
|
||||
border-bottom: 100px solid green;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
text-orientation: upright;
|
||||
contain: layout;
|
||||
}
|
||||
p {
|
||||
margin: auto;
|
||||
padding: 150px 0;
|
||||
writing-mode: horizontal-tb;
|
||||
direction: ltr;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: paint containment on body prevents text-orientation propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="paint containment on body prevents text-orientation propagation">
|
||||
<link rel="match" href="reference/contain-body-t-o-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html {
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
border-top: 100px solid red;
|
||||
border-bottom: 100px solid green;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
text-orientation: upright;
|
||||
contain: paint;
|
||||
}
|
||||
p {
|
||||
margin: auto;
|
||||
padding: 150px 0;
|
||||
writing-mode: horizontal-tb;
|
||||
direction: ltr;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: size containment on body prevents text-orientation propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="size containment on body prevents text-orientation propagation">
|
||||
<link rel="match" href="reference/contain-body-t-o-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html {
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
border-top: 100px solid red;
|
||||
border-bottom: 100px solid green;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
text-orientation: upright;
|
||||
contain: size;
|
||||
}
|
||||
p {
|
||||
margin: auto;
|
||||
padding: 150px 0;
|
||||
writing-mode: horizontal-tb;
|
||||
direction: ltr;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment on body prevents text-orientation propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="style containment on body prevents text-orientation propagation">
|
||||
<link rel="match" href="reference/contain-body-t-o-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-2/#contain-property">
|
||||
|
||||
<style>
|
||||
html {
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
border-top: 100px solid red;
|
||||
border-bottom: 100px solid green;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
text-orientation: upright;
|
||||
contain: style;
|
||||
}
|
||||
p {
|
||||
margin: auto;
|
||||
padding: 150px 0;
|
||||
writing-mode: horizontal-tb;
|
||||
direction: ltr;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: layout containment on body prevents writing-mode propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="layout containment on body prevents writing-mode propagation">
|
||||
<link rel="match" href="reference/contain-body-w-m-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html::before {
|
||||
content: "";
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: orange;
|
||||
display: block;
|
||||
}
|
||||
p { writing-mode: horizontal-tb; margin: 0;}
|
||||
body {
|
||||
margin: 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
writing-mode: vertical-rl;
|
||||
contain: layout;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the orange square is in the upper-left corner.
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: paint containment on body prevents writing-mode propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="paint containment on body prevents writing-mode propagation">
|
||||
<link rel="match" href="reference/contain-body-w-m-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html::before {
|
||||
content: "";
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: orange;
|
||||
display: block;
|
||||
}
|
||||
p { writing-mode: horizontal-tb; margin: 0;}
|
||||
body {
|
||||
margin: 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
writing-mode: vertical-rl;
|
||||
contain: paint;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the orange square is in the upper-left corner.
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: size containment on body prevents writing-mode propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="size containment on body prevents writing-mode propagation">
|
||||
<link rel="match" href="reference/contain-body-w-m-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html::before {
|
||||
content: "";
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: orange;
|
||||
display: block;
|
||||
}
|
||||
p { writing-mode: horizontal-tb; margin: 0;}
|
||||
body {
|
||||
margin: 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
writing-mode: vertical-rl;
|
||||
contain: size;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the orange square is in the upper-left corner.
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment on body prevents writing-mode propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="style containment on body prevents writing-mode propagation">
|
||||
<link rel="match" href="reference/contain-body-w-m-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-2/#contain-property">
|
||||
|
||||
<style>
|
||||
html::before {
|
||||
content: "";
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: orange;
|
||||
display: block;
|
||||
}
|
||||
p { writing-mode: horizontal-tb; margin: 0;}
|
||||
body {
|
||||
margin: 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
writing-mode: vertical-rl;
|
||||
contain: style;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the orange square is in the upper-left corner.
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<link rel="match" href="reference/contain-content-011-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="'contain: content' does not turn on style containment. So, in this test, the counter of div.abspos child should not be reset and must not be reset.">
|
||||
<meta name="assert" content="'contain: content' turns on style containment. So, in this test, the counter of div.abspos child should not be reset and must not be reset.">
|
||||
|
||||
<style>
|
||||
body
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is a filled green square, no red and the number 25.
|
||||
<p>Test passes if there is a filled green square, no red and the number 17.
|
||||
|
||||
<div id="contain-content">
|
||||
<div id="first-abspos" class="abspos"></div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: layout containment on html prevents background propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="layout containment on html prevents background propagation">
|
||||
<link rel="match" href="reference/contain-body-bg-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html, body, p {
|
||||
margin: 0;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
}
|
||||
p {
|
||||
background: white;
|
||||
}
|
||||
body {
|
||||
background: red;
|
||||
}
|
||||
html {
|
||||
contain: layout;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: paint containment on html prevents background propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="paint containment on html prevents background propagation">
|
||||
<link rel="match" href="reference/contain-body-bg-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html, body, p {
|
||||
margin: 0;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
}
|
||||
p {
|
||||
background: white;
|
||||
}
|
||||
body {
|
||||
background: red;
|
||||
}
|
||||
html {
|
||||
contain: paint;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: size containment on html prevents background propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="size containment on html prevents background propagation">
|
||||
<link rel="match" href="reference/contain-body-bg-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html, body, p {
|
||||
margin: 0;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
}
|
||||
p {
|
||||
background: white;
|
||||
}
|
||||
body {
|
||||
background: red;
|
||||
}
|
||||
html {
|
||||
contain: size;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment on html prevents background propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="style containment on html prevents background propagation">
|
||||
<link rel="match" href="reference/contain-body-bg-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-2/#contain-property">
|
||||
|
||||
<style>
|
||||
html, body, p {
|
||||
margin: 0;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
}
|
||||
p {
|
||||
background: white;
|
||||
}
|
||||
body {
|
||||
background: red;
|
||||
}
|
||||
html {
|
||||
contain: style;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: layout containment on html prevents direction propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="layout containment on html prevents direction propagation">
|
||||
<link rel="match" href="reference/contain-body-w-m-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html::before {
|
||||
content: "";
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: orange;
|
||||
display: block;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
direction: ltr;
|
||||
}
|
||||
body {
|
||||
margin: 0 auto 0 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
direction: rtl;
|
||||
}
|
||||
html {
|
||||
contain: layout;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the orange square is in the upper-left corner.
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: paint containment on html prevents direction propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="paint containment on html prevents direction propagation">
|
||||
<link rel="match" href="reference/contain-body-w-m-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html::before {
|
||||
content: "";
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: orange;
|
||||
display: block;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
direction: ltr;
|
||||
}
|
||||
body {
|
||||
margin: 0 auto 0 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
direction: rtl;
|
||||
}
|
||||
html {
|
||||
contain: paint;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the orange square is in the upper-left corner.
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: size containment on html prevents direction propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="size containment on html prevents direction propagation">
|
||||
<link rel="match" href="reference/contain-body-w-m-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html::before {
|
||||
content: "";
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: orange;
|
||||
display: block;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
direction: ltr;
|
||||
}
|
||||
body {
|
||||
margin: 0 auto 0 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
direction: rtl;
|
||||
}
|
||||
html {
|
||||
contain: size;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the orange square is in the upper-left corner.
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment on html prevents direction propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="style containment on html prevents direction propagation">
|
||||
<link rel="match" href="reference/contain-body-w-m-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html::before {
|
||||
content: "";
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: orange;
|
||||
display: block;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
direction: ltr;
|
||||
}
|
||||
body {
|
||||
margin: 0 auto 0 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
direction: rtl;
|
||||
}
|
||||
html {
|
||||
contain: style;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the orange square is in the upper-left corner.
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: layout containment on html prevents overflow propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="layout containment on html prevents overflow propagation">
|
||||
<link rel="match" href="reference/contain-body-overflow-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html, body, p, div {
|
||||
margin: 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
div { background: red; }
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
html {
|
||||
contain: layout;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
||||
<div></div>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: paint containment on html prevents overflow propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="paint containment on html prevents overflow propagation">
|
||||
<link rel="match" href="reference/contain-body-overflow-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html, body, p, div {
|
||||
margin: 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
div { background: red; }
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
html {
|
||||
height: 400px;
|
||||
contain: paint;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
||||
<div></div>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: size containment on html prevents overflow propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="size containment on html prevents overflow propagation">
|
||||
<link rel="match" href="reference/contain-body-overflow-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html, body, p, div {
|
||||
margin: 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
div { background: red; }
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
html {
|
||||
contain: size;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
||||
<div></div>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment on html prevents overflow propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="style containment on html prevents overflow propagation">
|
||||
<link rel="match" href="reference/contain-body-overflow-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-2/#contain-property">
|
||||
|
||||
<style>
|
||||
html, body, p, div {
|
||||
margin: 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
div { background: red; }
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
html {
|
||||
contain: style;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
||||
<div></div>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: layout containment on html prevents text-orientation propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="layout containment on html prevents text-orientation propagation">
|
||||
<link rel="match" href="reference/contain-body-t-o-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html {
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
border-top: 100px solid red;
|
||||
border-bottom: 100px solid green;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
text-orientation: upright;
|
||||
}
|
||||
html {
|
||||
contain: layout;
|
||||
}
|
||||
p {
|
||||
margin: auto;
|
||||
padding: 150px 0;
|
||||
writing-mode: horizontal-tb;
|
||||
direction: ltr;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: paint containment on html prevents text-orientation propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="paint containment on html prevents text-orientation propagation">
|
||||
<link rel="match" href="reference/contain-body-t-o-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html {
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
border-top: 100px solid red;
|
||||
border-bottom: 100px solid green;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
text-orientation: upright;
|
||||
}
|
||||
html {
|
||||
contain: paint;
|
||||
}
|
||||
p {
|
||||
margin: auto;
|
||||
padding: 150px 0;
|
||||
writing-mode: horizontal-tb;
|
||||
direction: ltr;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: size containment on html prevents text-orientation propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="size containment on html prevents text-orientation propagation">
|
||||
<link rel="match" href="reference/contain-body-t-o-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html {
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
border-top: 100px solid red;
|
||||
border-bottom: 100px solid green;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
text-orientation: upright;
|
||||
}
|
||||
html {
|
||||
contain: size;
|
||||
}
|
||||
p {
|
||||
margin: auto;
|
||||
padding: 150px 0;
|
||||
writing-mode: horizontal-tb;
|
||||
direction: ltr;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment on html prevents text-orientation propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="style containment on html prevents text-orientation propagation">
|
||||
<link rel="match" href="reference/contain-body-t-o-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-2/#contain-property">
|
||||
|
||||
<style>
|
||||
html {
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
border-top: 100px solid red;
|
||||
border-bottom: 100px solid green;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
text-orientation: upright;
|
||||
}
|
||||
html {
|
||||
contain: style;
|
||||
}
|
||||
p {
|
||||
margin: auto;
|
||||
padding: 150px 0;
|
||||
writing-mode: horizontal-tb;
|
||||
direction: ltr;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: layout containment on html prevents writing-mode propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="layout containment on html prevents writing-mode propagation">
|
||||
<link rel="match" href="reference/contain-body-w-m-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html::before {
|
||||
content: "";
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: orange;
|
||||
display: block;
|
||||
}
|
||||
p { writing-mode: horizontal-tb; margin: 0;}
|
||||
body {
|
||||
margin: 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
html {
|
||||
contain: layout;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the orange square is in the upper-left corner.
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: paint containment on html prevents writing-mode propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="paint containment on html prevents writing-mode propagation">
|
||||
<link rel="match" href="reference/contain-body-w-m-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html::before {
|
||||
content: "";
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: orange;
|
||||
display: block;
|
||||
}
|
||||
p { writing-mode: horizontal-tb; margin: 0;}
|
||||
body {
|
||||
margin: 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
html {
|
||||
contain: paint;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the orange square is in the upper-left corner.
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: size containment on html prevents writing-mode propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="size containment on html prevents writing-mode propagation">
|
||||
<link rel="match" href="reference/contain-body-w-m-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
|
||||
|
||||
<style>
|
||||
html::before {
|
||||
content: "";
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: orange;
|
||||
display: block;
|
||||
}
|
||||
p { writing-mode: horizontal-tb; margin: 0;}
|
||||
body {
|
||||
margin: 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
html {
|
||||
contain: size;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the orange square is in the upper-left corner.
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment on html prevents writing-mode propagation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="style containment on html prevents writing-mode propagation">
|
||||
<link rel="match" href="reference/contain-body-w-m-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-2/#contain-property">
|
||||
|
||||
<style>
|
||||
html::before {
|
||||
content: "";
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: orange;
|
||||
display: block;
|
||||
}
|
||||
p { writing-mode: horizontal-tb; margin: 0;}
|
||||
body {
|
||||
margin: 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
html {
|
||||
contain: style;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the orange square is in the upper-left corner.
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
#contain-paint {
|
||||
contain: paint;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
height: 50px;
|
||||
background: red;
|
||||
}
|
||||
|
||||
|
|
@ -19,10 +19,14 @@
|
|||
right: 0;
|
||||
background: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="contain-paint">
|
||||
<div id="fixed"></div>
|
||||
</div>
|
||||
<div id="contain-paint" style="display: inline-block">
|
||||
<div id="fixed"></div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Paint containment and box-shadow</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name=assert content="Paint containment should clip box-shadow effect on child.">
|
||||
<style>
|
||||
#contain-paint {
|
||||
contain: paint;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
}
|
||||
|
||||
#child {
|
||||
background: green;
|
||||
box-shadow: 0 0 100px 100px red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="contain-paint">
|
||||
<div id="child"></div>
|
||||
</div>
|
||||
|
|
@ -21,6 +21,7 @@
|
|||
margin: 25px;
|
||||
padding: 25px;
|
||||
}
|
||||
::marker { font-family: inherit; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<link rel="match" href="reference/contain-strict-011-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="'contain: strict' does not turn on style containment. So, in this test, the counter of spans should not be reset and must not be reset.">
|
||||
<meta name="assert" content="'contain: strict' turns on style containment. So, in this test, the counter of spans should not be reset and must not be reset.">
|
||||
|
||||
<style>
|
||||
body
|
||||
|
|
@ -59,6 +59,6 @@
|
|||
|
||||
<div><span>FAIL1</span> <span>FAIL2</span> <span>FAIL3</span></div>
|
||||
|
||||
<p id="pass-fail-conditions-sentence">Test passes if there is the number 26.
|
||||
<p id="pass-fail-conditions-sentence">Test passes if there is the number 17.
|
||||
|
||||
<p id="test">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,174 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf8>
|
||||
<title>Test getComputedStyle on a CSS animation in a display locked subtree</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-2/">
|
||||
<script src="/web-animations/testcommon.js"></script>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
#container {
|
||||
content-visibility: visible;
|
||||
contain: style layout paint;
|
||||
contain-intrinsic-size: 0 100px;
|
||||
}
|
||||
@keyframes fade {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
#target {
|
||||
background: 'green';
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.animate {
|
||||
animation: fade 1s linear 2 alternate;
|
||||
}
|
||||
.transition {
|
||||
transition: opacity 1s linear;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
</body>
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
function reset() {
|
||||
const container = document.getElementById('container');
|
||||
const target = document.getElementById('target');
|
||||
container.style = '';
|
||||
container.removeChild(target);
|
||||
}
|
||||
|
||||
function createAnimatingElement(test, name) {
|
||||
const container = document.getElementById('container');
|
||||
const target = document.createElement('div');
|
||||
container.appendChild(target);
|
||||
target.id = 'target';
|
||||
target.className = name;
|
||||
test.add_cleanup(() => {
|
||||
reset();
|
||||
});
|
||||
return target;
|
||||
}
|
||||
|
||||
promise_test(async t => {
|
||||
const container = document.getElementById('container');
|
||||
const target = createAnimatingElement(t, 'animate');
|
||||
let animationIterationEvent = false;
|
||||
target.addEventListener('animationiteration', () => {
|
||||
animationIterationEvent = true;
|
||||
});
|
||||
const animation = target.getAnimations()[0];
|
||||
await animation.ready;
|
||||
await waitForAnimationFrames(1);
|
||||
container.style.contentVisibility = 'hidden';
|
||||
animation.currentTime = 1500;
|
||||
assert_approx_equals(
|
||||
parseFloat(getComputedStyle(target).opacity), 0.5, 1e-6,
|
||||
'Computed style is updated even when the animation is running in a ' +
|
||||
'display locked subtree');
|
||||
await waitForAnimationFrames(2);
|
||||
assert_false(animationIterationEvent,
|
||||
'Animation events do no fire while the animation is ' +
|
||||
'running in a display locked subtree');
|
||||
container.style.contentVisibility = 'visible';
|
||||
await waitForAnimationFrames(2);
|
||||
assert_true(animationIterationEvent,
|
||||
'The animationiteration event fires once the animation is ' +
|
||||
'no longer display locked');
|
||||
}, 'Animation events do not fire for a CSS animation running in a display ' +
|
||||
'locked subtree');
|
||||
|
||||
promise_test(async t => {
|
||||
const container = document.getElementById('container');
|
||||
const target = createAnimatingElement(t, 'animate');
|
||||
const animation = target.getAnimations()[0];
|
||||
await animation.ready;
|
||||
let finishedWhileDisplayLocked = false;
|
||||
animation.finished.then(() => {
|
||||
finishedWhileDisplayLocked =
|
||||
getComputedStyle(container).contentVisibility == 'hidden';
|
||||
});
|
||||
await waitForAnimationFrames(1);
|
||||
container.style.contentVisibility = 'hidden';
|
||||
// Advance to just shy of the effect end.
|
||||
animation.currentTime = 1999;
|
||||
assert_approx_equals(
|
||||
parseFloat(getComputedStyle(target).opacity), 0.999, 1e-6,
|
||||
'Computed style is updated even when the animation is ' +
|
||||
'running in a display locked subtree');
|
||||
// Advancing frames should not resolve the finished promise.
|
||||
await waitForAnimationFrames(3);
|
||||
container.style.contentVisibility = 'visible';
|
||||
// Now we can resolve the finished promise.
|
||||
await animation.finished;
|
||||
assert_equals(finishedWhileDisplayLocked, false);
|
||||
}, 'The finished promise does not resolve due to the normal passage of time ' +
|
||||
'for a CSS animation in a display locked subtree');
|
||||
|
||||
promise_test(async t => {
|
||||
const container = document.getElementById('container');
|
||||
await waitForAnimationFrames(1);
|
||||
const target = createAnimatingElement(t, 'transition');
|
||||
await waitForAnimationFrames(1);
|
||||
target.style.opacity = 0;
|
||||
const animation = target.getAnimations()[0];
|
||||
await animation.ready;
|
||||
let finishedWhileDisplayLocked = false;
|
||||
animation.finished.then(() => {
|
||||
finishedWhileDisplayLocked =
|
||||
getComputedStyle(container).contentVisibility == 'hidden';
|
||||
});
|
||||
await waitForAnimationFrames(1);
|
||||
container.style.contentVisibility = 'hidden';
|
||||
// Advance to just shy of the effect end.
|
||||
animation.currentTime = 999;
|
||||
assert_approx_equals(
|
||||
parseFloat(getComputedStyle(target).opacity), 0.001, 1e-6,
|
||||
'Computed style is updated even when the animation is ' +
|
||||
'running in a display locked subtree');
|
||||
// Advancing frames should not resolve the finished promise.
|
||||
await waitForAnimationFrames(3);
|
||||
container.style.contentVisibility = 'visible';
|
||||
// Now we can resolve the finished promise.
|
||||
await animation.finished;
|
||||
assert_equals(finishedWhileDisplayLocked, false);
|
||||
}, 'The finished promise does not resolve due to the normal passage of time ' +
|
||||
'for a CSS transition in a display locked subtree');
|
||||
|
||||
promise_test(async t => {
|
||||
const container = document.getElementById('container');
|
||||
const target = createAnimatingElement(t, 'animate');
|
||||
const animation = target.getAnimations()[0];
|
||||
target.className = '';
|
||||
container.style.contentVisibility = 'hidden';
|
||||
assert_equals(target.getAnimations().length, 0);
|
||||
let animationStartEvent = false;
|
||||
let animationFinished = false;
|
||||
target.addEventListener('animationstart', () => {
|
||||
animationStartEvent = true;
|
||||
});
|
||||
// Though originally a CSS animation, it is no longer associated with
|
||||
// CSS rules and no longer has an owning element. It now behaves like a
|
||||
// programmatic web animation. Events should be dispatched and promises
|
||||
// resolved despite being in a display locked subtree.
|
||||
animation.play();
|
||||
animation.finished.then(() => {
|
||||
animationFinished = true;
|
||||
});
|
||||
assert_equals(target.getAnimations().length, 1);
|
||||
await animation.ready;
|
||||
await waitForAnimationFrames(2);
|
||||
assert_true(animationStartEvent,
|
||||
'Animation event not blocked on display locked subtree if ' +
|
||||
'no owning element');
|
||||
animation.currentTime = 1999;
|
||||
await waitForAnimationFrames(2);
|
||||
assert_true(animationFinished,
|
||||
'Finished promise not blocked on display locked subtrtee if ' +
|
||||
'no owning element');
|
||||
}, 'Events and promises are handled normally for animations without an ' +
|
||||
'owning element');
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!doctype HTML>
|
||||
<html>
|
||||
<meta charset="utf8">
|
||||
<title>CSS Content Visibility: container (reference)</title>
|
||||
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
|
||||
|
||||
<style>
|
||||
#container {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: lightblue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id=container tabindex=0></div>
|
||||
|
||||
<script>
|
||||
onload = () => container.focus();
|
||||
</script>
|
||||
|
|
@ -1,115 +1,31 @@
|
|||
<!doctype HTML>
|
||||
<html>
|
||||
<meta charset="utf8">
|
||||
<title>Content Visibility: containment added</title>
|
||||
<title>Content Visibility: Computed Values</title>
|
||||
<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
|
||||
<meta name="assert" content="content-visibility visible does not add containment">
|
||||
<meta name="assert" content="content-visibility hidden adds containment">
|
||||
<meta name="assert" content="content-visibility auto adds containment">
|
||||
<meta name="assert" content="content-visibility auto visibility switches after rAF callbacks of the frame that produces the painted output">
|
||||
<meta name="assert" content="content-visibility:hidden does not affect computed value of 'contain'">
|
||||
<meta name="assert" content="content-visibility:auto does not affect computed value of 'contain'">
|
||||
|
||||
<style>
|
||||
.auto {
|
||||
content-visibility: auto;
|
||||
}
|
||||
.hidden {
|
||||
content-visibility: hidden;
|
||||
}
|
||||
.spacer {
|
||||
height: 10000px;
|
||||
}
|
||||
</style>
|
||||
<div id="container"></div>
|
||||
<div id="onscreen_container"></div>
|
||||
<div class=spacer></div>
|
||||
<div id="offscreen_container"></div>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<script>
|
||||
function setUp(container) {
|
||||
container.style = "";
|
||||
container.classList = "";
|
||||
|
||||
test(() => {
|
||||
assert_equals(getComputedStyle(container).contain, "none");
|
||||
}
|
||||
container.style = "content-visibility:hidden";
|
||||
assert_equals(getComputedStyle(container).contentVisibility, "hidden");
|
||||
assert_equals(getComputedStyle(container).contain, "none");
|
||||
}, "content-visibility:hidden does not affect computed value of 'contain'");
|
||||
|
||||
test(() => {
|
||||
setUp(container);
|
||||
container.classList.add("hidden");
|
||||
assert_equals(getComputedStyle(container).contain, "size layout style paint");
|
||||
}, "content-visibility: hidden adds contain: size layout style;");
|
||||
assert_equals(getComputedStyle(container).contain, "none");
|
||||
container.style = "content-visibility:auto;contain:layout;";
|
||||
assert_equals(getComputedStyle(container).contentVisibility, "auto");
|
||||
assert_equals(getComputedStyle(container).contain, "layout");
|
||||
}, "content-visibility:auto does not affect computed value of 'contain'");
|
||||
|
||||
async_test((t) => {
|
||||
setUp(onscreen_container);
|
||||
setUp(offscreen_container);
|
||||
|
||||
function runTest() {
|
||||
onscreen_container.classList.add("auto");
|
||||
offscreen_container.classList.add("auto");
|
||||
|
||||
t.step(() => assert_equals(getComputedStyle(onscreen_container).contain, "size layout style paint", "initial onscreen"));
|
||||
t.step(() => assert_equals(getComputedStyle(offscreen_container).contain, "size layout style paint", "initial offscreen"));
|
||||
// Considering this as frame 1, at the end of the frame intersection observation will happen
|
||||
// and determine that on-screen is visible and off-screen is not. The on-screen switch will
|
||||
// happen synchronously since this is the first time we check, so for the remainder of the
|
||||
// frames, on-screen should not have a size containment.
|
||||
|
||||
// For off-screen container:
|
||||
// At frame 2, we verify that it has size containment.
|
||||
// At frame 3, we scroll it into view and verify it has size containment. At the end of the frame
|
||||
// we will determine that it is visible and schedule a visibility switch to happen at the next
|
||||
// frame (at post-rAF timing).
|
||||
// At frame 4, we still have size containment until after rAF callbacks.
|
||||
// At frame 5, the container is no longer size-contained since it is visible.
|
||||
requestAnimationFrame(() => {
|
||||
// Frame 2 checks:
|
||||
t.step(() => assert_equals(getComputedStyle(onscreen_container).contain, "layout style paint", "frame 2 onscreen"));
|
||||
t.step(() => assert_equals(getComputedStyle(offscreen_container).contain, "size layout style paint", "frame 2 offscreen"));
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
window.scrollBy(0, 10000);
|
||||
|
||||
// Frame 3 checks:
|
||||
t.step(() => assert_equals(getComputedStyle(offscreen_container).contain, "size layout style paint", "frame 3"));
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
// Frame 4 checks:
|
||||
t.step(() => assert_equals(getComputedStyle(offscreen_container).contain, "size layout style paint", "frame 4"));
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
// Frame 5 checks:
|
||||
t.step(() => assert_equals(getComputedStyle(offscreen_container).contain, "layout style paint", "frame 5"));
|
||||
t.done();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
// rAF to ensure we know where we are in the lifecycle.
|
||||
requestAnimationFrame(runTest);
|
||||
}, "content-visibility: auto adds contain: size layout style paint;");
|
||||
|
||||
test(() => {
|
||||
setUp(container);
|
||||
container.classList.add("auto");
|
||||
container.style = "contain: style;";
|
||||
assert_equals(getComputedStyle(container).contain, "size layout style paint");
|
||||
container.style = "contain: style layout;";
|
||||
assert_equals(getComputedStyle(container).contain, "size layout style paint");
|
||||
container.style = "";
|
||||
assert_equals(getComputedStyle(container).contain, "size layout style paint");
|
||||
}, "content-visibility: auto adds contain: size layout style paint, can't be overridden");
|
||||
|
||||
test(() => {
|
||||
setUp(container);
|
||||
container.classList.add("auto");
|
||||
container.style = "contain: paint;";
|
||||
assert_equals(getComputedStyle(container).contain, "size layout style paint");
|
||||
container.style = "contain: strict;";
|
||||
assert_equals(getComputedStyle(container).contain, "size layout style paint");
|
||||
container.style = "contain: content;";
|
||||
assert_equals(getComputedStyle(container).contain, "size layout style paint");
|
||||
}, "content-visibility keeps all containment even when shorthands are specified");
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@
|
|||
<meta name="assert" content="content-visibility hidden element's subtree cannot be focused">
|
||||
<meta name="assert" content="content-visibility hidden element's subtree can access layout values">
|
||||
|
||||
<body style="margin: 0">
|
||||
|
||||
<div id="host">
|
||||
<input id="slotted" type="text">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<body style="margin: 0">
|
||||
|
||||
<div id=host>
|
||||
<input id=slotted>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
|
||||
<link rel="match" href="spacer-and-container-scrolled-ref.html">
|
||||
<meta name="assert" content="anchor link scroll is not prevented when the target is hidden">
|
||||
<meta name="assert" content="anchor link scroll not prevented when the target is hidden and activatable">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
|
||||
|
|
@ -19,12 +19,12 @@
|
|||
width: 150px;
|
||||
height: 150px;
|
||||
background: lightgreen;
|
||||
content-visibility: hidden;
|
||||
content-visibility: auto;
|
||||
}
|
||||
|
||||
#target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
<title>Content Visibility: scrollIntoView prevented</title>
|
||||
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
|
||||
<link rel="match" href="spacer-and-container-scrolled-ref.html">
|
||||
<meta name="assert" content="scrollIntoView is not prevented when the target is hidden">
|
||||
<link rel="match" href="spacer-and-container-ref.html">
|
||||
<meta name="assert" content="scrollIntoView is prevented when the target is hidden">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,58 +0,0 @@
|
|||
<!doctype HTML>
|
||||
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf8">
|
||||
<title>CSS Content Visibility: hidden + scrollIntoView</title>
|
||||
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
|
||||
<link rel="match" href="content-visibility-059-ref.html">
|
||||
<meta name="assert" content="scrollIntoView scrolls to element under hidden, not just container">
|
||||
<meta name="assert" content="scrollIntoView does not start painting hidden content">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
|
||||
<style>
|
||||
.spacer {
|
||||
height: 1000px;
|
||||
background: lightgreen;
|
||||
}
|
||||
#container {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: lightblue;
|
||||
}
|
||||
#target {
|
||||
position: relative;
|
||||
top: 75px;
|
||||
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: red;
|
||||
}
|
||||
.hidden {
|
||||
content-visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>top of the page</div>
|
||||
<div class=spacer></div>
|
||||
<div id=container class=hidden>
|
||||
<div id=target></div>
|
||||
</div>
|
||||
<div class=spacer></div>
|
||||
<div>bottom of the page</div>
|
||||
|
||||
<script>
|
||||
function runTest() {
|
||||
document.getElementById("target").scrollIntoView();
|
||||
requestAnimationFrame(takeScreenshot);
|
||||
}
|
||||
|
||||
window.onload = requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
runTest();
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!doctype HTML>
|
||||
<html>
|
||||
<meta charset="utf8">
|
||||
<title>CSS Content Visibility: focus selects content-visibility element</title>
|
||||
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
|
||||
<link rel="match" href="container-focus-ref.html">
|
||||
<meta name="assert" content="The elements with content-visibility are still focusable">
|
||||
|
||||
<style>
|
||||
#container {
|
||||
content-visibility: hidden;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: lightblue;
|
||||
}
|
||||
#child {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: lightgreen;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id=container tabindex=0>
|
||||
<div id=child></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
onload = () => container.focus();
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!doctype HTML>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf8">
|
||||
<title>Content Visibility: anchor links prevented on hidden</title>
|
||||
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
|
||||
<link rel="match" href="spacer-and-container-ref.html">
|
||||
<meta name="assert" content="anchor link scroll is prevented when the target is hidden">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
|
||||
<style>
|
||||
.spacer {
|
||||
width: 150px;
|
||||
height: 3000px;
|
||||
background: lightblue;
|
||||
}
|
||||
#container {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: lightgreen;
|
||||
content-visibility: hidden;
|
||||
}
|
||||
|
||||
#target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="spacer"></div>
|
||||
<div id="container"><div id="target"></div></div>
|
||||
|
||||
<script>
|
||||
function runTest() {
|
||||
location.href += "#target";
|
||||
requestAnimationFrame(takeScreenshot);
|
||||
}
|
||||
|
||||
window.onload = () => { requestAnimationFrame(runTest); };
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!doctype HTML>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf8">
|
||||
<title>Content Visibility: anchor links prevented on hidden</title>
|
||||
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
|
||||
<link rel="match" href="spacer-and-container-ref.html">
|
||||
<meta name="assert" content="anchor link scroll is prevented when the target is hidden">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
|
||||
<style>
|
||||
.spacer {
|
||||
width: 150px;
|
||||
height: 3000px;
|
||||
background: lightblue;
|
||||
}
|
||||
#container {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: lightgreen;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
content-visibility: hidden;
|
||||
}
|
||||
|
||||
#target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="spacer"></div>
|
||||
<div id="container"><div id="target"></div></div>
|
||||
|
||||
<script>
|
||||
function tryToScroll() {
|
||||
location.href += "#target";
|
||||
requestAnimationFrame(takeScreenshot);
|
||||
}
|
||||
|
||||
function runTest() {
|
||||
container.classList.add("hidden");
|
||||
requestAnimationFrame(tryToScroll);
|
||||
}
|
||||
|
||||
window.onload = () => { requestAnimationFrame(runTest); };
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
|
||||
<link rel="help" href="https://crbug.com/1197492">
|
||||
<map>
|
||||
<ul></ul>
|
||||
<progress></progress>
|
||||
<iframe></iframe>
|
||||
</map>
|
||||
<style>
|
||||
body, map, ul, progress {
|
||||
content-visibility: auto;
|
||||
height: 0vw;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="test-wait">
|
||||
<link rel="author" title="Joey Arhar" href="mailto:jarhar@chromium.org">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1208573">
|
||||
|
||||
<div style="content-visibility:hidden">hidden</div>
|
||||
|
||||
<div id=host>
|
||||
<template shadowroot=open>
|
||||
<div>nested slots:</div>
|
||||
<slot name=parent>
|
||||
<slot name=child></slot>
|
||||
</slot>
|
||||
</template>
|
||||
<div slot=parent>lightdom slot=parent</div>
|
||||
<div slot=child>lightdom slot=child</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = 'new lightdom child';
|
||||
host.appendChild(div);
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
document.documentElement.classList.remove('test-wait');
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!doctype HTML>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf8">
|
||||
<title>CSS Content Visibility: element reslotting</title>
|
||||
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
|
||||
<link rel="match" href="container-ref.html">
|
||||
<meta name="assert" content="element is correctly removed when slot assignment takes it into a skipped slot">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
|
||||
<script>
|
||||
window.customElements.define("my-element", class extends HTMLElement {
|
||||
connectedCallback() {
|
||||
if (this.shadowRoot) {
|
||||
this.computeEdges_();
|
||||
return;
|
||||
}
|
||||
|
||||
this.attachShadow({ mode: 'open' }).innerHTML = `
|
||||
<style>
|
||||
slot[name=locked] {
|
||||
display: block;
|
||||
content-visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
<slot name=unlocked></slot>
|
||||
<slot name=locked></slot>
|
||||
`;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#container {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
div {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.composited { will-change: transform; }
|
||||
#one { background: green; }
|
||||
#two { background: red; }
|
||||
</style>
|
||||
|
||||
<div id=container>
|
||||
<my-element>
|
||||
<div id=one slot=unlocked>hello</div>
|
||||
<div id=two slot=locked>world</div>
|
||||
</my-element>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Ensure everything is loaded and rendered.
|
||||
onload = () =>
|
||||
requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => {
|
||||
// Reslot the element and composite the other one.
|
||||
one.slot = "locked";
|
||||
two.classList.add("composited");
|
||||
requestAnimationFrame(takeScreenshot);
|
||||
})));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<!doctype HTML>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf8">
|
||||
<title>CSS Content Visibility: element reslotting</title>
|
||||
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
|
||||
<link rel="match" href="container-ref.html">
|
||||
<meta name="assert" content="element is correctly removed when slot assignment takes it into a skipped slot">
|
||||
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
|
||||
<script>
|
||||
window.customElements.define("my-element", class extends HTMLElement {
|
||||
connectedCallback() {
|
||||
if (this.shadowRoot) {
|
||||
this.computeEdges_();
|
||||
return;
|
||||
}
|
||||
|
||||
this.attachShadow({ mode: 'open' }).innerHTML = `
|
||||
<style>
|
||||
#locked {
|
||||
display: block;
|
||||
content-visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
<slot name=unlocked></slot>
|
||||
<div id=locked>
|
||||
<slot name=locked></slot>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#container {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
div {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.composited { will-change: transform; }
|
||||
#one { background: green; }
|
||||
#two { background: red; }
|
||||
</style>
|
||||
|
||||
<div id=container>
|
||||
<my-element>
|
||||
<div id=one slot=unlocked>hello</div>
|
||||
<div id=two slot=locked>world</div>
|
||||
</my-element>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Ensure everything is loaded and rendered.
|
||||
onload = () =>
|
||||
requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => {
|
||||
// Reslot the element and composite the other one.
|
||||
one.slot = "locked";
|
||||
two.classList.add("composited");
|
||||
requestAnimationFrame(takeScreenshot);
|
||||
})));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="test-wait">
|
||||
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
|
||||
<meta name="assert" content="Removing elements under hidden subtrees doesn't crash">
|
||||
|
||||
<p id="parent"><q><svg><marker display="list-item"><hr><object id="inner">
|
||||
<style>
|
||||
q {
|
||||
content-visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
onload = () => {
|
||||
document.getElementById("parent").hidden = true;
|
||||
var test = document.getElementById("inner").border;
|
||||
document.getElementById("parent").textContent = undefined;
|
||||
|
||||
requestAnimationFrame(() => document.documentElement.classList.remove('test-wait'));
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!doctype HTML>
|
||||
<link rel=author href="mailto:vmpstr@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
|
||||
<meta name="assert" content="meter, iframe, and selection API should not crash">
|
||||
|
||||
<style>
|
||||
* {
|
||||
all: initial;
|
||||
content-visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
<meter></meter><iframe id="frame"></iframe>
|
||||
<script>
|
||||
function runTest() {
|
||||
var range_beadc = window.getSelection();
|
||||
var elem1 = document.getElementById("frame");
|
||||
range_beadc.setBaseAndExtent(elem1, 0, document.getElementById("none"), 0);
|
||||
}
|
||||
onload = runTest;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel=author href="mailto:jarhar@chromium.org">
|
||||
<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1221036">
|
||||
|
||||
>
|
||||
<div>
|
||||
<template shadowroot=open>
|
||||
<slot style="content-visibility: hidden; display: block"></slot>
|
||||
</template>
|
||||
a
|
||||
<script type="text/javascript">
|
||||
document.execCommand("selectall");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel=author href="mailto:jarhar@chromium.org">
|
||||
<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1221821">
|
||||
|
||||
<div>
|
||||
<template shadowroot=open>
|
||||
<slot style="content-visibility: hidden; display: block"></slot>
|
||||
</template>
|
||||
<link rel=stylesheet href="/fonts/ahem.css">
|
||||
<span style="columns: 1 46px">
|
||||
<style>
|
||||
* {}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel=author href="mailto:jarhar@chromium.org">
|
||||
<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1221821">
|
||||
|
||||
<div>
|
||||
<template shadowroot=open>
|
||||
<slot style="content-visibility: hidden; display: block"></slot>
|
||||
</template>
|
||||
<span autofocus>
|
||||
<link rel=stylesheet href="/fonts/ahem.css">
|
||||
<body hidden>
|
||||
<span style="columns: 4294967236 46px; ">
|
||||
<style>
|
||||
* {}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel=author href="mailto:jarhar@chromium.org">
|
||||
<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1221767">
|
||||
|
||||
<div>
|
||||
<template shadowroot=open>
|
||||
<slot style="content-visibility: hidden; display: block"></slot>
|
||||
</template>
|
||||
a
|
||||
<meter>a
|
||||
<script>
|
||||
document.execCommand("selectall");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel=author href="mailto:jarhar@chromium.org">
|
||||
<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1221121">
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<style>
|
||||
</style>
|
||||
<style>
|
||||
</style>
|
||||
<div>
|
||||
<template shadowroot=open>
|
||||
<slot style="content-visibility: hidden; display: block"></slot>
|
||||
</template>
|
||||
<embed id="I7" class= accesskey="h">
|
||||
<meter class="C8">a
|
||||
<script>
|
||||
document.head.appendChild(document.createElement("style"));
|
||||
const styleSheet = document.styleSheets[document.styleSheets.length - 1];
|
||||
styleSheet.insertRule(":root{}");
|
||||
const styleSheet0 = document.styleSheets[0];
|
||||
const test2 = document.getElementById("I7");
|
||||
test2.className += "fuzzClass5";
|
||||
styleSheet0.insertRule('.C8 {}');
|
||||
try {
|
||||
test2.style.setProperty();
|
||||
} catch(e) {}
|
||||
document.styleSheets[3].disabled = true;
|
||||
test2.style['border-right-color-value'] = '';
|
||||
styleSheet0.insertRule('.foo { color: blue }', styleSheet0.cssRules.length);
|
||||
document.execCommand("false");
|
||||
document.designMode = "on";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel=author href="mailto:jarhar@chromium.org">
|
||||
<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1221890">
|
||||
|
||||
<a autofocus="autofocus">
|
||||
<div>
|
||||
<template shadowroot=open>
|
||||
<slot style="content-visibility: hidden; display: block"></slot>
|
||||
</template>
|
||||
</a>
|
||||
<svg>
|
||||
<clipPath id="svgvar00002">
|
||||
</div>
|
||||
<svg clip-path="url(#svgvar00002)">
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel=author href="mailto:jarhar@chromium.org">
|
||||
<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1221508">
|
||||
|
||||
<script>
|
||||
function showmodal() {
|
||||
dialog.showModal();
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload=showmodal()>
|
||||
<div>
|
||||
<template shadowroot=open>
|
||||
<slot style="content-visibility: hidden; display:block"></slot>
|
||||
</template>
|
||||
<dialog id=dialog></dialog>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel=author href="mailto:jarhar@chromium.org">
|
||||
<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1222408">
|
||||
|
||||
<div id=details>
|
||||
<template shadowroot=open>
|
||||
<slot style="content-visibility: hidden; display: block"></slot>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div id="clear-left">
|
||||
<div>X</div>
|
||||
<script>
|
||||
document.head.appendChild(document.createElement("style"));
|
||||
var styleSheet = document.styleSheets[document.styleSheets.length-1];
|
||||
styleSheet.insertRule(":root{}"); styleSheet.disabled=false;
|
||||
var styleSheet0 = document.styleSheets[0];
|
||||
var test0=document.getElementById("clear-left");
|
||||
var test5=test0.appendChild(details);
|
||||
var test6=test5.appendChild(document.createElement("figure"));
|
||||
var test7=test5.appendChild(document.createElement("cite"));
|
||||
requestAnimationFrame(function() {
|
||||
styleSheet0.insertRule('p:checked, #clear-left:before {-ms-transform:perspective(45in) rotateX(90deg); -ms-flex-wrap:wrap; }',styleSheet0.cssRules.length);
|
||||
document.execCommand(null);
|
||||
styleSheet0.insertRule('hgroup:link, #clear-left:link {-webkit-animation-name:test; padding-bottom:$grid-padding; }',styleSheet0.cssRules.length);
|
||||
test6.style.setProperty('font-Weight','bold');
|
||||
});
|
||||
window.scrollTo();
|
||||
test7.style.transform = 'scale(1)';
|
||||
</script>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
|
||||
<link rel="help" href="https://crbug.com/1214198">
|
||||
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
|
||||
<style>
|
||||
.contain {
|
||||
contain: strict;
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="outer" class="contain">
|
||||
<div>
|
||||
<div id="inner" class="contain"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
inner.appendChild(document.createTextNode('inner-child'));
|
||||
outer.appendChild(document.createTextNode('outer-child'));
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Module Level 1: getComputedStyle().contain</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
|
||||
<meta name="assert" content="computed contain value for children should ignore container contain value.">
|
||||
<div id="container"><div id="target"></div></div>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
test(() => {
|
||||
['none', 'style', 'layout', 'paint', 'size', 'strict', 'content'].forEach(value => {
|
||||
container.style.contain = value;
|
||||
assert_equals(getComputedStyle(target).contain, "none");
|
||||
});
|
||||
}, "computed contain value for children should ignore container contain value");
|
||||
</script>
|
||||
|
|
@ -22,10 +22,10 @@ test_computed_value("contain", "style");
|
|||
test_computed_value("contain", "paint");
|
||||
test_computed_value("contain", "size layout");
|
||||
test_computed_value("contain", "style paint");
|
||||
test_computed_value("contain", "layout style paint");
|
||||
test_computed_value("contain", "size layout style paint");
|
||||
test_computed_value("contain", "size layout paint", "strict");
|
||||
test_computed_value("contain", "layout paint", "content");
|
||||
test_computed_value("contain", "style layout paint", "content");
|
||||
test_computed_value("contain", "size style layout paint", "strict");
|
||||
test_computed_value("contain", "size layout paint", "size layout paint");
|
||||
test_computed_value("contain", "layout paint");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,14 @@
|
|||
<body>
|
||||
<script>
|
||||
test_invalid_value("contain", "auto");
|
||||
test_invalid_value("contain", "layout layout");
|
||||
test_invalid_value("contain", "strict layout");
|
||||
test_invalid_value("contain", "paint strict");
|
||||
test_invalid_value("contain", "paint layout style paint");
|
||||
test_invalid_value("contain", "none none");
|
||||
test_invalid_value("contain", "none strict");
|
||||
test_invalid_value("contain", "strict strict");
|
||||
test_invalid_value("contain", "strict none");
|
||||
test_invalid_value("contain", "strict content");
|
||||
test_invalid_value("contain", "size layout size");
|
||||
test_invalid_value("contain", "paint content");
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
<!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">
|
||||
|
||||
<style>
|
||||
html, body, p {
|
||||
margin: 0;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is no red.
|
||||
|
|
@ -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,35 @@
|
|||
<!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">
|
||||
|
||||
<style>
|
||||
html {
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
border-top: 100px solid red;
|
||||
border-bottom: 100px solid green;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
div {
|
||||
text-orientation: upright;
|
||||
}
|
||||
p {
|
||||
margin: auto;
|
||||
padding: 150px 0;
|
||||
writing-mode: horizontal-tb;
|
||||
direction: ltr;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
<p>Test passes if there is no red.
|
||||
</div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!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">
|
||||
|
||||
<style>
|
||||
html::before {
|
||||
content: "";
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: orange;
|
||||
display: block;
|
||||
}
|
||||
body { margin: 0; }
|
||||
p {
|
||||
margin: 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the orange square is in the upper-left corner.
|
||||
|
|
@ -20,8 +20,8 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square, no red and the number 25.
|
||||
<p>Test passes if there is a filled green square, no red and the number 17.
|
||||
|
||||
<div id="green-square"></div>
|
||||
|
||||
<div id="result">25</div>
|
||||
<div id="result">17</div>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,6 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is the number 26.
|
||||
<p>Test passes if there is the number 17.
|
||||
|
||||
<div>26</div>
|
||||
<div>17</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue