New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Css contain #10549

Merged
merged 10 commits into from Apr 25, 2018

[css-contain] Check no effect of style containment on break properties

Corresponds to the spec changes of
w3c/csswg-drafts#1872
  • Loading branch information...
frivoal committed Apr 20, 2018
commit d6a4f606a0501fe6ca526483a7a379ba2e9eaa1c
@@ -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,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>
ProTip! Use n and p to navigate between commits in a pull request.