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] Paint containment test

Checks the spec change resolved on in
w3c/csswg-drafts#2223
  • Loading branch information...
frivoal committed Apr 20, 2018
commit e2f844700a4a165f7ab6a0f021bbe1bf4d921cc0
@@ -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,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>
ProTip! Use n and p to navigate between commits in a pull request.