mirror of
https://github.com/servo/servo.git
synced 2025-08-25 15:18:22 +01:00
Update web-platform-tests to revision add24188a1226f3598ad6b455e71641c9ac6a5fd
This commit is contained in:
WPT Sync Bot
parent
4cf39a696d
commit
6ed2abf735
80 changed files with 2127 additions and 133 deletions
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Containment Test: a block with 'contain: content' alongside a float</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#contain-property">
|
||||
<link rel="match" href="reference/contain-layout-ifc-022-ref.html">
|
||||
|
||||
<meta content="" name="flags">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
color: transparent;
|
||||
font-size: 16px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
div#floated-left
|
||||
{
|
||||
background-color: blue;
|
||||
float: left;
|
||||
margin: 8px;
|
||||
width: 6em;
|
||||
}
|
||||
|
||||
div#with-contain-content
|
||||
{
|
||||
background-color: orange;
|
||||
width: 12em;
|
||||
|
||||
contain: content;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<p>Test passes if the orange rectangle and blue rectangle do not overlap.
|
||||
|
||||
<div id="floated-left">Some text in a blue rectangle.</div>
|
||||
|
||||
<div id="with-contain-content">Some text in an orange rectangle. Some text in an orange rectangle. Some text in an orange rectangle.</div>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Containment Test: 'contain: content' and margin collapsing</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#contain-property">
|
||||
<link rel="match" href="reference/contain-paint-ifc-011-ref.html">
|
||||
|
||||
<meta content="This test checks that a block element with 'contain: content' establishes a new block formatting context which is independent and separate from others. This causes margin collapsing to be ineffective among vertically-adjacent boxes. In this test, the top margin of parent boxes and top margin of their respective first in-flow child do not collapse. Also, in this test, the bottom margin of the last in-flow child of boxes and bottom margin of their respective parent boxes do not collapse." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
contain: content;
|
||||
margin: 30px 0px;
|
||||
}
|
||||
|
||||
div#grand-grand-parent-orange
|
||||
{
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
div#grand-parent-blue
|
||||
{
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
div#parent-lime
|
||||
{
|
||||
background-color: lime;
|
||||
}
|
||||
|
||||
div#collapse-through-child /* margin collapsing through element */
|
||||
{
|
||||
contain: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are 5 horizontal stripes across the page in this order (from top to bottom): an orange stripe, a blue stripe, a bright green stripe, a blue stripe and then an orange stripe.
|
||||
|
||||
<div id="grand-grand-parent-orange">
|
||||
|
||||
<div id="grand-parent-blue">
|
||||
|
||||
<div id="parent-lime">
|
||||
|
||||
<div id="collapse-through-child"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Containment Test: element with 'contain: content' and absolutely positioned descendants</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that an element with 'contain: content' acts as containing block for its absolutely positioned descendants.">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
div#contain-content
|
||||
{
|
||||
background-color: red;
|
||||
contain: content;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
div.abspos
|
||||
{
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
div#first-abspos
|
||||
{
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
div#second-abspos
|
||||
{
|
||||
bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.
|
||||
|
||||
<div id="contain-content">
|
||||
<div id="first-abspos" class="abspos"></div>
|
||||
<div id="second-abspos" class="abspos"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Containment Test: 'contain: content' applies to 'table-cell' elements</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">
|
||||
<link rel="match" href="reference/contain-layout-cell-001-ref.html">
|
||||
|
||||
<meta content="In this test, the td#contain should act as the containing block for div#abs-pos ." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
table
|
||||
{
|
||||
background-color: blue;
|
||||
border-spacing: 2px;
|
||||
height: 206px;
|
||||
table-layout: fixed;
|
||||
width: 206px;
|
||||
}
|
||||
|
||||
td
|
||||
{
|
||||
background-color: white;
|
||||
padding: 0px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
td#contain
|
||||
{
|
||||
contain: content;
|
||||
}
|
||||
|
||||
span
|
||||
{
|
||||
background-color: red;
|
||||
color: yellow;
|
||||
font-family: monospace;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
div#abs-pos
|
||||
{
|
||||
background-color: green;
|
||||
color: white;
|
||||
font-family: monospace;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is the word PASS and if there is <strong>no red</strong>.
|
||||
|
||||
<table>
|
||||
|
||||
<tr><td> <td>
|
||||
|
||||
<tr><td> <td id="contain"><span>FAIL</span><div id="abs-pos">PASS</div>
|
||||
|
||||
</table>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Containment Test: 'contain: content' does not turn on style containment</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
|
||||
<link rel="match" href="reference/contain-content-011-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="'contain: content' does not turn on style containment. So, in this test, the counter of div.abspos child should not be reset and must not be reset.">
|
||||
|
||||
<style>
|
||||
body
|
||||
{
|
||||
counter-reset: counter-of-abspos-div 17;
|
||||
}
|
||||
|
||||
/*
|
||||
This creates a new counter identified as
|
||||
"counter-of-abspos-div" and initially sets
|
||||
such counter to 17 (an entirely arbitrary
|
||||
number)
|
||||
*/
|
||||
|
||||
div
|
||||
{
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
|
||||
div#contain-content
|
||||
{
|
||||
background-color: red;
|
||||
contain: content;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
div.abspos
|
||||
{
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
div#contain-content > div.abspos
|
||||
{
|
||||
counter-increment: counter-of-abspos-div 4;
|
||||
}
|
||||
|
||||
/*
|
||||
This increments the counter identified as
|
||||
"counter-of-abspos-div" of the step value
|
||||
of 4 (an entirely arbitrary number) each and
|
||||
every time there is a div.abspos child
|
||||
within the subtree of div#contain-content
|
||||
*/
|
||||
|
||||
div#first-abspos
|
||||
{
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
div#second-abspos
|
||||
{
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
div#result::after
|
||||
{
|
||||
content: counter(counter-of-abspos-div);
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
/*
|
||||
Now, the generated content is set to the
|
||||
current value of the counter identified
|
||||
as "counter-of-abspos-div":
|
||||
17 + 4 * 2 == 25
|
||||
*/
|
||||
</style>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is a filled green square, no red and the number 25.
|
||||
|
||||
<div id="contain-content">
|
||||
<div id="first-abspos" class="abspos"></div>
|
||||
<div id="second-abspos" class="abspos"></div>
|
||||
</div>
|
||||
|
||||
<div id="result"></div>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Containment Test: 'contain: strict' does not turn on style containment</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
|
||||
<link rel="match" href="reference/contain-strict-011-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="'contain: strict' does not turn on style containment. So, in this test, the counter of spans should not be reset and must not be reset.">
|
||||
|
||||
<style>
|
||||
body
|
||||
{
|
||||
counter-reset: counter-of-span 17;
|
||||
}
|
||||
|
||||
/*
|
||||
This creates a new counter identified as "counter-of-span"
|
||||
and initially sets such counter to 17 (an entirely
|
||||
arbitrary number)
|
||||
*/
|
||||
|
||||
div
|
||||
{
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
div > span
|
||||
{
|
||||
background-color: yellow;
|
||||
color: red;
|
||||
counter-increment: counter-of-span 3;
|
||||
}
|
||||
|
||||
/*
|
||||
This increments the counter identified as "counter-of-span"
|
||||
of the step value of 3 (an entirely arbitrary number) each
|
||||
and every time there is a <span> child within the subtree
|
||||
of div
|
||||
*/
|
||||
|
||||
p#test::after
|
||||
{
|
||||
content: counter(counter-of-span);
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
/*
|
||||
Now, the generated content is set to the current
|
||||
value of the counter identified as "counter-of-span":
|
||||
17 + 3 * 3 == 26
|
||||
*/
|
||||
</style>
|
||||
|
||||
<body>
|
||||
|
||||
<div><span>FAIL1</span> <span>FAIL2</span> <span>FAIL3</span></div>
|
||||
|
||||
<p id="pass-fail-conditions-sentence">Test passes if there is the number 26.
|
||||
|
||||
<p id="test">
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reference Test</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<style>
|
||||
div#green-square
|
||||
{
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
div#result
|
||||
{
|
||||
font-size: 3em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square, no red and the number 25.
|
||||
|
||||
<div id="green-square"></div>
|
||||
|
||||
<div id="result">25</div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reference Test</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<style>
|
||||
p
|
||||
{
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
font-size: 3em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is the number 26.
|
||||
|
||||
<div>26</div>
|
||||
|
|
@ -136,6 +136,15 @@ test(function(){
|
|||
element.style = '';
|
||||
}, 'Lists with relative units are absolutized when substituting');
|
||||
|
||||
test(function(){
|
||||
let length = generate_property('none | <length>');
|
||||
let universal = generate_property('*');
|
||||
element.style = `font-size: 10px; ${length}: 10em; ${universal}: var(${length})`;
|
||||
let computedStyle = getComputedStyle(element);
|
||||
assert_equals(computedStyle.getPropertyValue(universal), ' 100px');
|
||||
element.style = '';
|
||||
}, 'Values are absolutized when substituting into properties with universal syntax');
|
||||
|
||||
function test_valid_fallback(syntax, value, fallback) {
|
||||
test(function(){
|
||||
let name = generate_property(syntax);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>text-decoration underline</title>
|
||||
<meta name="assert" content="text-decoration:underline; there is a line at or under the alphabetic baseline">
|
||||
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#line-decoration">
|
||||
<!-- cosmetic styling -->
|
||||
<style>
|
||||
#htmlsrc { margin: 2em; }
|
||||
#htmlsrc p {
|
||||
font-size: 28px;
|
||||
border-radius: 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
<!-- the test -->
|
||||
<style>
|
||||
div span {
|
||||
text-decoration:underline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">Test passes if there is a line at or under the alphabetic baseline.</p>
|
||||
<div id="htmlsrc">
|
||||
|
||||
<div>
|
||||
<p lang="en"><span>The quick brown fox jumps over the lazy dog.</span></p>
|
||||
</div> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>text-decoration overline</title>
|
||||
<meta name="assert" content="text-decoration:overline; there is an overline">
|
||||
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#line-decoration">
|
||||
<!-- cosmetic styling -->
|
||||
<style>
|
||||
#htmlsrc { margin: 2em; }
|
||||
#htmlsrc p {
|
||||
font-size: 28px;
|
||||
border-radius: 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
<!-- the test -->
|
||||
<style>
|
||||
div span {
|
||||
text-decoration:overline;
|
||||
}</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">Test passes if there is an overline.</p>
|
||||
<div id="htmlsrc">
|
||||
|
||||
<div>
|
||||
<p lang="en"><span>The quick brown fox jumps over the lazy dog.</span></p>
|
||||
</div> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>text-decoration line-through</title>
|
||||
<meta name="assert" content="text-decoration:line-through; there is a solid line through the centre of the characters">
|
||||
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#line-decoration">
|
||||
<!-- cosmetic styling -->
|
||||
<style>
|
||||
#htmlsrc { margin: 2em; }
|
||||
#htmlsrc p {
|
||||
font-size: 28px;
|
||||
border-radius: 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
<!-- the test -->
|
||||
<style>
|
||||
div span {
|
||||
text-decoration:line-through;
|
||||
}</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">Test passes if there is a solid line through the centre of the characters.</p>
|
||||
<div id="htmlsrc">
|
||||
|
||||
<div>
|
||||
<p lang="en"><span>The quick brown fox jumps over the lazy dog.</span></p>
|
||||
</div> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>text-decoration underline overline</title>
|
||||
<meta name="assert" content="text-decoration:underline overline; there is an overline and an underline">
|
||||
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#line-decoration">
|
||||
<!-- cosmetic styling -->
|
||||
<style>
|
||||
#htmlsrc { margin: 2em; }
|
||||
#htmlsrc p {
|
||||
font-size: 28px;
|
||||
border-radius: 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
<!-- the test -->
|
||||
<style>
|
||||
div span {
|
||||
text-decoration:underline overline;
|
||||
}</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">Test passes if there is an overline and an underline.</p>
|
||||
<div id="htmlsrc">
|
||||
|
||||
<div>
|
||||
<p lang="en"><span>The quick brown fox jumps over the lazy dog.</span></p>
|
||||
</div> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>text-decoration underline tbrl hor scripts</title>
|
||||
<meta name="assert" content="text-decoration:underline; there is a line to the LEFT of the characters for horizontal scripts set vertically using writing-mode: vertical-rl">
|
||||
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#line-decoration">
|
||||
<!-- cosmetic styling -->
|
||||
<style>
|
||||
#htmlsrc { margin: 2em; }
|
||||
#htmlsrc p {
|
||||
font-size: 28px;
|
||||
border-radius: 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.hint { color: brown; font-family: sans-serif; font-size: 90%; }
|
||||
.hint:before { content: '❗ '; }
|
||||
:lang(mn) { font-family: "Mongolian Baiti", "Noto sans Mongolian", serif; }
|
||||
</style>
|
||||
<!-- the test -->
|
||||
<style>
|
||||
div span {
|
||||
text-decoration:underline;
|
||||
}</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">Test passes if there is a line to the LEFT of the characters for all lines.<br/><span class="hint">Skip the test if the text is not vertical.</span></p>
|
||||
<div id="htmlsrc" style="writing-mode:vertical-rl">
|
||||
|
||||
<div>
|
||||
<p lang="en"><span>The quick brown fox jumps over the lazy dog.</span></p>
|
||||
<p lang="ar"><span>وب جهانی را بهدرستی جهانی سازیم!</span></p>
|
||||
<p lang="my"><span>အပြည်ပြည်ဆိုင်ရာလှုပ်ရှားမှု၊</span></p>
|
||||
<p lang="th"><span>กูกินกุ้งปิ้งอยู่ในถ้ำ กูกินกุ้งปิ้งอยู่ในถ้ำ</span></p>
|
||||
<p lang="bo"><span>འཛམ་གླིང་ཡོངས་འབྲེལ་འདི་ ངོ་མ་འབད་རང་ འཛམ་གླིང་ཡོངས་ལུ་ཁྱབ་ཚུགསཔ་བཟོ་བ།</span></p>
|
||||
<p lang="hi"><span>वर्ल्ड वाईड वेब को सचमुच विश्वव्यापी बना रहें हैं !</span></p-->
|
||||
</div> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>text-decoration underline tbrl mixed</title>
|
||||
<meta name="assert" content="text-decoration:underline; there is an unbroken line to the LEFT of the characters for each lines">
|
||||
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#line-decoration">
|
||||
<!-- cosmetic styling -->
|
||||
<style>
|
||||
#htmlsrc { margin: 2em; }
|
||||
#htmlsrc p {
|
||||
font-size: 28px;
|
||||
border-radius: 5px;
|
||||
line-height: 3.5;
|
||||
}
|
||||
.hint { color: brown; font-family: sans-serif; font-size: 90%; }
|
||||
.hint:before { content: '❗ '; }
|
||||
:lang(mn) { font-family: "Mongolian Baiti", "Noto sans Mongolian", serif; }
|
||||
</style>
|
||||
<!-- the test -->
|
||||
<style>
|
||||
div p {
|
||||
text-decoration:underline;
|
||||
}</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">Test passes if there is an unbroken line to the LEFT of the characters for all lines.<br/><span class="hint">Skip the test if the text is not vertical.</span></p>
|
||||
<div id="htmlsrc" style="writing-mode:vertical-rl">
|
||||
|
||||
<div>
|
||||
<p lang="zh">引发<span lang="en">quick brown fox</span>网络<span lang="ar">جهانی سازیم</span>的全<span lang="my">အပြည်ပြည်</span>部潜<span lang="th">ปิ้งอยู่ในถ้ำ</span>能引<span lang="bo">འཛམ་གླིང་ཡོངས་ལུ་ཁྱབ་ཚུགསཔ་</span>發網<span lang="hi">विश्वव्यापी बना रहें हैं絡</span>的全<span lang="ja">部潛能</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>text-decoration underline tbrl (zh)</title>
|
||||
<meta name="assert" content="text-decoration:underline; there is a line to the LEFT of the characters">
|
||||
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#line-decoration">
|
||||
<!-- cosmetic styling -->
|
||||
<style>
|
||||
#htmlsrc { margin: 2em; }
|
||||
#htmlsrc p {
|
||||
font-size: 28px;
|
||||
border-radius: 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.hint { color: brown; font-family: sans-serif; font-size: 90%; }
|
||||
.hint:before { content: '❗ '; }
|
||||
</style>
|
||||
<!-- the test -->
|
||||
<style>
|
||||
div span {
|
||||
text-decoration:underline;
|
||||
}</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">Test passes if there is a line to the LEFT of the characters.<br/><span class="hint">Skip the test if the text is not vertical.</span></p>
|
||||
<div id="htmlsrc" style="writing-mode:vertical-rl">
|
||||
|
||||
<div>
|
||||
<p lang="zh"><span>引发网络的全部潜能引發網絡的全部潛能</span></p>
|
||||
</div> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>text-decoration overline tbrl hor scripts</title>
|
||||
<meta name="assert" content="text-decoration-line:overline; there is a line to the RIGHT of the characters for horizontal scripts set vertically using writing-mode: vertical-rl">
|
||||
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#line-decoration">
|
||||
<!-- cosmetic styling -->
|
||||
<style>
|
||||
#htmlsrc { margin: 2em; }
|
||||
#htmlsrc p {
|
||||
font-size: 28px;
|
||||
border-radius: 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.hint { color: brown; font-family: sans-serif; font-size: 90%; }
|
||||
.hint:before { content: '❗ '; }
|
||||
:lang(mn) { font-family: "Mongolian Baiti", "Noto sans Mongolian", serif; }
|
||||
</style>
|
||||
<!-- the test -->
|
||||
<style>
|
||||
div span {
|
||||
text-decoration:overline;
|
||||
}</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">Test passes if there is a line to the RIGHT of the characters for all lines.<br/><span class="hint">Skip the test if the text is not vertical.</span></p>
|
||||
<div id="htmlsrc" style="writing-mode:vertical-rl">
|
||||
<div>
|
||||
<p lang="en"><span>The quick brown fox jumps over the lazy dog.</span></p>
|
||||
<p lang="ar"><span>وب جهانی را بهدرستی جهانی سازیم!</span></p>
|
||||
<p lang="my"><span>အပြည်ပြည်ဆိုင်ရာလှုပ်ရှားမှု၊</span></p>
|
||||
<p lang="th"><span>กูกินกุ้งปิ้งอยู่ในถ้ำ กูกินกุ้งปิ้งอยู่ในถ้ำ</span></p>
|
||||
<p lang="bo"><span>འཛམ་གླིང་ཡོངས་འབྲེལ་འདི་ ངོ་མ་འབད་རང་ འཛམ་གླིང་ཡོངས་ལུ་ཁྱབ་ཚུགསཔ་བཟོ་བ།</span></p>
|
||||
<p lang="hi"><span>वर्ल्ड वाईड वेब को सचमुच विश्वव्यापी बना रहें हैं !</span></p>
|
||||
</div> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>text-decoration overline tbrl (zh)</title>
|
||||
<meta name="assert" content="text-decoration-line:overline; there is a line to the RIGHT of the characters">
|
||||
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#line-decoration">
|
||||
<!-- cosmetic styling -->
|
||||
<style>
|
||||
#htmlsrc { margin: 2em; }
|
||||
#htmlsrc p {
|
||||
font-size: 28px;
|
||||
border-radius: 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.hint { color: brown; font-family: sans-serif; font-size: 90%; }
|
||||
.hint:before { content: '❗ '; }
|
||||
</style>
|
||||
<!-- the test -->
|
||||
<style>
|
||||
div span {
|
||||
text-decoration:overline;
|
||||
}</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">Test passes if there is a line to the RIGHT of the characters.<br/><span class="hint">Skip the test if the text is not vertical.</span></p>
|
||||
<div id="htmlsrc" style="writing-mode:vertical-rl">
|
||||
<div>
|
||||
<p lang="zh"><span>引发网络的全部潜能引發網絡的全部潛能</span></p>
|
||||
</div> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>text-decoration overline tbrl mixed</title>
|
||||
<meta name="assert" content="text-decoration-line:overline; there is an unbroken line to the RIGHT of the characters for all lines">
|
||||
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#line-decoration">
|
||||
<!-- cosmetic styling -->
|
||||
<style>
|
||||
#htmlsrc { margin: 2em; }
|
||||
#htmlsrc p {
|
||||
font-size: 28px;
|
||||
border-radius: 5px;
|
||||
line-height: 3.5;
|
||||
}
|
||||
:lang(mn) { font-family: "Mongolian Baiti", "Noto sans Mongolian", serif; }
|
||||
.hint { color: brown; font-family: sans-serif; font-size: 90%; }
|
||||
.hint:before { content: '❗ '; }
|
||||
</style>
|
||||
<!-- the test -->
|
||||
<style>
|
||||
div p {
|
||||
text-decoration:overline;
|
||||
}</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">Test passes if there is an unbroken line to the RIGHT of the characters for each line.<br/><span class="hint">Skip the test if the text is not vertical.</span></p>
|
||||
<div id="htmlsrc" style="writing-mode:vertical-rl">
|
||||
|
||||
<div>
|
||||
<p lang="zh">引发<span lang="en">quick brown fox</span>网络<span lang="ar">جهانی سازیم</span>的全<span lang="my">အပြည်ပြည်</span>部潜<span lang="th">ปิ้งอยู่ในถ้ำ</span>能引<span lang="bo">འཛམ་གླིང་ཡོངས་ལུ་ཁྱབ་ཚུགསཔ་</span>發網<span lang="hi">विश्वव्यापी बना रहें हैं絡</span>的全<span lang="ja">部潛能</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>text-decoration line-through vertical-rl</title>
|
||||
<meta name="assert" content="text-decoration:line-through; there is a solid vertical line through the centre of the characters">
|
||||
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#line-decoration">
|
||||
<!-- cosmetic styling -->
|
||||
<style>
|
||||
#htmlsrc { margin: 2em; }
|
||||
#htmlsrc p {
|
||||
font-size: 28px;
|
||||
border-radius: 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.hint { color: brown; font-family: sans-serif; font-size: 90%; }
|
||||
.hint:before { content: '❗ '; }
|
||||
</style>
|
||||
<!-- the test -->
|
||||
<style>
|
||||
div span {
|
||||
text-decoration:line-through;
|
||||
}</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">Test passes if there is a solid vertical line through the centre of the characters.<br/><span class="hint">Skip the test if the text is not vertical.</span></p>
|
||||
<div id="htmlsrc" style="writing-mode:vertical-rl">
|
||||
|
||||
<div>
|
||||
<p lang="zh"><span>引发网络的全部潜能引發網絡的全部潛能</span></p>
|
||||
<p lang="ja"><span>可能性を最大限に導き出すために</span></p>
|
||||
</div> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>text-decoration line-through vertical-rl hor scripts</title>
|
||||
<meta name="assert" content="text-decoration:line-through; there is a solid vertical line through the centre of the characters">
|
||||
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#line-decoration">
|
||||
<!-- cosmetic styling -->
|
||||
<style>
|
||||
#htmlsrc { margin: 2em; }
|
||||
#htmlsrc p {
|
||||
font-size: 28px;
|
||||
border-radius: 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.hint { color: brown; font-family: sans-serif; font-size: 90%; }
|
||||
.hint:before { content: '❗ '; }
|
||||
</style>
|
||||
<!-- the test -->
|
||||
<style>
|
||||
div span {
|
||||
text-decoration:line-through;
|
||||
}</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">Test passes if there is a solid vertical line through the centre of the characters.<br/><span class="hint">Skip the test if the text the text fails for the Chinese line, or is not vertical.</span></p>
|
||||
<div id="htmlsrc" style="writing-mode:vertical-rl">
|
||||
|
||||
<div>
|
||||
<p lang="zh"><span>引发网络的全部潜能引發網絡的全部潛能</span></p>
|
||||
<p lang="en"><span>The quick brown fox jumps over the lazy dog.</span></p>
|
||||
<p lang="ar"><span>وب جهانی را بهدرستی جهانی سازیم!</span></p>
|
||||
<p lang="my"><span>အပြည်ပြည်ဆိုင်ရာလှုပ်ရှားမှု၊</span></p>
|
||||
<p lang="th"><span>กูกินกุ้งปิ้งอยู่ในถ้ำ กูกินกุ้งปิ้งอยู่ในถ้ำ</span></p>
|
||||
<p lang="bo"><span>འཛམ་གླིང་ཡོངས་འབྲེལ་འདི་ ངོ་མ་འབད་རང་ འཛམ་གླིང་ཡོངས་ལུ་ཁྱབ་ཚུགསཔ་བཟོ་བ།</span></p>
|
||||
<p lang="hi"><span>वर्ल्ड वाईड वेब को सचमुच विश्वव्यापी बना रहें हैं !</span></p>
|
||||
</div> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>text-decoration vertical-rl over+under</title>
|
||||
<meta name="assert" content="text-decoration:underline overline; there is a vertical line on both sides of the characters">
|
||||
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#line-decoration">
|
||||
<!-- cosmetic styling -->
|
||||
<style>
|
||||
#htmlsrc { margin: 2em; }
|
||||
#htmlsrc p {
|
||||
font-size: 28px;
|
||||
border-radius: 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.hint { color: brown; font-family: sans-serif; font-size: 90%; }
|
||||
.hint:before { content: '❗ '; }
|
||||
:lang(mn) { font-family: "Mongolian Baiti", "Noto sans Mongolian", serif; }
|
||||
</style>
|
||||
<!-- the test -->
|
||||
<style>
|
||||
div span {
|
||||
text-decoration:underline overline;
|
||||
}</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">Test passes if there is a vertical line on both sides of the characters.<br/><span class="hint">Skip the test if the text is not vertical.</span></p>
|
||||
<div id="htmlsrc" style="writing-mode:vertical-rl">
|
||||
<div>
|
||||
<p lang="zh"><span>引发网络的全部潜能引發網絡的全部潛能</span></p>
|
||||
<p lang="ja"><span>可能性を最大限に導き出すために</span></p>
|
||||
<p lang="en"><span>The quick brown fox jumps over the lazy dog.</span></p>
|
||||
<p lang="ar"><span>وب جهانی را بهدرستی جهانی سازیم!</span></p>
|
||||
<p lang="my"><span>အပြည်ပြည်ဆိုင်ရာလှုပ်ရှားမှု၊</span></p>
|
||||
<p lang="th"><span>กูกินกุ้งปิ้งอยู่ในถ้ำ กูกินกุ้งปิ้งอยู่ในถ้ำ</span></p>
|
||||
<p lang="bo"><span>འཛམ་གླིང་ཡོངས་འབྲེལ་འདི་ ངོ་མ་འབད་རང་ འཛམ་གླིང་ཡོངས་ལུ་ཁྱབ་ཚུགསཔ་བཟོ་བ།</span></p>
|
||||
<p lang="hi"><span>वर्ल्ड वाईड वेब को सचमुच विश्वव्यापी बना रहें हैं !</span></p>
|
||||
</div> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>text-decoration underline overline tblr</title>
|
||||
<meta name="assert" content="text-decoration:underline overline; there is a line on both sides of the characters">
|
||||
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#line-decoration">
|
||||
<!-- cosmetic styling -->
|
||||
<style>
|
||||
#htmlsrc { margin: 2em; }
|
||||
#htmlsrc p {
|
||||
font-size: 28px;
|
||||
border-radius: 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.hint { color: brown; font-family: sans-serif; font-size: 90%; }
|
||||
.hint:before { content: '❗ '; }
|
||||
:lang(mn) { font-family: "Mongolian Baiti", "Noto sans Mongolian", serif; }
|
||||
</style>
|
||||
<!-- the test -->
|
||||
<style>
|
||||
div span {
|
||||
text-decoration:underline overline;
|
||||
}</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">Test passes if there is a line on both sides of the characters.<br/><span class="hint">Skip the test if the text is not vertical.</span></p>
|
||||
<div id="htmlsrc" style="writing-mode:vertical-lr">
|
||||
<div>
|
||||
<p lang="mn"><span>ᠣᠯᠠᠨ ᠦᠨᠳᠦᠰᠦᠲᠡᠨ ᠦ ᠪᠣᠯᠭᠠᠬᠤ ᠦᠢᠯᠡ ᠠᠵᠢᠯᠯᠠᠭᠠ</span></p>
|
||||
</div> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>text-decoration line-through tblr</title>
|
||||
<meta name="assert" content="text-decoration:line-through; there is a solid vertical line through the centre of the characters.">
|
||||
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#line-decoration">
|
||||
<!-- cosmetic styling -->
|
||||
<style>
|
||||
#htmlsrc { margin: 2em; }
|
||||
#htmlsrc p {
|
||||
font-size: 28px;
|
||||
border-radius: 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.hint { color: brown; font-family: sans-serif; font-size: 90%; }
|
||||
.hint:before { content: '❗ '; }
|
||||
:lang(mn) { font-family: "Mongolian Baiti", "Noto sans Mongolian", serif; }
|
||||
</style>
|
||||
<!-- the test -->
|
||||
<style>
|
||||
div span {
|
||||
text-decoration:line-through;
|
||||
}</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">Test passes if there is a solid vertical line through the centre of the characters.<br/><span class="hint">Skip the test if the text is not vertical.</span></p>
|
||||
<div id="htmlsrc" style="writing-mode:vertical-lr">
|
||||
<div>
|
||||
<p lang="mn"><span>ᠣᠯᠠᠨ ᠦᠨᠳᠦᠰᠦᠲᠡᠨ ᠦ ᠪᠣᠯᠭᠠᠬᠤ ᠦᠢᠯᠡ ᠠᠵᠢᠯᠯᠠᠭᠠ</span></p>
|
||||
</div> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>text-decoration underline sideways-rl</title>
|
||||
<meta name="assert" content="text-decoration:underline; there is a line to the LEFT of the characters for horizontal scripts set vertically using writing-mode: sideways-rl">
|
||||
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#line-decoration">
|
||||
<!-- cosmetic styling -->
|
||||
<style>
|
||||
#htmlsrc { margin: 2em; }
|
||||
#htmlsrc p {
|
||||
font-size: 28px;
|
||||
border-radius: 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.hint { color: brown; font-family: sans-serif; font-size: 90%; }
|
||||
.hint:before { content: '❗ '; }
|
||||
</style>
|
||||
<!-- the test -->
|
||||
<style>
|
||||
div span {
|
||||
text-decoration:underline;
|
||||
}</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">Test passes if there is a line to the LEFT of the characters.<br/><span class="hint">Skip the test if the text is not vertical.</span></p>
|
||||
<div id="htmlsrc" style="writing-mode:sideways-rl">
|
||||
|
||||
<div>
|
||||
<p lang="en"><span>The quick brown fox jumps over the lazy dog.</span></p>
|
||||
</div> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>text-decoration underline sideways-rl non-Latin</title>
|
||||
<meta name="assert" content="text-decoration:underline; there is a line to the LEFT of the characters for horizontal scripts set vertically using writing-mode: sideways-rl">
|
||||
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#line-decoration">
|
||||
<!-- cosmetic styling -->
|
||||
<style>
|
||||
#htmlsrc { margin: 2em; }
|
||||
#htmlsrc p {
|
||||
font-size: 28px;
|
||||
border-radius: 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.hint { color: brown; font-family: sans-serif; font-size: 90%; }
|
||||
.hint:before { content: '❗ '; }
|
||||
</style>
|
||||
<!-- the test -->
|
||||
<style>
|
||||
div span {
|
||||
text-decoration:underline;
|
||||
}</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">Test passes if there is a line to the LEFT of the characters for all lines.<br/><span class="hint">Skip the test if it fails for the English text, or if the text is not vertical.</span></p>
|
||||
<div id="htmlsrc" style="writing-mode:sideways-rl">
|
||||
|
||||
<div>
|
||||
<p lang="en"><span>The quick brown fox jumps over the lazy dog.</span></p>
|
||||
<p lang="ar"><span>وب جهانی را بهدرستی جهانی سازیم!</span></p>
|
||||
<p lang="my"><span>အပြည်ပြည်ဆိုင်ရာလှုပ်ရှားမှု၊</span></p>
|
||||
<p lang="th"><span>กูกินกุ้งปิ้งอยู่ในถ้ำ กูกินกุ้งปิ้งอยู่ในถ้ำ</span></p>
|
||||
<p lang="bo"><span>འཛམ་གླིང་ཡོངས་འབྲེལ་འདི་ ངོ་མ་འབད་རང་ འཛམ་གླིང་ཡོངས་ལུ་ཁྱབ་ཚུགསཔ་བཟོ་བ།</span></p>
|
||||
<p lang="hi"><span>वर्ल्ड वाईड वेब को सचमुच विश्वव्यापी बना रहें हैं !</span></p-->
|
||||
</div> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>text-decoration overline sideways-rl</title>
|
||||
<meta name="assert" content="text-decoration:overline; there is a line to the RIGHT of the characters for horizontal scripts set vertically using writing-mode: sideways-rl">
|
||||
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#line-decoration">
|
||||
<!-- cosmetic styling -->
|
||||
<style>
|
||||
#htmlsrc { margin: 2em; }
|
||||
#htmlsrc p {
|
||||
font-size: 28px;
|
||||
border-radius: 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.hint { color: brown; font-family: sans-serif; font-size: 90%; }
|
||||
.hint:before { content: '❗ '; }
|
||||
</style>
|
||||
<!-- the test -->
|
||||
<style>
|
||||
div span {
|
||||
text-decoration:overline;
|
||||
}</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">Test passes if there is a line to the RIGHT of the characters.<br/><span class="hint">Skip the test if the text is not vertical.</span></p>
|
||||
<div id="htmlsrc" style="writing-mode:sideways-rl">
|
||||
|
||||
<div>
|
||||
<p lang="en"><span>The quick brown fox jumps over the lazy dog.</span></p>
|
||||
</div> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>text-decoration overline sideways-rl non-Latin</title>
|
||||
<meta name="assert" content="text-decoration:overline; there is a line to the RIGHT of the characters for horizontal scripts set vertically using writing-mode: sideways-rl">
|
||||
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#line-decoration">
|
||||
<!-- cosmetic styling -->
|
||||
<style>
|
||||
#htmlsrc { margin: 2em; }
|
||||
#htmlsrc p {
|
||||
font-size: 28px;
|
||||
border-radius: 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.hint { color: brown; font-family: sans-serif; font-size: 90%; }
|
||||
.hint:before { content: '❗ '; }
|
||||
</style>
|
||||
<!-- the test -->
|
||||
<style>
|
||||
div span {
|
||||
text-decoration:overline;
|
||||
}</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">Test passes if there is a line to the RIGHT of the characters for all lines.<br/><span class="hint">Skip the test if it fails for the English sentence, or if the text is not vertical.</span></p>
|
||||
<div id="htmlsrc" style="writing-mode:sideways-rl">
|
||||
|
||||
<div>
|
||||
<p lang="en"><span>The quick brown fox jumps over the lazy dog.</span></p>
|
||||
<p lang="ar"><span>وب جهانی را بهدرستی جهانی سازیم!</span></p>
|
||||
<p lang="my"><span>အပြည်ပြည်ဆိုင်ရာလှုပ်ရှားမှု၊</span></p>
|
||||
<p lang="th"><span>กูกินกุ้งปิ้งอยู่ในถ้ำ กูกินกุ้งปิ้งอยู่ในถ้ำ</span></p>
|
||||
<p lang="bo"><span>འཛམ་གླིང་ཡོངས་འབྲེལ་འདི་ ངོ་མ་འབད་རང་ འཛམ་གླིང་ཡོངས་ལུ་ཁྱབ་ཚུགསཔ་བཟོ་བ།</span></p>
|
||||
<p lang="hi"><span>वर्ल्ड वाईड वेब को सचमुच विश्वव्यापी बना रहें हैं !</span></p-->
|
||||
</div> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>text-decoration line-through sideways-rl</title>
|
||||
<meta name="assert" content="text-decoration:line-through; there is a line through the CENTRE of the characters for horizontal scripts set vertically using writing-mode: sideways-rl">
|
||||
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#line-decoration">
|
||||
<!-- cosmetic styling -->
|
||||
<style>
|
||||
#htmlsrc { margin: 2em; }
|
||||
#htmlsrc p {
|
||||
font-size: 28px;
|
||||
border-radius: 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.hint { color: brown; font-family: sans-serif; font-size: 90%; }
|
||||
.hint:before { content: '❗ '; }
|
||||
</style>
|
||||
<!-- the test -->
|
||||
<style>
|
||||
div span {
|
||||
text-decoration:line-through;
|
||||
}</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">Test passes if there is a line through the CENTRE of the characters.<br/><span class="hint">Skip the test if the text is not vertical.</span></p>
|
||||
<div id="htmlsrc" style="writing-mode:sideways-rl">
|
||||
|
||||
<div>
|
||||
<p lang="en"><span>The quick brown fox jumps over the lazy dog.</span></p>
|
||||
</div> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>text-decoration line-through sideways-rl non-Latin</title>
|
||||
<meta name="assert" content="text-decoration:line-through; there is a line through the CENTRE of the characters for horizontal scripts set vertically using writing-mode: sideways-rl">
|
||||
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#line-decoration">
|
||||
<!-- cosmetic styling -->
|
||||
<style>
|
||||
#htmlsrc { margin: 2em; }
|
||||
#htmlsrc p {
|
||||
font-size: 28px;
|
||||
border-radius: 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.hint { color: brown; font-family: sans-serif; font-size: 90%; }
|
||||
.hint:before { content: '❗ '; }
|
||||
</style>
|
||||
<!-- the test -->
|
||||
<style>
|
||||
div span {
|
||||
text-decoration:line-through;
|
||||
}</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">Test passes if there is a line through the CENTRE of the characters for all lines.<br/><span class="hint">Skip the test if it fails for the English sentence, or if the text is not vertical.</span></p>
|
||||
<div id="htmlsrc" style="writing-mode:sideways-rl">
|
||||
|
||||
<div>
|
||||
<p lang="en"><span>The quick brown fox jumps over the lazy dog.</span></p>
|
||||
<p lang="ar"><span>وب جهانی را بهدرستی جهانی سازیم!</span></p>
|
||||
<p lang="my"><span>အပြည်ပြည်ဆိုင်ရာလှုပ်ရှားမှု၊</span></p>
|
||||
<p lang="th"><span>กูกินกุ้งปิ้งอยู่ในถ้ำ กูกินกุ้งปิ้งอยู่ในถ้ำ</span></p>
|
||||
<p lang="bo"><span>འཛམ་གླིང་ཡོངས་འབྲེལ་འདི་ ངོ་མ་འབད་རང་ འཛམ་གླིང་ཡོངས་ལུ་ཁྱབ་ཚུགསཔ་བཟོ་བ།</span></p>
|
||||
<p lang="hi"><span>वर्ल्ड वाईड वेब को सचमुच विश्वव्यापी बना रहें हैं !</span></p-->
|
||||
</div> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>text-decoration underline sideways-lr non-Latin</title>
|
||||
<meta name="assert" content="text-decoration:underline; there is a line to the RIGHT of the characters for horizontal scripts set vertically using writing-mode: sideways-lr">
|
||||
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#line-decoration">
|
||||
<!-- cosmetic styling -->
|
||||
<style>
|
||||
#htmlsrc { margin: 2em; }
|
||||
#htmlsrc p {
|
||||
font-size: 28px;
|
||||
border-radius: 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.hint { color: brown; font-family: sans-serif; font-size: 90%; }
|
||||
.hint:before { content: '❗ '; }
|
||||
</style>
|
||||
<!-- the test -->
|
||||
<style>
|
||||
div span {
|
||||
text-decoration:underline;
|
||||
}</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">Test passes if there is a line to the RIGHT of the characters for all lines.<br/><span class="hint">Skip the test if it fails for the English sentence, or if the text is not vertical.</span></p>
|
||||
<div id="htmlsrc" style="writing-mode:sideways-lr">
|
||||
|
||||
<div>
|
||||
<p lang="en"><span>The quick brown fox jumps over the lazy dog.</span></p>
|
||||
<p lang="ar"><span>وب جهانی را بهدرستی جهانی سازیم!</span></p>
|
||||
<p lang="my"><span>အပြည်ပြည်ဆိုင်ရာလှုပ်ရှားမှု၊</span></p>
|
||||
<p lang="th"><span>กูกินกุ้งปิ้งอยู่ในถ้ำ กูกินกุ้งปิ้งอยู่ในถ้ำ</span></p>
|
||||
<p lang="bo"><span>འཛམ་གླིང་ཡོངས་འབྲེལ་འདི་ ངོ་མ་འབད་རང་ འཛམ་གླིང་ཡོངས་ལུ་ཁྱབ་ཚུགསཔ་བཟོ་བ།</span></p>
|
||||
<p lang="hi"><span>वर्ल्ड वाईड वेब को सचमुच विश्वव्यापी बना रहें हैं !</span></p-->
|
||||
</div> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>text-decoration overline sideways-lr</title>
|
||||
<meta name="assert" content="text-decoration:overline; there is a line to the LEFT of the characters for horizontal scripts set vertically using writing-mode: sideways-lr">
|
||||
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#line-decoration">
|
||||
<!-- cosmetic styling -->
|
||||
<style>
|
||||
#htmlsrc { margin: 2em; }
|
||||
#htmlsrc p {
|
||||
font-size: 28px;
|
||||
border-radius: 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.hint { color: brown; font-family: sans-serif; font-size: 90%; }
|
||||
.hint:before { content: '❗ '; }
|
||||
</style>
|
||||
<!-- the test -->
|
||||
<style>
|
||||
div span {
|
||||
text-decoration:overline;
|
||||
}</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">Test passes if there is a line to the LEFT of the characters.<br/><span class="hint">Skip the test if the text is not vertical.</span></p>
|
||||
<div id="htmlsrc" style="writing-mode:sideways-lr">
|
||||
|
||||
<div>
|
||||
<p lang="en"><span>The quick brown fox jumps over the lazy dog.</span></p>
|
||||
</div> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>text-decoration overline sideways-lr non-Latin</title>
|
||||
<meta name="assert" content="text-decoration:overline; there is a line to the LEFT of the characters for horizontal scripts set vertically using writing-mode: sideways-lr">
|
||||
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#line-decoration">
|
||||
<!-- cosmetic styling -->
|
||||
<style>
|
||||
#htmlsrc { margin: 2em; }
|
||||
#htmlsrc p {
|
||||
font-size: 28px;
|
||||
border-radius: 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.hint { color: brown; font-family: sans-serif; font-size: 90%; }
|
||||
.hint:before { content: '❗ '; }
|
||||
</style>
|
||||
<!-- the test -->
|
||||
<style>
|
||||
div span {
|
||||
text-decoration:overline;
|
||||
}</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">Test passes if there is a line to the LEFT of the characters for all lines.<br/><span class="hint">Skip the test if it fails for the English sentence, or if the text is not vertical.</span></p>
|
||||
<div id="htmlsrc" style="writing-mode:sideways-lr">
|
||||
|
||||
<div>
|
||||
<p lang="en"><span>The quick brown fox jumps over the lazy dog.</span></p>
|
||||
<p lang="ar"><span>وب جهانی را بهدرستی جهانی سازیم!</span></p>
|
||||
<p lang="my"><span>အပြည်ပြည်ဆိုင်ရာလှုပ်ရှားမှု၊</span></p>
|
||||
<p lang="th"><span>กูกินกุ้งปิ้งอยู่ในถ้ำ กูกินกุ้งปิ้งอยู่ในถ้ำ</span></p>
|
||||
<p lang="bo"><span>འཛམ་གླིང་ཡོངས་འབྲེལ་འདི་ ངོ་མ་འབད་རང་ འཛམ་གླིང་ཡོངས་ལུ་ཁྱབ་ཚུགསཔ་བཟོ་བ།</span></p>
|
||||
<p lang="hi"><span>वर्ल्ड वाईड वेब को सचमुच विश्वव्यापी बना रहें हैं !</span></p-->
|
||||
</div> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>text-decoration line-through sideways-lr</title>
|
||||
<meta name="assert" content="text-decoration:line-through; there is a line through the CENTRE of the characters for horizontal scripts set vertically using writing-mode: sideways-lr">
|
||||
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#line-decoration">
|
||||
<!-- cosmetic styling -->
|
||||
<style>
|
||||
#htmlsrc { margin: 2em; }
|
||||
#htmlsrc p {
|
||||
font-size: 28px;
|
||||
border-radius: 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.hint { color: brown; font-family: sans-serif; font-size: 90%; }
|
||||
.hint:before { content: '❗ '; }
|
||||
</style>
|
||||
<!-- the test -->
|
||||
<style>
|
||||
div span {
|
||||
text-decoration:line-through;
|
||||
}</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">Test passes if there is a line through the CENTRE of the characters.<br/><span class="hint">Skip the test if the text is not vertical.</span></p>
|
||||
<div id="htmlsrc" style="writing-mode:sideways-lr">
|
||||
|
||||
<div>
|
||||
<p lang="en"><span>The quick brown fox jumps over the lazy dog.</span></p>
|
||||
</div> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>text-decoration line-through sideways-lr non-Latin</title>
|
||||
<meta name="assert" content="text-decoration:line-through; there is a line through the CENTRE of the characters for horizontal scripts set vertically using writing-mode: sideways-lr">
|
||||
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#line-decoration">
|
||||
<!-- cosmetic styling -->
|
||||
<style>
|
||||
#htmlsrc { margin: 2em; }
|
||||
#htmlsrc p {
|
||||
font-size: 28px;
|
||||
border-radius: 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.hint { color: brown; font-family: sans-serif; font-size: 90%; }
|
||||
.hint:before { content: '❗ '; }
|
||||
</style>
|
||||
<!-- the test -->
|
||||
<style>
|
||||
div span {
|
||||
text-decoration:line-through;
|
||||
}</style>
|
||||
</head>
|
||||
<body>
|
||||
<p class="instructions">Test passes if there is a line through the CENTRE of the characters for all lines.<br/><span class="hint">Skip the test if it fails for the English sentence, or if the text is not vertical.</span></p>
|
||||
<div id="htmlsrc" style="writing-mode:sideways-lr">
|
||||
|
||||
<div>
|
||||
<p lang="en"><span>The quick brown fox jumps over the lazy dog.</span></p>
|
||||
<p lang="ar"><span>وب جهانی را بهدرستی جهانی سازیم!</span></p>
|
||||
<p lang="my"><span>အပြည်ပြည်ဆိုင်ရာလှုပ်ရှားမှု၊</span></p>
|
||||
<p lang="th"><span>กูกินกุ้งปิ้งอยู่ในถ้ำ กูกินกุ้งปิ้งอยู่ในถ้ำ</span></p>
|
||||
<p lang="bo"><span>འཛམ་གླིང་ཡོངས་འབྲེལ་འདི་ ངོ་མ་འབད་རང་ འཛམ་གླིང་ཡོངས་ལུ་ཁྱབ་ཚུགསཔ་བཟོ་བ།</span></p>
|
||||
<p lang="hi"><span>वर्ल्ड वाईड वेब को सचमुच विश्वव्यापी बना रहें हैं !</span></p-->
|
||||
</div> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: overflow-wrap:break-word + white-space:break-spaces</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
|
||||
<link rel="help" title="5.5. Overflow Wrapping: the overflow-wrap/word-wrap property " href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
|
||||
<meta name="assert" content="break-word + break-spaces do allow a break
|
||||
between the last character of a word and the first space of a sequence of preserved spaces
|
||||
if there are no other wrapping opportunities earlier in the line">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font-family: Ahem;
|
||||
font-size: 25px;
|
||||
line-height: 1em;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
color: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
white-space: pre;
|
||||
}
|
||||
.test {
|
||||
background: green;
|
||||
color: red;
|
||||
width: 4ch;
|
||||
z-index: -1;
|
||||
|
||||
white-space: break-spaces;
|
||||
overflow-wrap: break-word;
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="red">XXXX<br> <br>XXXX<br></div>
|
||||
<div class="test">XXXX XXXX </div>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: word-break:break-word + white-space:break-spaces</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
|
||||
<link rel="help" title="3. White Space and Wrapping: the white-space property" href="https://drafts.csswg.org/css-text-3/#white-space-property">
|
||||
<link rel="help" title="5.2. Breaking Rules for Letters: the word-break property" href="https://drafts.csswg.org/css-text-3/#word-break-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-break-spaces">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="match" href="reference/white-space-break-spaces-005-ref.html">
|
||||
<meta name="assert" content="break-word + break-spaces do allow a break
|
||||
between the last character of a word and the first space of a sequence of preserved spaces
|
||||
if there are no other wrapping opportunities earlier in the line">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font: 25px/1 Ahem;
|
||||
}
|
||||
.red {
|
||||
position: absolute;
|
||||
color: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
white-space: pre;
|
||||
}
|
||||
.test {
|
||||
background: green;
|
||||
color: red;
|
||||
width: 4ch;
|
||||
z-index: -1;
|
||||
|
||||
white-space: break-spaces;
|
||||
word-break: break-word;
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="red">XXXX<br> <br>XXXX<br></div>
|
||||
<div class="test">XXXX XXXX </div>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<style>
|
||||
div {
|
||||
font-family: monospace;
|
||||
font-family: Ahem;
|
||||
color: transparent;
|
||||
font-size: 50px;
|
||||
background: green;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
div {
|
||||
color: transparent;
|
||||
background: blue;
|
||||
font-family: monospace;
|
||||
font-family: Ahem;
|
||||
font-size: 50px;
|
||||
width: 3ch;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<style>
|
||||
div {
|
||||
font-family: Ahem;
|
||||
color: transparent;
|
||||
font-size: 50px;
|
||||
background: green;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ aside {
|
|||
}
|
||||
div {
|
||||
color: transparent;
|
||||
font-family: monospace;
|
||||
font-family: Ahem;
|
||||
font-size: 50px;
|
||||
width: 5ch;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ aside {
|
|||
}
|
||||
aside:last-of-type { overflow-wrap: break-word; }
|
||||
div {
|
||||
font-family: monospace;
|
||||
font-family: Ahem;
|
||||
color: transparent;
|
||||
font-size: 50px;
|
||||
width: 0ch;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ aside:last-of-type {
|
|||
}
|
||||
div {
|
||||
color: transparent;
|
||||
font-family: monospace;
|
||||
font-family: Ahem;
|
||||
font-size: 50px;
|
||||
width: 3ch;
|
||||
/* both floats should take the full 3ch,
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ aside {
|
|||
}
|
||||
div {
|
||||
color: transparent;
|
||||
font-family: Ahem;
|
||||
font-size: 50px;
|
||||
width: 0ch;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ aside {
|
|||
aside:last-of-type { overflow-wrap: break-word; }
|
||||
div {
|
||||
color: transparent;
|
||||
font-family: monospace;
|
||||
font-family: Ahem;
|
||||
font-size: 50px;
|
||||
width: 3ch; /* enough room for both floats if their max-content size does not include the preserved spaces,
|
||||
but not enough if they do, causing a line break in that case. */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue