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
Prev

[css-contain] Fragmentation tests

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