mirror of
https://github.com/servo/servo.git
synced 2025-09-03 19:48:21 +01:00
Update web-platform-tests to revision 5084587f6b05bf99ad09e7844be66dcc61070cdf
This commit is contained in:
WPT Sync Bot
Anthony Ramine
parent
6d42d2f1e8
commit
7d1071a6a4
408 changed files with 8968 additions and 2608 deletions
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Reference: z-index (option B)</title>
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/>
|
||||
<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
|
||||
<meta name="flags" content="" />
|
||||
<style type="text/css">
|
||||
.container {
|
||||
z-index:0;
|
||||
position: relative;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
background: silver;
|
||||
border: solid white;
|
||||
}
|
||||
.container div {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.control .outline {
|
||||
border: solid fuchsia 5px;
|
||||
width: 110px;
|
||||
height: 85px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.outline.c1 {
|
||||
margin: 30px 5px 100px;
|
||||
}
|
||||
.outline.c2 {
|
||||
padding: 0;
|
||||
margin: -20px -45px;
|
||||
}
|
||||
.outline.c2 > div {
|
||||
margin: -20px 5px 0;
|
||||
}
|
||||
|
||||
.control div {
|
||||
margin-left: -35px;
|
||||
margin-top: -35px;
|
||||
}
|
||||
.control > div {
|
||||
margin-left: auto;
|
||||
margin-top: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="control container">
|
||||
<div style="background: navy">
|
||||
<div style="background: blue">
|
||||
<div style="background: aqua">
|
||||
<div class="outline c2">
|
||||
<div style="background: lime">
|
||||
<div style="background: teal">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>The pattern above must match one of the two patterns below.</p>
|
||||
|
||||
<div class="control container">
|
||||
<div style="background: navy">
|
||||
<div style="background: blue">
|
||||
<div style="background: aqua">
|
||||
<div style="background: lime">
|
||||
<div style="background: teal">
|
||||
<div class="outline c1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control container">
|
||||
<div style="background: navy">
|
||||
<div style="background: blue">
|
||||
<div style="background: aqua">
|
||||
<div class="outline c2">
|
||||
<div style="background: lime">
|
||||
<div style="background: teal">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -7,6 +7,7 @@
|
|||
<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#z-index" />
|
||||
<link rel="match" href="z-index-020-ref.xht"/>
|
||||
<link rel="match" href="z-index-020-ref2.xht"/>
|
||||
<meta name="flags" content="" />
|
||||
<style type="text/css">
|
||||
.container {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: paint containment on non-atomic inlines</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="paint containment does not apply to non atomic inlines">
|
||||
<link rel="match" href="reference/contain-size-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
|
||||
<style>
|
||||
span {
|
||||
contain: layout;
|
||||
height: 100vh; /*If layout containment applies, the span becomes a BFC, height applies, and knocks SS off the page */
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if you can see the word PASS below.
|
||||
<div><span>PA</span>SS</div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: layout containment on ruby-base</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="ahem">
|
||||
<meta name=assert content="layout containment does not apply to ruby-base">
|
||||
<link rel="match" href="reference/contain-layout-002-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
|
||||
<style>
|
||||
rb {
|
||||
contain: layout;
|
||||
display: ruby-base;
|
||||
font-family: ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
rb::before {
|
||||
content: "X";
|
||||
color: green;
|
||||
}
|
||||
rb::after {
|
||||
content: "X";
|
||||
color: white;
|
||||
position: absolute;
|
||||
top:0; left: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if you can see a green box below.
|
||||
<div><ruby><rb></rb></ruby></div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: layout containment on ruby-base-container</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="ahem">
|
||||
<meta name=assert content="layout containment does not apply to ruby-base-container">
|
||||
<link rel="match" href="reference/contain-layout-002-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
|
||||
<style>
|
||||
rbc {
|
||||
contain: layout;
|
||||
display: ruby-base-container;
|
||||
font-family: ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
rbc::before {
|
||||
content: "X";
|
||||
color: green;
|
||||
}
|
||||
rbc::after {
|
||||
content: "X";
|
||||
color: white;
|
||||
position: absolute;
|
||||
top:0; left: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if you can see a green box below.
|
||||
<div><ruby><rbc></rbc></ruby></div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: layout containment on ruby-text-container</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="ahem">
|
||||
<meta name=assert content="layout containment does not apply to ruby-text-container">
|
||||
<link rel="match" href="reference/contain-layout-004-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
|
||||
<style>
|
||||
rtc {
|
||||
contain: layout;
|
||||
display: ruby-text-container;
|
||||
font-family: ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
rtc::before {
|
||||
content: "X";
|
||||
color: green;
|
||||
}
|
||||
rtc::after {
|
||||
content: "X";
|
||||
color: white;
|
||||
position: absolute;
|
||||
top:0; left: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if you can see a green box below.
|
||||
<div><ruby><rtc></rtc></ruby></div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: layout containment on ruby-text</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="ahem">
|
||||
<meta name=assert content="layout containment does not apply to ruby-text">
|
||||
<link rel="match" href="reference/contain-layout-005-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
|
||||
<style>
|
||||
rt {
|
||||
contain: layout;
|
||||
display: ruby-text;
|
||||
font-family: ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
rt::before {
|
||||
content: "X";
|
||||
color: green;
|
||||
}
|
||||
rt::after {
|
||||
content: "X";
|
||||
color: white;
|
||||
position: absolute;
|
||||
top:0; left: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if you can see a green box below.
|
||||
<div><ruby><rt></rt></ruby></div>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: layout containment and forced breaks</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="layout containment allows forced breaks.">
|
||||
<link rel="match" href="reference/contain-style-breaks-004-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-layout">
|
||||
<link rel=help href="https://drafts.csswg.org/css-break-3/#forced-break">
|
||||
|
||||
<style>
|
||||
article {
|
||||
columns: 2 1ch;
|
||||
column-gap: 0;
|
||||
float: left;
|
||||
font-family: monospace;
|
||||
margin-right: 3em;
|
||||
line-height: 1;
|
||||
height: 4em;
|
||||
column-fill: auto;
|
||||
}
|
||||
div > div:last-of-type {
|
||||
break-before: column;
|
||||
}
|
||||
#test > div {
|
||||
contain: layout;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are two identical blocks “A” letters below.
|
||||
<article id=ref>
|
||||
<div>
|
||||
<div>A<br>A</div>
|
||||
<div>A<br>A</div>
|
||||
</div>
|
||||
</article>
|
||||
<article id=test>
|
||||
<div>
|
||||
<div>A<br>A</div>
|
||||
<div>A<br>A</div>
|
||||
</div>
|
||||
</article>
|
||||
<!--
|
||||
Having two blocks to avoid making browsers that don't support forced break at all fail.
|
||||
Since containment is supposed to have no effect, failing such browsers would not be useful.
|
||||
-->
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: layout containment and forced breaks</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="forced breaks within layout containment do not propagate to the parent.">
|
||||
<link rel="match" href="reference/contain-layout-breaks-002-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-layout">
|
||||
<link rel=help href="https://drafts.csswg.org/css-break-3/#forced-break">
|
||||
|
||||
<style>
|
||||
article {
|
||||
columns: 2 20px;
|
||||
float: left;
|
||||
height: 50px;
|
||||
column-fill: auto;
|
||||
}
|
||||
div > div {
|
||||
border-top: 20px solid orange;
|
||||
break-before: column;
|
||||
}
|
||||
article > div {
|
||||
border-top: 20px solid orange;
|
||||
contain: layout;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are two orange boxes below.
|
||||
<article>
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
</article>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: paint containment use the padding edge</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="paint containment clips at the padding edge, not content edge, and takes corner clipping into account">
|
||||
<link rel="match" href="reference/contain-paint-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
padding: 50px;
|
||||
border-radius: 100px;
|
||||
border: white 50px solid;
|
||||
contain: paint;
|
||||
}
|
||||
div::before {
|
||||
content:"";
|
||||
display: block;
|
||||
background: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
div::after {
|
||||
content:"";
|
||||
display: block;
|
||||
background: red;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
float: left;
|
||||
margin-top: 36px;
|
||||
margin-left: -86px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a green square in a rounded blue box, and no red.
|
||||
<div></div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: paint containment on non-atomic inlines</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="paint containment does not apply to non atomic inlines">
|
||||
<link rel="match" href="reference/contain-size-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
|
||||
<style>
|
||||
span {
|
||||
contain: paint;
|
||||
width: 0; /* Because if the test fails, the span may get blockified, and which would make wide enough to hold the PASS */
|
||||
}
|
||||
span::after {
|
||||
content: "PASS";
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if you can see the word PASS below.
|
||||
<div><span></span></div>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: paint containment applies to the principal box for tables</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="paint containment applies to the principal box, which is the table wrapper box for tables">
|
||||
<link rel="match" href="reference/contain-size-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
|
||||
<style>
|
||||
table { contain: paint; }
|
||||
</style>
|
||||
|
||||
<p>This test passes if you can see the word PASS below.
|
||||
<table>
|
||||
<caption>PASS</caption>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: paint containment applies to the principal box for list items</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="paint containment applies to the principal box, which for list items excludes the list marker">
|
||||
<link rel="match" href="reference/contain-paint-004-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
|
||||
<style>
|
||||
li { contain: paint; }
|
||||
</style>
|
||||
|
||||
<p>This test passes if you can see no number below.
|
||||
<ol>
|
||||
<li>
|
||||
<li>
|
||||
<li>
|
||||
<li>
|
||||
<li>
|
||||
<li>
|
||||
</ol>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: paint containment on ruby-base</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="paint containment does not apply to ruby-base">
|
||||
<link rel="match" href="reference/contain-size-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
|
||||
<style>
|
||||
rb {
|
||||
contain: paint;
|
||||
display: ruby-base;
|
||||
width: 0; /* Because if the test fails, this may get blockified, and which could make wide enough to hold the PASS */
|
||||
}
|
||||
rb::after {
|
||||
content: "PASS";
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if you can see the word PASS below.
|
||||
<div><ruby><rb></rb></ruby></div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: paint containment on ruby-base-container</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="paint containment does not apply to ruby-base-container">
|
||||
<link rel="match" href="reference/contain-size-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
|
||||
<style>
|
||||
rbc {
|
||||
contain: paint;
|
||||
display: ruby-base-container;
|
||||
width: 0; /* Because if the test fails, this may get blockified, and which could make wide enough to hold the PASS */
|
||||
}
|
||||
rbc::after {
|
||||
content: "PASS";
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if you can see the word PASS below.
|
||||
<div><ruby><rbc></rbc></ruby></div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: paint containment on ruby-text-container</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="paint containment does not apply to ruby-text-container">
|
||||
<link rel="match" href="reference/contain-paint-007-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
|
||||
<style>
|
||||
rtc {
|
||||
contain: paint;
|
||||
display: ruby-text-container;
|
||||
width: 0; /* Because if the test fails, this may get blockified, and which could make wide enough to hold the PASS */
|
||||
font-size: 1rem;
|
||||
}
|
||||
rtc::after {
|
||||
content: "PASS";
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if you can see the word PASS below.
|
||||
<div><ruby><rtc></rtc></ruby></div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: paint containment on ruby-text</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="paint containment does not apply to ruby-text">
|
||||
<link rel="match" href="reference/contain-paint-008-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-paint">
|
||||
|
||||
<style>
|
||||
rt {
|
||||
contain: paint;
|
||||
display: ruby-text;
|
||||
font-size: 1rem;
|
||||
}
|
||||
rt::after {
|
||||
content: "PASS";
|
||||
|
||||
/* Doing the following instead of position:absolute to move it out into the area that would be clipped
|
||||
because Firefox clips absolutely positioned content of rt even though it does not support
|
||||
containment.
|
||||
Since this technique works also, not need to trigger a false negative.
|
||||
*/
|
||||
position: relative;
|
||||
left: 4ch;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if you can see the word PASS below.
|
||||
<div><ruby><rt></rt></ruby></div>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: size containment on non-atomic inlines</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="size containment does not apply to non atomic inlines">
|
||||
<link rel="match" href="reference/contain-size-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-size">
|
||||
|
||||
<style>
|
||||
div { overflow: hidden; }
|
||||
span { contain: size; }
|
||||
</style>
|
||||
|
||||
<p>This test passes if you can see the word PASS below.
|
||||
<div><span>PASS</span></div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: size containment on ruby-base</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="size containment does not to apply ruby-base, which is an internatl ruby element">
|
||||
<link rel="match" href="reference/contain-size-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-size">
|
||||
<link rel=help href="https://drafts.csswg.org/css-display-3/#internal-ruby-element">
|
||||
|
||||
<style>
|
||||
div {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
rb {
|
||||
contain: size;
|
||||
display: ruby-base;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if you can see the word PASS below.
|
||||
<div><ruby><rb>PASS</rb></ruby></div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: size containment on ruby-base-container</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="size containment does not to apply ruby-base-container, which is an internatl ruby element">
|
||||
<link rel="match" href="reference/contain-size-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-size">
|
||||
<link rel=help href="https://drafts.csswg.org/css-display-3/#internal-ruby-element">
|
||||
|
||||
<style>
|
||||
div {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
rbc {
|
||||
contain: size;
|
||||
display: ruby-base-container;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if you can see the word PASS below.
|
||||
<div><ruby><rbc>PASS</rbc></ruby></div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: size containment on ruby-text-container</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="size containment does not to apply ruby-text-container, which is an internatl ruby element">
|
||||
<link rel="match" href="reference/contain-size-004-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-size">
|
||||
<link rel=help href="https://drafts.csswg.org/css-display-3/#internal-ruby-element">
|
||||
|
||||
<style>
|
||||
div {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
rtc {
|
||||
contain: size;
|
||||
display: ruby-text-container;
|
||||
font-size: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if you can see the word PASS below.
|
||||
<div><ruby><rtc>PASS</rtc></ruby></div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: size containment on ruby-text</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="size containment does not to apply ruby-text, which is an internatl ruby element">
|
||||
<link rel="match" href="reference/contain-size-005-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-size">
|
||||
<link rel=help href="https://drafts.csswg.org/css-display-3/#internal-ruby-element">
|
||||
|
||||
<style>
|
||||
div {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
rt {
|
||||
contain: size;
|
||||
display: ruby-text;
|
||||
font-size: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if you can see the word PASS below.
|
||||
<div><ruby><rt>PASS</rt></ruby></div>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: size containment and fragmentation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="ahem">
|
||||
<meta name=assert content="size containment makes element monolithic">
|
||||
<link rel="match" href="reference/contain-size-breaks-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-style">
|
||||
<link rel=help href="https://drafts.csswg.org/css-break-3/#monolithic">
|
||||
|
||||
<style>
|
||||
article {
|
||||
height: 2.5em;
|
||||
column-gap: 0;
|
||||
columns: 3 1em;
|
||||
width: 3em;
|
||||
column-fill: auto;
|
||||
|
||||
font-size: 40px;
|
||||
font-family: ahem;
|
||||
line-height: 1;
|
||||
}
|
||||
div {
|
||||
contain: size;
|
||||
height: 5em;
|
||||
color: orange;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if there is an orange rectangle below. If the shape is not a rectangle, the test fails.
|
||||
|
||||
<article>
|
||||
<div>A A A A A</div>
|
||||
</article>
|
||||
|
||||
<!--
|
||||
If the element is monolythic, it may:
|
||||
* overflow and be a 1x5 em rectangle
|
||||
* be sliced and be 2 contigious 1x2.5 em rectangles, appearing as a single
|
||||
2x2.5 em rectangle.
|
||||
Either way, it will always appear as a single rectangle.
|
||||
|
||||
If the element is not monolithic, it will fit 2 As in the first column, 2 in
|
||||
the second column, and the fith will be overflowing the div, either into the
|
||||
thrid column, or into the bottom of the second one.
|
||||
Either way, this will not look like a rectangle.
|
||||
-->
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment and break-inside:avoid</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="style containment is (no longer) supposed to have any effect on the break-inside property">
|
||||
<link rel="match" href="reference/contain-style-breaks-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-style">
|
||||
|
||||
<style>
|
||||
article {
|
||||
columns: 2 1ch;
|
||||
column-gap: 0;
|
||||
float: left;
|
||||
font-family: monospace;
|
||||
margin-right: 3em;
|
||||
}
|
||||
div {
|
||||
page-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
}
|
||||
#test > div {
|
||||
contain: style;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are two identical blocks “A” letters below.
|
||||
<article id=ref>
|
||||
<div>
|
||||
A<br>
|
||||
A<br>
|
||||
A<br>
|
||||
A
|
||||
<div>
|
||||
</article>
|
||||
<article id=test>
|
||||
<div>
|
||||
A<br>
|
||||
A<br>
|
||||
A<br>
|
||||
A
|
||||
<div>
|
||||
</article>
|
||||
<!--
|
||||
Having two blocks to avoid making browsers that don't support the property at all fail.
|
||||
Since containment is supposed to have no effect, failing such browsers would not be useful.
|
||||
-->
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment and break-inside:avoid</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="style containment is not (any longer) supposed to have any effect on the break-inside property. Same as -001, applying containment on the parent.">
|
||||
<link rel="match" href="reference/contain-style-breaks-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-style">
|
||||
|
||||
<style>
|
||||
article {
|
||||
columns: 2 1ch;
|
||||
column-gap: 0;
|
||||
float: left;
|
||||
font-family: monospace;
|
||||
margin-right: 3em;
|
||||
}
|
||||
div > div {
|
||||
page-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
}
|
||||
#test > div {
|
||||
contain: style;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are two identical blocks “A” letters below.
|
||||
<article id=ref>
|
||||
<div>
|
||||
<div>
|
||||
A<br>
|
||||
A<br>
|
||||
A<br>
|
||||
A
|
||||
<div>
|
||||
</div>
|
||||
</article>
|
||||
<article id=test>
|
||||
<div>
|
||||
<div>
|
||||
A<br>
|
||||
A<br>
|
||||
A<br>
|
||||
A
|
||||
<div>
|
||||
</div>
|
||||
</article>
|
||||
<!--
|
||||
Having two blocks to avoid making browsers that don't support the property at all fail.
|
||||
Since containment is supposed to have no effect, failing such browsers would not be useful.
|
||||
-->
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment and break-inside:avoid</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="style containment is not (any longer) supposed to have any effect on the break-inside property. Same as -001, applying break-inside on the parent.">
|
||||
<link rel="match" href="reference/contain-style-breaks-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-style">
|
||||
|
||||
<style>
|
||||
article {
|
||||
columns: 2 1ch;
|
||||
column-gap: 0;
|
||||
float: left;
|
||||
font-family: monospace;
|
||||
margin-right: 3em;
|
||||
}
|
||||
article > div {
|
||||
page-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
}
|
||||
#test div > div {
|
||||
contain: style;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are two identical blocks “A” letters below.
|
||||
<article id=ref>
|
||||
<div>
|
||||
<div>
|
||||
A<br>
|
||||
A<br>
|
||||
A<br>
|
||||
A
|
||||
<div>
|
||||
</div>
|
||||
</article>
|
||||
<article id=test>
|
||||
<div>
|
||||
<div>
|
||||
A<br>
|
||||
A<br>
|
||||
A<br>
|
||||
A
|
||||
<div>
|
||||
</div>
|
||||
</article>
|
||||
<!--
|
||||
Having two blocks to avoid making browsers that don't support the property at all fail.
|
||||
Since containment is supposed to have no effect, failing such browsers would not be useful.
|
||||
-->
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment and break-before</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="style containment is not (any longer) supposed to have any effect on the break-before property.">
|
||||
<link rel="match" href="reference/contain-style-breaks-004-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-style">
|
||||
|
||||
<style>
|
||||
article {
|
||||
columns: 2 1ch;
|
||||
column-gap: 0;
|
||||
float: left;
|
||||
font-family: monospace;
|
||||
margin-right: 3em;
|
||||
line-height: 1;
|
||||
height: 4em;
|
||||
column-fill: auto;
|
||||
}
|
||||
div > div:last-of-type {
|
||||
break-before: column;
|
||||
}
|
||||
#test > div {
|
||||
contain: style;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are two identical blocks “A” letters below.
|
||||
<article id=ref>
|
||||
<div>
|
||||
<div>A<br>A</div>
|
||||
<div>A<br>A</div>
|
||||
</div>
|
||||
</article>
|
||||
<article id=test>
|
||||
<div>
|
||||
<div>A<br>A</div>
|
||||
<div>A<br>A</div>
|
||||
</div>
|
||||
</article>
|
||||
<!--
|
||||
Having two blocks to avoid making browsers that don't support the property at all fail.
|
||||
Since containment is supposed to have no effect, failing such browsers would not be useful.
|
||||
-->
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment and break-after</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="style containment is not (any longer) supposed to have any effect on the break-after property.">
|
||||
<link rel="match" href="reference/contain-style-breaks-004-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-style">
|
||||
|
||||
<style>
|
||||
article {
|
||||
columns: 2 1ch;
|
||||
column-gap: 0;
|
||||
float: left;
|
||||
font-family: monospace;
|
||||
margin-right: 3em;
|
||||
line-height: 1;
|
||||
height: 4em;
|
||||
column-fill: auto;
|
||||
}
|
||||
div > div:first-of-type {
|
||||
break-after: column;
|
||||
}
|
||||
#test > div {
|
||||
contain: style;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are two identical blocks “A” letters below.
|
||||
<article id=ref>
|
||||
<div>
|
||||
<div>A<br>A</div>
|
||||
<div>A<br>A</div>
|
||||
</div>
|
||||
</article>
|
||||
<article id=test>
|
||||
<div>
|
||||
<div>A<br>A</div>
|
||||
<div>A<br>A</div>
|
||||
</div>
|
||||
</article>
|
||||
<!--
|
||||
Having two blocks to avoid making browsers that don't support the property at all fail.
|
||||
Since containment is supposed to have no effect, failing such browsers would not be useful.
|
||||
-->
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment and counter-increment</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="counter-increment is scoped to the subtree and creates a new counter at the root of the subtree">
|
||||
<link rel="match" href="reference/counter-scoping-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-style">
|
||||
|
||||
<style>
|
||||
div {
|
||||
contain: style;
|
||||
counter-increment: n;
|
||||
}
|
||||
div::before, div::after {
|
||||
content: counters(n, '.') " ";
|
||||
}
|
||||
div::after {
|
||||
counter-increment: n 2;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the text below is "1 1.2" (not including the quotation marks).<p>
|
||||
<div></div>
|
||||
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment and counter-set</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="counter-set is scoped to the subtree and creates a new counter at the root of the subtree">
|
||||
<link rel="match" href="reference/counter-scoping-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-style">
|
||||
<link rel=help href="https://drafts.csswg.org/css-lists-3/#propdef-counter-set">
|
||||
|
||||
<style>
|
||||
div {
|
||||
contain: style;
|
||||
counter-set: n;
|
||||
}
|
||||
div::before, div::after {
|
||||
content: counters(n, '.') " ";
|
||||
}
|
||||
div::after {
|
||||
counter-set: n 2;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the text below is "1 1.2" (not including the quotation marks).<p>
|
||||
<div></div>
|
||||
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment and subtree root</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="When considering the effects of the scoped property on elements inside the subtree, the element at the base of the subtree is treated as if it was the root of the document">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-style">
|
||||
<link rel="match" href="reference/counter-scoping-003-ref.html">
|
||||
|
||||
<style>
|
||||
div {
|
||||
contain: style;
|
||||
counter-increment: c 123;
|
||||
}
|
||||
span::before {
|
||||
content: counter(c);
|
||||
counter-increment: c 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the text below is "1 2" (not including the quotation marks).<p>
|
||||
<div>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment and open-quote</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="style containment cause the open-quote value of the content property are scoped to the element's subtree">
|
||||
<link rel="match" href="reference/quote-scoping-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-style">
|
||||
|
||||
<style>
|
||||
|
||||
div {
|
||||
quotes: "A" "Z" "1" "9";
|
||||
}
|
||||
div::before, span::before {
|
||||
content: open-quote;
|
||||
}
|
||||
div::after {
|
||||
content: close-quote;
|
||||
}
|
||||
div {
|
||||
contain: style;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the text below is "A1Z" (not including the quotation marks).<p>
|
||||
<div><span></span></div>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment and close-quote</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="style containment cause the close-quote value of the content property are scoped to the element's subtree">
|
||||
<link rel="match" href="reference/quote-scoping-002-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-style">
|
||||
|
||||
<style>
|
||||
|
||||
div {
|
||||
quotes: "A" "Z" "1" "9";
|
||||
}
|
||||
div::before {
|
||||
content: open-quote;
|
||||
}
|
||||
div::after, span::after {
|
||||
content: close-quote;
|
||||
}
|
||||
div {
|
||||
contain: style;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the text below is "A9Z" (not including the quotation marks).<p>
|
||||
<div><span></span></div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment and no-open-quote</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="style containment cause the no-open-quote value of the content property are scoped to the element's subtree">
|
||||
<link rel="match" href="reference/quote-scoping-003-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-style">
|
||||
|
||||
<style>
|
||||
|
||||
div {
|
||||
quotes: "A" "Z" "1" "9";
|
||||
}
|
||||
div::before{
|
||||
content: open-quote;
|
||||
}
|
||||
|
||||
span::before {
|
||||
content: no-open-quote;
|
||||
}
|
||||
div::after {
|
||||
content: close-quote;
|
||||
}
|
||||
div {
|
||||
contain: style;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the text below is "AZ" (not including the quotation marks).<p>
|
||||
<div><span></span></div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment and no-close-quote</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="style containment cause the no-close-quote value of the content property are scoped to the element's subtree">
|
||||
<link rel="match" href="reference/quote-scoping-003-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain/#containment-style">
|
||||
|
||||
<style>
|
||||
|
||||
div {
|
||||
quotes: "A" "Z" "1" "9";
|
||||
}
|
||||
div::before{
|
||||
content: open-quote;
|
||||
}
|
||||
|
||||
span::after {
|
||||
content: no-close-quote;
|
||||
}
|
||||
div::after {
|
||||
content: close-quote;
|
||||
}
|
||||
div {
|
||||
contain: style;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the text below is "AZ" (not including the quotation marks).<p>
|
||||
<div><span></span></div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test referene</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="ahem">
|
||||
|
||||
<style>
|
||||
rb {
|
||||
font-family: ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
rb::before {
|
||||
content: "X";
|
||||
color: green;
|
||||
}
|
||||
rb::after {
|
||||
content: "X";
|
||||
color: white;
|
||||
position: absolute;
|
||||
top:0; left: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if you can see a green box below.
|
||||
<div><ruby><rb></rb></ruby></div>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!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">
|
||||
<meta name=flags content="ahem">
|
||||
|
||||
<style>
|
||||
rtc {
|
||||
display: ruby-text-container;
|
||||
font-family: ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
rtc::before {
|
||||
content: "X";
|
||||
color: green;
|
||||
}
|
||||
rtc::after {
|
||||
content: "X";
|
||||
color: white;
|
||||
position: absolute;
|
||||
top:0; left: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if you can see a green box below.
|
||||
<div><ruby><rtc></rtc></ruby></div>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!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">
|
||||
<meta name=flags content="ahem">
|
||||
|
||||
<style>
|
||||
rt {
|
||||
display: ruby-text;
|
||||
font-family: ahem;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
rt::before {
|
||||
content: "X";
|
||||
color: green;
|
||||
}
|
||||
rt::after {
|
||||
content: "X";
|
||||
color: white;
|
||||
position: absolute;
|
||||
top:0; left: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if you can see a green box below.
|
||||
<div><ruby><rt></rt></ruby></div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!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">
|
||||
<meta name=flags content="">
|
||||
|
||||
<style>
|
||||
article {
|
||||
columns: 2 20px;
|
||||
float: left;
|
||||
height: 50px;
|
||||
column-fill: auto;
|
||||
}
|
||||
article > div {
|
||||
break-before: column;
|
||||
border-top: 20px solid orange;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are two orange boxes below.
|
||||
<article>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</article>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: paint containment use the padding edge</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
padding: 50px;
|
||||
border-radius: 100px;
|
||||
border: white 50px solid;
|
||||
overflow: hidden
|
||||
}
|
||||
div::before {
|
||||
content:"";
|
||||
display: block;
|
||||
background: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
div::after {
|
||||
content:"";
|
||||
display: block;
|
||||
background: red;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
float: left;
|
||||
margin-top: 36px;
|
||||
margin-left: -86px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a green square in a rounded blue box, and no red.
|
||||
<div></div>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<!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>This test passes if you can see no number below.
|
||||
|
|
@ -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>
|
||||
rtc {
|
||||
display: ruby-text-container;
|
||||
font-size: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if you can see the word PASS below.
|
||||
<div><ruby><rtc>PASS</rtc></ruby></div>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: paint containment on ruby-text</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
|
||||
<style>
|
||||
rt {
|
||||
display: ruby-text;
|
||||
font-size: 1rem;
|
||||
position: relative;
|
||||
left: 4ch;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if you can see the word PASS below.
|
||||
<div><ruby><rt>PASS</rt></ruby></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>This test passes if you can see the word PASS below.
|
||||
<div>PASS</div>
|
||||
|
|
@ -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>
|
||||
rtc {
|
||||
display: ruby-text-container;
|
||||
font-size: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if you can see the word PASS below.
|
||||
<div><ruby><rtc>PASS</rtc></ruby></div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!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>
|
||||
div { overflow: hidden; }
|
||||
rt {
|
||||
display: ruby-text;
|
||||
font-size: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if you can see the word PASS below.
|
||||
<div><ruby><rt>PASS</rt></ruby></div>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!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">
|
||||
<meta name=flags content="ahem">
|
||||
|
||||
<style>
|
||||
article {
|
||||
height: 2.5em;
|
||||
column-gap: 0;
|
||||
columns: 3 1em;
|
||||
width: 3em;
|
||||
column-fill: auto;
|
||||
|
||||
font-size: 40px;
|
||||
font-family: ahem;
|
||||
line-height: 1;
|
||||
}
|
||||
div {
|
||||
background: orange;
|
||||
padding-top: 5em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if there is an orange rectangle below. If the shape is not a rectangle, the test fails.
|
||||
|
||||
<article>
|
||||
<div></div>
|
||||
</article>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!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>
|
||||
article {
|
||||
columns: 2 1ch;
|
||||
column-gap: 0;
|
||||
float: left;
|
||||
font-family: monospace;
|
||||
margin-right: 3em;
|
||||
}
|
||||
div {
|
||||
page-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are two identical blocks “A” letters below.
|
||||
<article>
|
||||
<div>
|
||||
A<br>
|
||||
A<br>
|
||||
A<br>
|
||||
A
|
||||
<div>
|
||||
</article>
|
||||
<article>
|
||||
<div>
|
||||
A<br>
|
||||
A<br>
|
||||
A<br>
|
||||
A
|
||||
<div>
|
||||
</article>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!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>
|
||||
article {
|
||||
columns: 2 1ch;
|
||||
column-gap: 0;
|
||||
float: left;
|
||||
font-family: monospace;
|
||||
margin-right: 3em;
|
||||
line-height: 1;
|
||||
height: 4em;
|
||||
column-fill: auto;
|
||||
}
|
||||
div:last-of-type {
|
||||
break-before: column;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are two identical blocks “A” letters below.
|
||||
<article>
|
||||
<div>A<br>A</div>
|
||||
<div>A<br>A</div>
|
||||
</article>
|
||||
<article>
|
||||
<div>A<br>A</div>
|
||||
<div>A<br>A</div>
|
||||
</article>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!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,9 @@
|
|||
<!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,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 "A1Z" (not including the quotation marks).<p>
|
||||
<div>A1Z</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 "A9Z" (not including the quotation marks).<p>
|
||||
<div>A9Z</span></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 "AZ" (not including the quotation marks).<p>
|
||||
<div>AZ</div>
|
||||
|
|
@ -23,15 +23,15 @@ var styleValidTests = {
|
|||
'calc(0 - 100)',
|
||||
'calc(200 + 801)',
|
||||
],
|
||||
'stretch': ['51%', '199%', 'calc(10% + 20%)'],
|
||||
'stretch': ['51%', '199%', 'calc(10% + 20%)', '0%'],
|
||||
'style' : [ 'normal', 'italic', 'oblique', 'oblique 50deg', 'oblique -90deg', 'oblique 90deg',
|
||||
'oblique calc(30deg + 20deg)' ]
|
||||
'oblique calc(90deg + 20deg)', 'oblique calc(30deg + 20deg)' ]
|
||||
};
|
||||
|
||||
var styleInvalidTests = {
|
||||
'weight': ['100 400'],
|
||||
'stretch': ['100% 110%', '0%', '100% 150%', 'calc(1 + 10%)'],
|
||||
'style' : [ 'normal 10deg', 'italic 10deg', 'oblique -91deg', 'oblique 91deg', 'oblique calc(90deg + 20deg)']
|
||||
'stretch': ['100% 110%', '100% 150%', 'calc(1 + 10%)'],
|
||||
'style' : [ 'normal 10deg', 'italic 10deg', 'oblique -91deg', 'oblique 91deg' ]
|
||||
};
|
||||
|
||||
function testParseStyle() {
|
||||
|
|
@ -63,9 +63,12 @@ var faceTests = {
|
|||
'weight': [
|
||||
['100', '100'], ['700', '700'], ['900', '900'], ['bold', 'bold'],
|
||||
['normal', 'normal'], ['100 400', '100 400'], ['100 101.5', '100 101.5'],
|
||||
['999.8 999.9', '999.8 999.9']
|
||||
['999.8 999.9', '999.8 999.9'],
|
||||
[ '500 400', '500 400']
|
||||
],
|
||||
'stretch': [
|
||||
['0%', '0%'],
|
||||
['calc(0% - 10%)', 'calc(-10%)' ],
|
||||
['100%', '100%'],
|
||||
['110%', '110%'],
|
||||
['111.5%', '111.5%'],
|
||||
|
|
@ -90,7 +93,6 @@ var faceInvalidTests = {
|
|||
'0.9',
|
||||
'-100 200',
|
||||
'100 -200',
|
||||
'500 400',
|
||||
'100 1001',
|
||||
'1001',
|
||||
'1000.5',
|
||||
|
|
@ -99,7 +101,7 @@ var faceInvalidTests = {
|
|||
'a b c',
|
||||
],
|
||||
'stretch': [
|
||||
'-0.5%', '-1%', '0%', 'calc(0% - 10%)', '60% 70% 80%', 'a%', 'a b c', '0.1',
|
||||
'-0.5%', '-1%', '60% 70% 80%', 'a%', 'a b c', '0.1',
|
||||
'-60% 80%', 'ultra-expannnned', '50% 0'
|
||||
],
|
||||
'style' : [ 'oblique 100deg', 'oblique italic', 'oblique -91deg', 'oblique 0',
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
{ value: "oblique calc(900 + 300) 24px Arial", isValid:true, expectedStyle: "oblique", expectedWeight:"1000", message: "'oblique' followed by a to-be-clamped calc() weight" },
|
||||
{ value: "calc(200 + 300) oblique 24px Arial", isValid:true, expectedStyle: "oblique", expectedWeight:"500", message: "calc() weight folowed by 'oblique'" },
|
||||
{ value: "calc(200 + 300) oblique 45deg 24px Arial", isValid:true, expectedStyle: "oblique 45deg", expectedWeight:"500", message: "calc() weight folowed by 'oblique' and slant angle" },
|
||||
{ value: "calc(900 + 300) oblique 45deg 24px Arial", isValid:true, expectedStyle: "oblique", expectedWeight:"1000", message: "To-be-clamped calc() weight folowed by 'oblique' and slant angle" },
|
||||
{ value: "calc(900 + 300) oblique 45deg 24px Arial", isValid:true, expectedStyle: "oblique 45deg", expectedWeight:"1000", message: "To-be-clamped calc() weight folowed by 'oblique' and slant angle" },
|
||||
];
|
||||
|
||||
testFontShorthand.forEach(function (testCase) {
|
||||
|
|
|
|||
1
tests/wpt/web-platform-tests/css/css-position/OWNERS
Normal file
1
tests/wpt/web-platform-tests/css/css-position/OWNERS
Normal file
|
|
@ -0,0 +1 @@
|
|||
@atanassov
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: overflow-wrap: break-word+break-spaces</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-spaces">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="match" href="reference/overflow-wrap-break-word-002-ref.html">
|
||||
<meta name="assert" content="break-word + break-spaces do not allow a break
|
||||
between the last character of a word and the first space of a sequence of preserved spaces
|
||||
if there are other wrapping opportunities earlier in the line">
|
||||
<style>
|
||||
div {
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word break-spaces;
|
||||
font-family: monospace;
|
||||
width: 5ch;
|
||||
line-height: 1;
|
||||
overflow: hidden;
|
||||
height: 1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if there is nothing below this sentence.
|
||||
<div> FAIL <div>
|
||||
<!--
|
||||
white-space:pre-wrap + overflow:break-spaces should cause the spaces at the end of the line to be preserved.
|
||||
Since there is an allowed break point between the first space and the F,
|
||||
that's where the line should wrap,
|
||||
not between the L and the subsequent space.
|
||||
-->
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: overflow-wrap: break-word+break-spaces</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-spaces">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="match" href="reference/overflow-wrap-break-word-003-ref.html">
|
||||
<meta name="assert" content="break-word + break-spaces do allow a break
|
||||
between the last character of a word and the first space of a sequence of preserved spaces
|
||||
if there are no other wrapping opportunities earlier in the line">
|
||||
<style>
|
||||
div {
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word break-spaces;
|
||||
font-family: monospace;
|
||||
width: 4ch;
|
||||
line-height: 1;
|
||||
overflow: hidden;
|
||||
height: 2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if the word FAIL does not appear below.
|
||||
<div>PASS FAIL<div>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
|
||||
<p>This test passes if there is nothing below this sentence.
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: overflow-wrap: break-word+break-spaces</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<style>
|
||||
div {
|
||||
font-family: monospace;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if the word FAIL does not appear below.
|
||||
<div>PASS<div>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
checkDOMPoint(new DOMPoint(), {x:0, y:0, z:0, w:1});
|
||||
},'testConstructor0');
|
||||
test(function() {
|
||||
assert_throws(new TypeError(), function() { new DOMPoint(1);})
|
||||
checkDOMPoint(new DOMPoint(1), {x:1, y:0, z:0, w:1});
|
||||
},'testConstructor1');
|
||||
test(function() {
|
||||
checkDOMPoint(new DOMPoint(1, 2), {x:1, y:2, z:0, w:1});
|
||||
|
|
@ -72,11 +72,11 @@
|
|||
checkDOMPoint(new DOMPoint({x:"a", y:"b"}), {x:NaN, y:NaN, z:0, w:1});
|
||||
},'testConstructorUndefined2');
|
||||
test(function() {
|
||||
assert_throws(new TypeError(), function() { new DOMPointReadOnly();})
|
||||
},'testConstructorIllegal1');
|
||||
checkDOMPoint(new DOMPointReadOnly(), {x:0, y:0, z:0, w:1});
|
||||
},'DOMPointReadOnly constructor with no values');
|
||||
test(function() {
|
||||
assert_throws(new TypeError(), function() { new DOMPointReadOnly(1, 2, 3, 4);})
|
||||
},'testConstructorIllegal2');
|
||||
checkDOMPoint(new DOMPointReadOnly(1, 2, 3, 4), {x:1, y:2, z:3, w:4});
|
||||
},'DOMPointReadOnly constructor with 4 values');
|
||||
test(function() {
|
||||
var p = new DOMPoint(0, 0, 0, 1);
|
||||
p.x = undefined;
|
||||
|
|
|
|||
|
|
@ -129,15 +129,6 @@
|
|||
return q;
|
||||
}, initial, 'boundsAttribute0');
|
||||
|
||||
checkDOMQuad(function() {
|
||||
var q = new DOMQuad({}, {}, {}, {});
|
||||
q.bounds.x = 10;
|
||||
q.bounds.y = 10;
|
||||
q.bounds.width = 100;
|
||||
q.bounds.height = 100;
|
||||
return q;
|
||||
}, initial, 'boundsAttribute1');
|
||||
|
||||
function checkDOMQuad(createQuad, exp, name) {
|
||||
test(function() {
|
||||
var q = createQuad();
|
||||
|
|
@ -161,10 +152,10 @@
|
|||
|
||||
test(function() {
|
||||
var q = createQuad();
|
||||
assert_equals(q.bounds.x, exp.bounds.x, "Expected value for bounds.x is " + exp.bounds.x);
|
||||
assert_equals(q.bounds.y, exp.bounds.y, "Expected value for bounds.y is " + exp.bounds.y);
|
||||
assert_equals(q.bounds.width, exp.bounds.width, "Expected value for bounds.width is " + exp.bounds.width);
|
||||
assert_equals(q.bounds.height, exp.bounds.height, "Expected value for bounds.height is " + exp.bounds.height);
|
||||
assert_equals(q.getBounds().x, exp.bounds.x, "Expected value for getBounds().x is " + exp.bounds.x);
|
||||
assert_equals(q.getBounds().y, exp.bounds.y, "Expected value for getBounds().y is " + exp.bounds.y);
|
||||
assert_equals(q.getBounds().width, exp.bounds.width, "Expected value for getBounds().width is " + exp.bounds.width);
|
||||
assert_equals(q.getBounds().height, exp.bounds.height, "Expected value for getBounds().height is " + exp.bounds.height);
|
||||
}, name + ": bounds");
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,8 @@
|
|||
['DOMMatrix', 'rotateAxisAngleBy'],
|
||||
['DOMMatrix', 'skewXBy'],
|
||||
['DOMMatrix', 'skewYBy'],
|
||||
// https://github.com/w3c/fxtf-drafts/commit/555a8c0beb1b7b809ccebd861a0352df31530b56
|
||||
['DOMQuad', 'bounds'],
|
||||
].forEach(([interf, member]) => {
|
||||
test(() => {
|
||||
assert_true(interf in self, `${interf} should exist`);
|
||||
|
|
|
|||
|
|
@ -1 +1,2 @@
|
|||
@dbaron
|
||||
@Ms2ger
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue