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, size, paint containment don't apply to internal…

… ruby boxes

These tests correspond to the spec changes from
w3c/csswg-drafts#2512
  • Loading branch information...
frivoal committed Apr 20, 2018
commit ba5a04e3d65f9f39c2d6431a9ece5eb15d22116b
@@ -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,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,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,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>
Oops, something went wrong.
ProTip! Use n and p to navigate between commits in a pull request.