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] layout and paint containment do not apply to non-atomic…

… inline

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