Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Css contain #10549

Merged
merged 10 commits into from
Apr 25, 2018
Merged

Css contain #10549

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
d7fbc47
[css-contain] tests for style containment and counters
frivoal Apr 20, 2018
7aad64a
[css-contain] test for the root of property scoped to a subtree
frivoal Apr 20, 2018
f6efd2f
[css-contain] style containment tests for the [no-]?[open|close]-quote
frivoal Apr 20, 2018
d6a4f60
[css-contain] Check no effect of style containment on break properties
frivoal Apr 20, 2018
e2f8447
[css-contain] Paint containment test
frivoal Apr 20, 2018
69b5681
[css-contain] size containment test
frivoal Apr 20, 2018
402a19b
[css-contain] layout and paint containment do not apply to non-atomic…
frivoal Apr 20, 2018
5b92ee3
[css-contain] Paint containment test
frivoal Apr 20, 2018
ba5a04e
[css-contain] Layout, size, paint containment don't apply to internal…
frivoal Apr 20, 2018
536f74e
[css-contain] Fragmentation tests
frivoal Apr 20, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Prev Previous commit
Next Next commit
[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
frivoal committed Apr 20, 2018
commit ba5a04e3d65f9f39c2d6431a9ece5eb15d22116b
32 changes: 32 additions & 0 deletions css/css-contain/contain-layout-002.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
32 changes: 32 additions & 0 deletions css/css-contain/contain-layout-003.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
32 changes: 32 additions & 0 deletions css/css-contain/contain-layout-004.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
32 changes: 32 additions & 0 deletions css/css-contain/contain-layout-005.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
24 changes: 24 additions & 0 deletions css/css-contain/contain-paint-005.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
24 changes: 24 additions & 0 deletions css/css-contain/contain-paint-006.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
25 changes: 25 additions & 0 deletions css/css-contain/contain-paint-007.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
32 changes: 32 additions & 0 deletions css/css-contain/contain-paint-008.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
24 changes: 24 additions & 0 deletions css/css-contain/contain-size-002.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
24 changes: 24 additions & 0 deletions css/css-contain/contain-size-003.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
25 changes: 25 additions & 0 deletions css/css-contain/contain-size-004.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
25 changes: 25 additions & 0 deletions css/css-contain/contain-size-005.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
27 changes: 27 additions & 0 deletions css/css-contain/reference/contain-layout-002-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
28 changes: 28 additions & 0 deletions css/css-contain/reference/contain-layout-004-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>