mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-05-05 06:32:30 +02:00
LibWeb: Make style containment influence quotes
This commit is contained in:
Psychpsyo
Notes:
github-actions[bot]
2025-02-06 17:45:51 +00:00
Author: https://github.com/Psychpsyo Commit: https://github.com/LadybirdBrowser/ladybird/commit/402d8220dd5 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3480 Reviewed-by: https://github.com/AtkinsSJ ✅
@@ -0,0 +1,28 @@
|
||||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment and open-quote</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="style containment cause the open-quote value of the content property are scoped to the element's subtree">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/quote-scoping-001-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">
|
||||
|
||||
<style>
|
||||
|
||||
div {
|
||||
quotes: "A" "Z" "1" "9";
|
||||
}
|
||||
div::before, span::before {
|
||||
content: open-quote;
|
||||
}
|
||||
div::after {
|
||||
content: close-quote;
|
||||
}
|
||||
span {
|
||||
contain: style;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the text below is "A1Z" (not including the quotation marks).<p>
|
||||
<div><span></span></div>
|
||||
@@ -0,0 +1,28 @@
|
||||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment and close-quote</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="style containment cause the close-quote value of the content property are scoped to the element's subtree">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/quote-scoping-002-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">
|
||||
|
||||
<style>
|
||||
|
||||
div {
|
||||
quotes: "A" "Z" "1" "9";
|
||||
}
|
||||
div::before {
|
||||
content: open-quote;
|
||||
}
|
||||
div::after, span::after {
|
||||
content: close-quote;
|
||||
}
|
||||
span {
|
||||
contain: style;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the text below is "AZZ" (not including the quotation marks).<p>
|
||||
<div><span></span></div>
|
||||
@@ -0,0 +1,32 @@
|
||||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment and no-open-quote</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="style containment cause the no-open-quote value of the content property are scoped to the element's subtree">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/quote-scoping-003-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">
|
||||
|
||||
<style>
|
||||
|
||||
div {
|
||||
quotes: "A" "Z" "1" "9";
|
||||
}
|
||||
div::before{
|
||||
content: open-quote;
|
||||
}
|
||||
|
||||
span::before {
|
||||
content: no-open-quote;
|
||||
}
|
||||
div::after {
|
||||
content: close-quote;
|
||||
}
|
||||
span {
|
||||
contain: style;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the text below is "AZ" (not including the quotation marks).<p>
|
||||
<div><span></span></div>
|
||||
@@ -0,0 +1,32 @@
|
||||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment and no-close-quote</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="style containment cause the no-close-quote value of the content property are scoped to the element's subtree">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/quote-scoping-003-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">
|
||||
|
||||
<style>
|
||||
|
||||
div {
|
||||
quotes: "A" "Z" "1" "9";
|
||||
}
|
||||
div::before{
|
||||
content: open-quote;
|
||||
}
|
||||
|
||||
span::after {
|
||||
content: no-close-quote;
|
||||
}
|
||||
div::after {
|
||||
content: close-quote;
|
||||
}
|
||||
span {
|
||||
contain: style;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the text below is "AZ" (not including the quotation marks).<p>
|
||||
<div><span></span></div>
|
||||
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang=en>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: nested style containment and the quote element following a style boundary without any quotes</title>
|
||||
<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/quote-scoping-empty-style-boundaries-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">
|
||||
|
||||
<div style="contain: style;">
|
||||
<div style="contain: style;">
|
||||
<q></q>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,35 @@
|
||||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment dynamic containment set invalidation</title>
|
||||
<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/quote-scoping-invalidation-001-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-style">
|
||||
|
||||
<style>
|
||||
#root {
|
||||
quotes: "A" "Z" "1" "9" "(" ")" "+" "-";
|
||||
}
|
||||
#root::before, #root span::before {
|
||||
content: open-quote;
|
||||
}
|
||||
#root::after {
|
||||
content: close-quote;
|
||||
}
|
||||
.contain-style {
|
||||
contain: style;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the text below is "A1(19" (not including the quotation marks).<p>
|
||||
<div id="root">
|
||||
<div id="scope">
|
||||
<span id="span1"></span>
|
||||
<span id="span2"></span>
|
||||
</div>
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
scope.style.contain = "style";
|
||||
</script>
|
||||
@@ -0,0 +1,37 @@
|
||||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment dynamic containment set unset invalidation</title>
|
||||
<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/quote-scoping-invalidation-002-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-style">
|
||||
|
||||
<style>
|
||||
#root {
|
||||
quotes: "A" "Z" "1" "9" "(" ")" "+" "-";
|
||||
}
|
||||
#root::before, #root span::before {
|
||||
content: open-quote;
|
||||
}
|
||||
#root::after {
|
||||
content: close-quote;
|
||||
}
|
||||
.contain-style {
|
||||
contain: style;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the text below is "A1(+-" (not including the quotation marks).<p>
|
||||
<div id="root">
|
||||
<div id="scope">
|
||||
<span id="span1"></span>
|
||||
<span id="span2"></span>
|
||||
</div>
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
scope.style.contain = "style";
|
||||
document.body.offsetTop;
|
||||
scope.style.contain = "";
|
||||
</script>
|
||||
@@ -0,0 +1,41 @@
|
||||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment dynamic containment set unset set invalidation</title>
|
||||
<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/quote-scoping-invalidation-003-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-style">
|
||||
|
||||
<style>
|
||||
#root {
|
||||
quotes: "A" "Z" "1" "9" "(" ")" "+" "-";
|
||||
}
|
||||
#root::before, #root span::before {
|
||||
content: open-quote;
|
||||
}
|
||||
#root::after {
|
||||
content: close-quote;
|
||||
}
|
||||
.contain-style {
|
||||
contain: style;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the text below is "A119" (not including the quotation marks).<p>
|
||||
<div id="root">
|
||||
<div id="scope">
|
||||
<span id="span1"></span>
|
||||
<span id="span2"></span>
|
||||
</div>
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
scope.style.contain = "style";
|
||||
document.body.offsetTop;
|
||||
scope.style.contain = "";
|
||||
document.body.offsetTop;
|
||||
scope.style.contain = "style";
|
||||
document.body.offsetTop;
|
||||
span1.remove();
|
||||
</script>
|
||||
@@ -0,0 +1,40 @@
|
||||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-contain test: style containment invalidation with elements in different subtrees</title>
|
||||
<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/quote-scoping-invalidation-004-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-style">
|
||||
|
||||
<style>
|
||||
#root {
|
||||
quotes: "A" "Z" "1" "9" "(" ")" "+" "-";
|
||||
}
|
||||
#root::before, #root span::before {
|
||||
content: open-quote;
|
||||
}
|
||||
#root::after {
|
||||
content: close-quote;
|
||||
}
|
||||
.contain-style {
|
||||
contain: style;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the text below is "A111119" (not including the quotation marks).<p>
|
||||
<div id="root">
|
||||
<div class="contain-style">
|
||||
<span id="span1"></span>
|
||||
<span id="span2"></span>
|
||||
</div>
|
||||
<div class="contain-style">
|
||||
<span id="span3"></span>
|
||||
<span id="span4"></span>
|
||||
</div>
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
span1.className = "contain-style";
|
||||
span3.className = "contain-style";
|
||||
</script>
|
||||
Reference in New Issue
Block a user