Update web-platform-tests to revision b'468d01bbd84da2babf265c6af46947be68713440'

This commit is contained in:
WPT Sync Bot 2021-09-07 11:16:33 +00:00 committed by cybai
parent 35e95f55a1
commit 58e8ee674b
9438 changed files with 266112 additions and 106976 deletions

View file

@ -0,0 +1,7 @@
<!doctype html>
<title>CSS Text Test: Crash rendering a table caption with list item and svg</title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
<link rel="help" href="https://crbug.com/1197974">
<meta name="assert" content="The test doesn't crash in debug"/>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<table dir="rtl"><caption><li><svg></caption></table>

View file

@ -0,0 +1,11 @@
<!doctype html>
<title>CSS Text Test: Crash rendering a table caption with empty span and negative margins</title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
<link rel="help" href="https://crbug.com/1197974">
<meta name="assert" content="The test doesn't crash in debug"/>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
table { font: 20px/1 Ahem; }
span { margin: -40px; }
</style>
<table><caption>X<span></span><input></input><textarea></textarea></caption></table>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-property">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1474774">
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<style>
:last-of-type {
word-spacing:15946245.3ch;
border-right-style:solid;
}
</style>
<button formaction=''>
<small>
AAAAAAAA
</html>

View file

@ -7,7 +7,7 @@
<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<meta name="assert" content="When the language is neither Japanese nor Chinese, and line-break:loose, a browser wll NOT allow a break before a PR character with East Asian Width of A, F, or W.">
<meta name="assert" content="When the language is neither Japanese nor Chinese, and line-break:loose, a browser wll allow a break before a PR character with East Asian Width of A, F, or W.">
<style type="text/css">
@font-face {
font-family: 'mplus-1p-regular';
@ -40,10 +40,10 @@ for (var i=0;i<lines.length;i++) {
var firstSpace = lines[i].indexOf(' ')
var hex = lines[i].substr(0,firstSpace)
var name = lines[i].substr(firstSpace)
// make a test
// make a test (ID ÷ PR × ID)
out += '<div class="wrapper"><div>'+hex+'</div>' +
'<div class="test" id="test'+i+'" lang="de">文文文文文文&#x'+hex+';<span id="testSpan'+i+'"></span></div>' +
'<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>&#x'+hex+';<span id="refSpan'+i+'"></span></div>' +
'<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>&#x'+hex+';<span id="refSpan'+i+'"></span></div>' +
'</div>'
}
function spansNearEnough(counter) {
@ -60,7 +60,7 @@ function validate() {
for (i=0;i<lines.length;i++) {
test(function() {
assert_true(spansNearEnough(i));
}, lines[i]+' may NOT appear at line start if de and loose');
}, lines[i]+' may appear at line start if de and loose');
// Hide successful tests.
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
}

View file

@ -7,7 +7,7 @@
<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<meta name="assert" content="When the language is neither Japanese nor Chinese, and line-break:normal, a browser will NOT allow a break before a PR character with East Asian Width of A, F, or W.">
<meta name="assert" content="When the language is neither Japanese nor Chinese, and line-break:normal, a browser will allow a break before a PR character with East Asian Width of A, F, or W.">
<style type="text/css">
@font-face {
font-family: 'mplus-1p-regular';
@ -40,10 +40,10 @@ for (var i=0;i<lines.length;i++) {
var firstSpace = lines[i].indexOf(' ')
var hex = lines[i].substr(0,firstSpace)
var name = lines[i].substr(firstSpace)
// make a test
// make a test (ID ÷ PR × ID)
out += '<div class="wrapper"><div>'+hex+'</div>' +
'<div class="test" id="test'+i+'" lang="de">文文文文文文&#x'+hex+';<span id="testSpan'+i+'"></span></div>' +
'<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>&#x'+hex+';<span id="refSpan'+i+'"></span></div>' +
'<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>&#x'+hex+';<span id="refSpan'+i+'"></span></div>' +
'</div>'
}
function spansNearEnough(counter) {
@ -60,7 +60,7 @@ function validate() {
for (i=0;i<lines.length;i++) {
test(function() {
assert_true(spansNearEnough(i));
}, lines[i]+' may NOT appear at line start if de and normal');
}, lines[i]+' may appear at line start if de and normal');
// Hide successful tests.
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
}

View file

@ -7,7 +7,7 @@
<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<meta name="assert" content="When the language is neither Japanese nor Chinese, and line-break:strict, a browser will NOT allow a break before a PR character with East Asian Width of A, F, or W.">
<meta name="assert" content="When the language is neither Japanese nor Chinese, and line-break:strict, a browser will allow a break before a PR character with East Asian Width of A, F, or W.">
<style type="text/css">
@font-face {
font-family: 'mplus-1p-regular';
@ -40,10 +40,10 @@ for (var i=0;i<lines.length;i++) {
var firstSpace = lines[i].indexOf(' ')
var hex = lines[i].substr(0,firstSpace)
var name = lines[i].substr(firstSpace)
// make a test
// make a test (ID ÷ PR × ID)
out += '<div class="wrapper"><div>'+hex+'</div>' +
'<div class="test" id="test'+i+'" lang="de">文文文文文文&#x'+hex+';<span id="testSpan'+i+'"></span></div>' +
'<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>&#x'+hex+';<span id="refSpan'+i+'"></span></div>' +
'<div class="ref" id="ref'+i+'" lang="de">文文文文文<br/>&#x'+hex+';<span id="refSpan'+i+'"></span></div>' +
'</div>'
}
function spansNearEnough(counter) {
@ -60,7 +60,7 @@ function validate() {
for (i=0;i<lines.length;i++) {
test(function() {
assert_true(spansNearEnough(i));
}, lines[i]+' may NOT appear at line start if de and strict');
}, lines[i]+' may appear at line start if de and strict');
// Hide successful tests.
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
}

View file

@ -7,7 +7,7 @@
<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<meta name="assert" content="When the language is unknown, and line-break:loose, a browser will NOT allow a break before a PR character with East Asian Width of A, F, or W.">
<meta name="assert" content="When the language is unknown, and line-break:loose, a browser will allow a break before a PR character with East Asian Width of A, F, or W.">
<style type="text/css">
@font-face {
font-family: 'mplus-1p-regular';
@ -40,10 +40,10 @@ for (var i=0;i<lines.length;i++) {
var firstSpace = lines[i].indexOf(' ')
var hex = lines[i].substr(0,firstSpace)
var name = lines[i].substr(firstSpace)
// make a test
// make a test (ID ÷ PR × ID)
out += '<div class="wrapper"><div>'+hex+'</div>' +
'<div class="test" id="test'+i+'" lang="">文文文文文文&#x'+hex+';<span id="testSpan'+i+'"></span></div>' +
'<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>&#x'+hex+';<span id="refSpan'+i+'"></span></div>' +
'<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>&#x'+hex+';<span id="refSpan'+i+'"></span></div>' +
'</div>'
}
function spansNearEnough(counter) {
@ -60,7 +60,7 @@ function validate() {
for (i=0;i<lines.length;i++) {
test(function() {
assert_true(spansNearEnough(i));
}, lines[i]+' may NOT appear at line start if loose');
}, lines[i]+' may appear at line start if loose');
// Hide successful tests.
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
}

View file

@ -7,7 +7,7 @@
<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<meta name="assert" content="When the language is unkonwn, and line-break:normal, a browser will NOT allow a break before a PR character with East Asian Width of A, F, or W.">
<meta name="assert" content="When the language is unkonwn, and line-break:normal, a browser will allow a break before a PR character with East Asian Width of A, F, or W.">
<style type="text/css">
@font-face {
font-family: 'mplus-1p-regular';
@ -40,10 +40,10 @@ for (var i=0;i<lines.length;i++) {
var firstSpace = lines[i].indexOf(' ')
var hex = lines[i].substr(0,firstSpace)
var name = lines[i].substr(firstSpace)
// make a test
// make a test (ID ÷ PR × ID)
out += '<div class="wrapper"><div>'+hex+'</div>' +
'<div class="test" id="test'+i+'" lang="">文文文文文文&#x'+hex+';<span id="testSpan'+i+'"></span></div>' +
'<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>&#x'+hex+';<span id="refSpan'+i+'"></span></div>' +
'<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>&#x'+hex+';<span id="refSpan'+i+'"></span></div>' +
'</div>'
}
function spansNearEnough(counter) {
@ -60,7 +60,7 @@ function validate() {
for (i=0;i<lines.length;i++) {
test(function() {
assert_true(spansNearEnough(i));
}, lines[i]+' may NOT appear at line start if normal');
}, lines[i]+' may appear at line start if normal');
// Hide successful tests.
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
}

View file

@ -7,7 +7,7 @@
<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<meta name="assert" content="When the language is unknown, and line-break:strict, a browser will NOT allow a break before a PR character with East Asian Width of A, F, or W.">
<meta name="assert" content="When the language is unknown, and line-break:strict, a browser will allow a break before a PR character with East Asian Width of A, F, or W.">
<style type="text/css">
@font-face {
font-family: 'mplus-1p-regular';
@ -40,10 +40,10 @@ for (var i=0;i<lines.length;i++) {
var firstSpace = lines[i].indexOf(' ')
var hex = lines[i].substr(0,firstSpace)
var name = lines[i].substr(firstSpace)
// make a test
// make a test (ID ÷ PR × ID)
out += '<div class="wrapper"><div>'+hex+'</div>' +
'<div class="test" id="test'+i+'" lang="">文文文文文文&#x'+hex+';<span id="testSpan'+i+'"></span></div>' +
'<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>&#x'+hex+';<span id="refSpan'+i+'"></span></div>' +
'<div class="ref" id="ref'+i+'" lang="">文文文文文<br/>&#x'+hex+';<span id="refSpan'+i+'"></span></div>' +
'</div>'
}
function spansNearEnough(counter) {
@ -60,7 +60,7 @@ function validate() {
for (i=0;i<lines.length;i++) {
test(function() {
assert_true(spansNearEnough(i));
}, lines[i]+' may NOT appear at line start if strict');
}, lines[i]+' may appear at line start if strict');
// Hide successful tests.
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
}

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Text Reference: overflow-wrap: anywhere</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<style>
div {
/* Use sans-serif fonts to ensure the width of `&nbsp` is larger than `i`. */
font-family: Arial, Helvetica, sans-serif;
font-size: 100px;
width: min-content;
overflow-wrap: anywhere;
border: 5px solid blue;
margin-bottom: 5px; /* To separate <div>s visually. */
}
</style>
<p>The first three div should have the same width, but the fourth one should be wider.</p>
<div>i</div>
<div>i</div>
<div>i</div>
<div>i&nbsp;</div>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>CSS Text Test: overflow-wrap: anywhere</title>
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-anywhere">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
<link rel="match" href="overflow-wrap-anywhere-011-ref.html">
<meta name="assert" content="End-of line space glyph (U+0020 and U+0009)'s width shouldn't contribute to container's min-content width with 'white-space: normal', and non-collapsible spaces should wrap with 'overflow-wrap: anywhere'.">
<style>
div {
/* Use sans-serif fonts to ensure the width of `&nbsp` is larger than `i`. */
font-family: Arial, Helvetica, sans-serif;
font-size: 100px;
width: min-content;
overflow-wrap: anywhere;
border: 5px solid blue;
margin-bottom: 5px; /* To separate <div>s visually. */
}
</style>
<p>The first three div should have the same width, but the fourth one should be wider.</p>
<div>i</div>
<div>i&#x20;</div>
<div>i&#x09;</div>
<div>i&nbsp;</div>
</html>

View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text Test: min-content sizing and white-space: pre-wrap</title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
<link rel="help" 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-anywhere">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#propdef-white-space">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
<link rel="match" href="reference/overflow-wrap-min-content-size-009-ref.html">
<meta name="assert" content="Using 'overflow-wrap:anywhere' doesn't prevent the tabs sequence to hang (inconditionally) , honoring 'white-space: pre-wrap' hence glyphs **are not** considered when calculating min-content intrinsic sizes.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
div {
font: 20px/1 Ahem;
}
.test {
color: green;
background: red;
z-index: -1;
width: min-content;
white-space: pre-wrap;
overflow-wrap: anywhere
}
.ref {
position: absolute;
background: green;
color: transparent;
}
</style>
<p>Test passes if there is a green box below and no red.
<div class="ref"><br><br>X</div>
<div class="test">&#9;&#9;<span>XX</span></div>

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text Test reference</title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
div {
font: 20px/1 Ahem;
position: absolute;
background: green;
color: transparent;
}
</style>
<p>Test passes if there is a green box below and no red.
<div>X<br>X<br>X</div>

View file

@ -9,7 +9,7 @@ div {
</style>
<p>Test passes if the three “A” letters below are vertically aligned with eachother.
<div class=ref>
<div class=ref><br>
          A<br>
          A<br>
          A

View file

@ -14,7 +14,7 @@ div {
<p>Test passes if the black “A” lines up vertically with the blue one, not the orange one.
<div class=right>            A</div>
<div>            A</div>
<div class=right>            A</div>
<div class=wrong>              A</div>

View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text level 3 Test reference</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<style>
div {
font-family: monospace; /* so we can compare tab with a count of preserved spaces */
white-space: pre;
}
</style>
<p>Test passes if the "1"s all line up vertically:
<div>1 2 3 1 2 3 1 2 3 1
1 1 1 1
1 1 1 1</div>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text level 3 Test: tab-size and letter-spacing</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#tab-size-property">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property">
<link rel="match" href="tab-size-spacing-002-ref.html">
<meta name="assert" content="For the tab-size property, a <number> represents the measure as a multiple of the space characters advance width (U+0020) including its associated letter-spacing and word-spacing">
<style>
div {
font-family: monospace; /* so we can compare tab with a count of preserved spaces */
white-space: pre;
}
.test {
letter-spacing: 1ch; /* effectively double the advance of the characters */
tab-size: 3;
}
.ref1 {
letter-spacing: 1ch;
}
.ref2 {
white-space: pre;
}
</style>
<p>Test passes if the "1"s all line up vertically:
<div class=ref1>1231231231</div>
<div class=test>1&#9;1&#9;1&#9;1</div>
<div class=ref2>1 1 1 1</div>

View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text level 3 Test reference</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<style>
div {
font-family: monospace; /* so we can compare tab with a count of preserved spaces */
white-space: pre;
}
</style>
<p>Test passes if the "1"s all line up vertically:
<div>1 2 1 2 1 2 1
1 1 1 1
1 1 1 1</div>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text level 3 Test: tab-size and word-spacing</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#tab-size-property">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property">
<link rel="match" href="tab-size-spacing-003-ref.html">
<meta name="assert" content="For the tab-size property, a <number> represents the measure as a multiple of the space characters advance width (U+0020) including its associated letter-spacing and word-spacing">
<style>
div {
font-family: monospace; /* so we can compare tab with a count of preserved spaces */
white-space: pre;
}
.test {
word-spacing: 100%; /* effectively double the size of SPACE, and hence of tabs */
tab-size: 3;
}
.ref1 {
word-spacing: 100%;
}
.ref2 {
white-space: pre;
}
</style>
<p>Test passes if the "1"s all line up vertically:
<div class=ref1>1 2 1 2 1 2 1</div>
<div class=test>1&#9;1&#9;1&#9;1</div>
<div class=ref2>1 1 1 1</div>

View file

@ -6,20 +6,19 @@
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style type='text/css'>
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px Ahem; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 402px; color: orange; font: 24px/24px Ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
.rb1 { top: 0; left: 0; height: 48px; }
.rb2 { top: 0; left: 109px; height: 48px; }
.rb3 { top: 0; left: 218px; height: 48px; }
.rb4 { top: 0; left: 327px; height: 72px; }
.rb5 { top: 48px; right: 96px; height: 24px; }
.rb6 { top: 48px; right: 192px; height: 24px; }
.rb1 { top: 0; left: 0; height: 72px; }
.rb2 { top: 0; left: 110px; height: 48px; }
.rb3 { top: 0; left: 220px; height: 48px; }
.rb4 { top: 0; left: 330px; height: 72px; }
.rb5 { top: 48px; left: 165px; height: 24px; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is the same.</div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div></div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div></div>
</body>
</html>
</html>

View file

@ -6,22 +6,21 @@
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style type='text/css'>
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px Ahem; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 402px; color: orange; font: 24px/24px Ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
.rb1 { top: 0; right: 0; height: 48px; }
.rb2 { top: 0; right: 109px; height: 48px; }
.rb3 { top: 0; right: 218px; height: 48px; }
.rb4 { top: 0; right: 327px; height: 72px; }
.rb5 { top: 48px; left: 96px; height: 24px; }
.rb6 { top: 48px; left: 192px; height: 24px; }
.rb1 { top: 0; right: 0; height: 72px; }
.rb2 { top: 0; right: 110px; height: 48px; }
.rb3 { top: 0; right: 220px; height: 48px; }
.rb4 { top: 0; right: 330px; height: 72px; }
.rb5 { top: 48px; left: 165px; height: 24px; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
<div style="direction: rtl;">
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div></div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div></div>
</div>
</body>
</html>
</html>

View file

@ -1,25 +0,0 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>text-align: justify-all, dir=rtl</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style type='text/css'>
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px Ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
.rb1 { top: 0; left: 0; height: 48px; }
.rb2 { top: 0; left: 109px; height: 48px; }
.rb3 { top: 0; left: 218px; height: 48px; }
.rb4 { top: 0; left: 327px; height: 72px; }
.rb5 { top: 48px; right: 96px; height: 24px; }
.rb6 { top: 48px; right: 192px; height: 24px; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is the same.</div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
</body>
</html>

View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>text-align: justify-all, dir=ltr</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style type='text/css'>
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px Ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
.rb1 { top: 0; right: 0; height: 48px; }
.rb2 { top: 0; right: 109px; height: 48px; }
.rb3 { top: 0; right: 218px; height: 48px; }
.rb4 { top: 0; right: 327px; height: 72px; }
.rb5 { top: 48px; left: 96px; height: 24px; }
.rb6 { top: 48px; left: 192px; height: 24px; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
<div dir="rtl">
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
</div>
</body>
</html>

View file

@ -1,25 +0,0 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>text-align: justify-all, dir=auto, RTL first strong</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style type='text/css'>
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px Ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
.rb1 { top: 0; left: 0; height: 48px; }
.rb2 { top: 0; left: 109px; height: 48px; }
.rb3 { top: 0; left: 218px; height: 48px; }
.rb4 { top: 0; left: 327px; height: 72px; }
.rb5 { top: 48px; right: 96px; height: 24px; }
.rb6 { top: 48px; right: 192px; height: 24px; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is the same.</div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
</body>
</html>

View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>text-align: justify-all, dir=auto, LTR first strong</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style type='text/css'>
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px Ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
.rb1 { top: 0; right: 0; height: 48px; }
.rb2 { top: 0; right: 109px; height: 48px; }
.rb3 { top: 0; right: 218px; height: 48px; }
.rb4 { top: 0; right: 327px; height: 72px; }
.rb5 { top: 48px; left: 96px; height: 24px; }
.rb6 { top: 48px; left: 192px; height: 24px; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is the same.</div>
<div dir="rtl">
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
<div class="ref"><div class="rb rb1"></div><div class="rb rb2"></div><div class="rb rb3"></div><div class="rb rb4"></div><div class="rb rb5"></div><div class="rb rb6"></div></div>
</div>
</body>
</html>

View file

@ -11,20 +11,19 @@
<style type='text/css'>
.test { text-align: justify-all; direction: rtl; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px Ahem; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 402px; color: orange; font: 24px/24px Ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
#rb1 { top: 0; left: 0; height: 48px; }
#rb2 { top: 0; left: 109px; height: 48px; }
#rb3 { top: 0; left: 218px; height: 48px; }
#rb4 { top: 0; left: 327px; height: 72px; }
#rb5 { top: 48px; right: 96px; height: 24px; }
#rb6 { top: 48px; right: 192px; height: 24px; }
#rb1 { top: 0; left: 0; height: 72px; }
#rb2 { top: 0; left: 110px; height: 48px; }
#rb3 { top: 0; left: 220px; height: 48px; }
#rb4 { top: 0; left: 330px; height: 72px; }
#rb5 { top: 48px; left: 165px; height: 24px; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is the same.</div>
<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
<div class="test">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX </div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div><div class="rb" id="rb6"></div></div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div></div>
</body>
</html>
</html>

View file

@ -11,22 +11,21 @@
<style type='text/css'>
.test { text-align: justify-all; direction: ltr; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px Ahem; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 402px; color: orange; font: 24px/24px Ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
#rb1 { top: 0; right: 0; height: 48px; }
#rb2 { top: 0; right: 109px; height: 48px; }
#rb3 { top: 0; right: 218px; height: 48px; }
#rb4 { top: 0; right: 327px; height: 72px; }
#rb5 { top: 48px; left: 96px; height: 24px; }
#rb6 { top: 48px; left: 192px; height: 24px; }
#rb1 { top: 0; right: 0; height: 72px; }
#rb2 { top: 0; right: 110px; height: 48px; }
#rb3 { top: 0; right: 220px; height: 48px; }
#rb4 { top: 0; right: 330px; height: 72px; }
#rb5 { top: 48px; left: 165px; height: 24px; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
<div style="direction: rtl;">
<div class="test">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX </div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div><div class="rb" id="rb6"></div></div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div></div>
</div>
</body>
</html>
</html>

View file

@ -5,26 +5,25 @@
<title>text-align: justify-all, dir=rtl</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-justifyall-ref-003.html'>
<link rel='match' href='reference/text-align-justifyall-ref-001.html'>
<meta name="assert" content="text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style type='text/css'>
.test { text-align: justify-all; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px Ahem; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 402px; color: orange; font: 24px/24px Ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
#rb1 { top: 0; left: 0; height: 48px; }
#rb2 { top: 0; left: 109px; height: 48px; }
#rb3 { top: 0; left: 218px; height: 48px; }
#rb4 { top: 0; left: 327px; height: 72px; }
#rb5 { top: 48px; right: 96px; height: 24px; }
#rb6 { top: 48px; right: 192px; height: 24px; }
#rb1 { top: 0; left: 0; height: 72px; }
#rb2 { top: 0; left: 110px; height: 48px; }
#rb3 { top: 0; left: 220px; height: 48px; }
#rb4 { top: 0; left: 330px; height: 72px; }
#rb5 { top: 48px; right: 165px; height: 24px; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is the same.</div>
<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
<div class="test" dir="rtl">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX </div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div><div class="rb" id="rb6"></div></div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div></div>
</body>
</html>
</html>

View file

@ -4,29 +4,28 @@
<meta charset="utf-8">
<title>text-align: justify-all, dir=ltr</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel='match' href='reference/text-align-justifyall-ref-004.html'>
<link rel='match' href='reference/text-align-justifyall-ref-002.html'>
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<meta name="assert" content="text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style type='text/css'>
.test { text-align: justify-all; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px Ahem; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 402px; color: orange; font: 24px/24px Ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
#rb1 { top: 0; right: 0; height: 48px; }
#rb2 { top: 0; right: 109px; height: 48px; }
#rb3 { top: 0; right: 218px; height: 48px; }
#rb4 { top: 0; right: 327px; height: 72px; }
#rb5 { top: 48px; left: 96px; height: 24px; }
#rb6 { top: 48px; left: 192px; height: 24px; }
#rb1 { top: 0; right: 0; height: 72px; }
#rb2 { top: 0; right: 110px; height: 48px; }
#rb3 { top: 0; right: 220px; height: 48px; }
#rb4 { top: 0; right: 330px; height: 72px; }
#rb5 { top: 48px; left: 165px; height: 24px; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
<div dir="rtl">
<div class="test" dir="ltr">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX </div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div><div class="rb" id="rb6"></div></div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div></div>
</div>
</body>
</html>
</html>

View file

@ -5,26 +5,25 @@
<title>text-align: justify-all, dir=auto, RTL first strong</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-justifyall-ref-005.html'>
<link rel='match' href='reference/text-align-justifyall-ref-001.html'>
<meta name="assert" content="text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style type='text/css'>
.test { text-align: justify-all; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px Ahem; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 402px; color: orange; font: 24px/24px Ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
#rb1 { top: 0; left: 0; height: 48px; }
#rb2 { top: 0; left: 109px; height: 48px; }
#rb3 { top: 0; left: 218px; height: 48px; }
#rb4 { top: 0; left: 327px; height: 72px; }
#rb5 { top: 48px; right: 96px; height: 24px; }
#rb6 { top: 48px; right: 192px; height: 24px; }
#rb1 { top: 0; left: 0; height: 72px; }
#rb2 { top: 0; left: 110px; height: 48px; }
#rb3 { top: 0; left: 220px; height: 48px; }
#rb4 { top: 0; left: 330px; height: 72px; }
#rb5 { top: 48px; right: 165px; height: 24px; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is the same.</div>
<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
<div dir="auto" class="test">&rlm;XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div><div class="rb" id="rb6"></div></div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div></div>
</body>
</html>
</html>

View file

@ -5,28 +5,27 @@
<title>text-align: justify-all, dir=auto, LTR first strong</title>
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-align-property'>
<link rel='match' href='reference/text-align-justifyall-ref-006.html'>
<link rel='match' href='reference/text-align-justifyall-ref-002.html'>
<meta name="assert" content="text-align:justify-all aligns text in order to exactly fill the line box, forcing the last line to justify as well.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style type='text/css'>
.test { text-align: justify-all; }
/* the CSS below is not part of the test */
.test, .ref { border: 1px solid orange; margin: 20px; width: 399px; color: orange; font: 24px/24px Ahem; }
.test, .ref { border: 1px solid orange; margin: 20px; width: 402px; color: orange; font: 24px/24px Ahem; }
.ref { text-align: right; position: relative; height:72px; }
.rb { position: absolute; background-color: orange; width: 72px; }
#rb1 { top: 0; right: 0; height: 48px; }
#rb2 { top: 0; right: 109px; height: 48px; }
#rb3 { top: 0; right: 218px; height: 48px; }
#rb4 { top: 0; right: 327px; height: 72px; }
#rb5 { top: 48px; left: 96px; height: 24px; }
#rb6 { top: 48px; left: 192px; height: 24px; }
#rb1 { top: 0; right: 0; height: 72px; }
#rb2 { top: 0; right: 110px; height: 48px; }
#rb3 { top: 0; right: 220px; height: 48px; }
#rb4 { top: 0; right: 330px; height: 72px; }
#rb5 { top: 48px; left: 165px; height: 24px; }
</style>
</head>
<body>
<div id='instructions'>Test passes if the shading in both orange boxes is the same.</div>
<div id='instructions'>Test passes if the shading in both orange boxes is identical.</div>
<div dir="rtl">
<div dir="auto" class="test">XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX XXX</div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div><div class="rb" id="rb6"></div></div>
<div class="ref"><div class="rb" id="rb1"></div><div class="rb" id="rb2"></div><div class="rb" id="rb3"></div><div class="rb" id="rb4"></div><div class="rb" id="rb5"></div></div>
</div>
</body>
</html>
</html>

View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<title>text-align: -webkit-match-parent should not be supported</title>
<link rel="help" href="https://drafts.csswg.org/css-text/#valdef-text-align-match-parent">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
<script>
test(function() {
assert_false(CSS.supports('text-align: -webkit-match-parent'));
});
</script>

View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<title>text-indent in anonymous flex and grid items</title>
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="match" href="reference/anonymous-flex-grid-item-001-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property" title="Anonymous flex/grid items aren't anonymous block boxes.">
<link rel="help" href="https://crbug.com/1159311">
<meta name="flags" content="ahem">
<meta name="assert" content="text-indent applies to the first line of an anonymous flex item that is not the first item in the flex/grid container.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
main {
font: 10px/1 Ahem;
color: orange;
}
</style>
<p>
Pass conditions:
<ul>
<li>The top left quadrant of the black-bordered rectangle is white.
<li>Only the top left quadrant of the black-bordered rectangle is white.
<li>The rest of the black-bordered rectangle is orange.
<li>No orange is outside the black-bordered rectangle.
</ul>
</p>
<main>
<div style="text-indent: 50px; border: 3px solid black; width: 100px; display: flex;">
<div style="width: 0px;"></div>
ABCDE
ABCDEABCDE
</div>
</main>

View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<title>text-indent in anonymous flex and grid items</title>
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="match" href="reference/anonymous-flex-grid-item-001-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property" title="Anonymous flex/grid items aren't anonymous block boxes.">
<link rel="help" href="https://crbug.com/1159311">
<meta name="flags" content="ahem">
<meta name="assert" content="text-indent applies to the first line of an anonymous grid item that is not the first item in the flex/grid container.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
main {
font: 10px/1 Ahem;
color: orange;
}
</style>
<p>
Pass conditions:
<ul>
<li>The top left quadrant of the black-bordered rectangle is white.
<li>Only the top left quadrant of the black-bordered rectangle is white.
<li>The rest of the black-bordered rectangle is orange.
<li>No orange is outside the black-bordered rectangle.
</ul>
</p>
<main>
<div style="text-indent: 50px; border: 3px solid black; width: 100px; display: grid; grid-template-columns: auto auto;">
<div style="width: 0px;"></div>
ABCDE
ABCDEABCDE
</div>
</main>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<title>text-indent in anonymous flex and grid items</title>
<meta name="flags" content="ahem">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
main {
font: 10px/1 Ahem;
color: orange;
}
</style>
<p>
Pass conditions:
<ul>
<li>The top left quadrant of the black-bordered rectangle is white.
<li>Only the top left quadrant of the black-bordered rectangle is white.
<li>The rest of the black-bordered rectangle is orange.
<li>No orange is outside the black-bordered rectangle.
</ul>
</p>
<main>
<div style="text-indent: 50px; border: 3px solid black; width: 100px;">
ABCDE ABCDEABCDE
</div>
</main>

View file

@ -0,0 +1,14 @@
<!doctype html>
<link rel=author href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel=author href="https://mozilla.org" title="Mozilla">
<link rel=help href="https://github.com/w3c/csswg-drafts/issues/6156">
<title>text-justify: distribute is a parse-time alias of inter-character</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
test(function() {
let style = document.createElement("div").style;
style.textJustify = "distribute";
assert_equals(style.textJustify, "inter-character");
});
</script>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>test reference</title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
<style>
div {
width: 7ch;
font: 20px monospace;
background: blue;
}
span {
background: green;
}
</style>
<p>Test passes if we have XX at each edge of the blue box and XXX in the second line (left-edge trailing space if not removed)</p>
<div><span>XX&nbsp;&nbsp;&nbsp;XX&nbsp;<br>XXX</span></div>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>test reference</title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
<style>
div {
width: 7ch;
font: 20px monospace;
background: blue;
margin-left: 20px;
direction: rtl;
}
span {
background: green;
}
</style>
<p>Test passes if we have XX at each edge of the blue box and XXX in the second line (left-edge trailing space if not removed)</p>
<div><span>XX&nbsp;&nbsp;&nbsp;XX&nbsp;<br>XXX</span></div>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>test reference</title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
<style>
@font-face {
font-family: 'ezra_silregular';
src: url('/fonts/sileot-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
div {
font-family: ezra_silregular, monospace;
font-size: 15px;
}
</style>
<p>Test passes if we have a first line with hebrew justified and XXX in the second line (left-edge trailing space if not removed)</p>
<div style="position: relative; width: 20px;">
<div style="display: inline; background: green; position: absolute; right: 0px;">&nbsp;</div>
</div>
<div style="position: relative; margin-left: 20px; width: 70px;">
<div style="float: right; background: green;">הם</div>
<div style="background: green;">דה<br></div>
</div>
<div style="position: relative; margin-left: 20px; background: blue; width: 70px; direction: rtl;">
<div style="display: inline; background: green; ">XXX</div>
</div>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>test reference</title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
<style>
div {
width: 7ch;
font: 20px monospace;
background: blue;
}
span {
background: green;
}
</style>
<p>Test passes if we have XX at each edge of the blue box and XXX in the second line (left-edge trailing space if not removed)</p>
<div><span>XX&nbsp;&nbsp;&nbsp;XX<br>XXX</span></div>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>test reference</title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
<style>
div {
width: 7ch;
font: 20px monospace;
background: blue;
margin-left: 20px;
direction: rtl;
}
span {
background: green;
}
</style>
<p>Test passes if we have XX at each edge of the blue box and XXX in the second line (left-edge trailing space if not removed)</p>
<div><span>XX&nbsp;&nbsp;&nbsp;XX<br>XXX</span></div>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>test reference</title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
<style>
@font-face {
font-family: 'ezra_silregular';
src: url('/fonts/sileot-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
div {
font-family: ezra_silregular, monospace;
font-size: 15px;
}
</style>
<p>Test passes if we have a first line with hebrew justified and XXX in the second line (left-edge trailing space if not removed)</p>
<div style="position: relative; margin-left: 20px; width: 70px;">
<div style="float: right; background: green;">הם</div>
<div style="background: green;">דה<br></div>
</div>
<div style="position: relative; margin-left: 20px; background: blue; width: 70px; direction: rtl;">
<div style="display: inline; background: green; ">XXX</div>
</div>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>CSS text tests: How trailing spaces affect text-justify </title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-justify-property'>
<link rel='match' href='reference/text-justify-and-trailing-spaces-001-ref.html'>
<link rel='match' href='reference/text-justify-and-trailing-spaces-alt-001-ref.html'>
<meta name="assert" content="The text in the first line is correctly justified, leaving aside the trailing space, which must hang or be removed.">
<style>
.test {
width: 7ch;
font: 20px monospace;
background: blue;
white-space: pre-wrap;
text-align: justify;
}
.test > span {
background: green;;
}
</style>
<p>Test passes if we have XX at each edge of the blue box and XXX in the second line (left-edge trailing space if not removed)</p>
<div class="test"><span>XX XX </span><span>XXX</span></div>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>CSS text tests: How trailing spaces affect text-justify </title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-justify-property'>
<link rel='match' href='reference/text-justify-and-trailing-spaces-001-ref.html'>
<link rel='match' href='reference/text-justify-and-trailing-spaces-alt-001-ref.html'>
<meta name="assert" content="The text in the first line is correctly justified, leaving aside the trailing space, which must hang or be removed.">
<style>
.test {
width: 7ch;
font: 20px monospace;
background: blue;
white-space: pre-wrap;
text-align: justify;
}
.test > span {
background: green;;
}
</style>
<p>Test passes if we have XX at each edge of the blue box and XXX in the second line (left-edge trailing space if not removed)</p>
<div class="test"><span>XX XX XXX</span></div>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>CSS text tests: How trailing spaces affect text-justify </title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-justify-property'>
<link rel='match' href='reference/text-justify-and-trailing-spaces-003-ref.html'>
<link rel='match' href='reference/text-justify-and-trailing-spaces-alt-003-ref.html'>
<meta name="assert" content="The RTL text in the first line is correctly justified, leaving aside the trailing space, which must hang or be removed.">
<style>
.test {
width: 7ch;
font: 20px monospace;
background: blue;
margin-left: 20px;
direction: rtl;
white-space: pre-wrap;
text-align: justify;
}
.test > span {
background: green;;
}
</style>
<p>Test passes if we have XX at each edge of the blue box and XXX in the second line (left-edge trailing space if not removed)</p>
<div class="test"><span>XX XX </span><span>XXX</span></div>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>CSS text tests: How trailing spaces affect text-justify </title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-justify-property'>
<link rel='match' href='reference/text-justify-and-trailing-spaces-003-ref.html'>
<link rel='match' href='reference/text-justify-and-trailing-spaces-alt-003-ref.html'>
<meta name="assert" content="The RTL text in the first line is correctly justified, leaving aside the trailing space, which must hang or be removed.">
<style>
.test {
width: 7ch;
font: 20px monospace;
background: blue;
margin-left: 20px;
direction: rtl;
white-space: pre-wrap;
text-align: justify;
}
.test > span {
background: green;;
}
</style>
<p>Test passes if we have XX at each edge of the blue box and XXX in the second line (left-edge trailing space if not removed)</p>
<div class="test"><span>XX XX XXX</span></div>

View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>CSS text tests: How trailing spaces affect text-justify </title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-justify-property'>
<link rel='match' href='reference/text-justify-and-trailing-spaces-005-ref.html'>
<link rel='match' href='reference/text-justify-and-trailing-spaces-alt-005-ref.html'>
<meta name="assert" content="The RTL text in the first line is correctly justified, leaving aside the trailing space, which must hang or be removed.">
<style>
@font-face {
font-family: 'ezra_silregular';
src: url('/fonts/sileot-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.test {
width: 70px;
font-family: ezra_silregular, monospace;
font-size: 15px;
background: blue;
margin-left: 20px;
direction: rtl;
white-space: pre-wrap;
text-align: justify;
}
.test > span {
background: green;;
}
</style>
<p>Test passes if we have a first line with hebrew justified and XXX in the second line (left-edge trailing space if not removed)</p>
<div class="test"><span>הם דה </span><span>XXX</span></div>

View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>CSS text tests: How trailing spaces affect text-justify </title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" />
<link rel='help' href='https://drafts.csswg.org/css-text-3/#text-justify-property'>
<link rel='match' href='reference/text-justify-and-trailing-spaces-005-ref.html'>
<link rel='match' href='reference/text-justify-and-trailing-spaces-alt-005-ref.html'>
<meta name="assert" content="The RTL text in the first line is correctly justified, leaving aside the trailing space, which must hang or be removed.">
<style>
@font-face {
font-family: 'ezra_silregular';
src: url('/fonts/sileot-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.test {
width: 70px;
font-family: ezra_silregular, monospace;
font-size: 15px;
background: blue;
margin-left: 20px;
direction: rtl;
white-space: pre-wrap;
text-align: justify;
}
.test > span {
background: green;;
}
</style>
<p>Test passes if we have a first line with hebrew justified and XXX in the second line (left-edge trailing space if not removed)</p>
<div class="test"><span>הם דה XXX</span></div>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text Test: text-transform uppercase German sharp S and selection reference file</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<style>
#target {
color: white;
background: red;
}
#target::selection {
background: green;
}
</style>
<p>The test passes if you see no red below (when you select the text below you can select the whole "SS" text).</p>
<span id="target" lang="de">SS</span>
<script>
window.getSelection().setBaseAndExtent(target, 0, target, 1);
</script>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text Test: text-transform uppercase German sharp S and selection</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-text/#propdef-text-transform">
<link rel="match" href="reference/text-transform-upperlower-105-ref.html">
<meta name="assert" content="text-transform: uppercase will uppercase the German sharp S as SS, and the whole 2 characters width is selectable.">
<style>
#target {
text-transform: uppercase;
color: white;
background: red;
}
#target::selection {
background: green;
}
</style>
<p>The test passes if you see no red below (when you select the text below you can select the whole "SS" text).</p>
<span id="target" lang="de">&#x00DF;</span>
<script>
window.getSelection().setBaseAndExtent(target, 0, target, 1);
</script>

View file

@ -3,7 +3,10 @@
<title>CSS test reference</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"/>
<style>
div { white-space: pre; }
div {
white-space: pre;
line-height: 1;
}
</style>
<p>Test passes if the characters below are arranged in pairs with a empty line in between.</p>

View file

@ -14,4 +14,4 @@ span { color: blue; }
<p>This test passes if there is a green square and no red.
<div>XX<br>XX</div>
<div>XX<span>X</span><br>XX</div>

View file

@ -9,9 +9,8 @@ div {
font: 25px/1 Ahem;
color: green;
}
span { color: blue; }
</style>
<p>This test passes if there is a green square and no red.
<div>XX<span>X</span><br>XX</div>
<div>XX<br>XX</div>

View file

@ -10,6 +10,7 @@
div {
width: 3em;
white-space: break-spaces;
line-height: 1;
}
</style>

View file

@ -10,6 +10,7 @@
div {
width: 3em;
white-space: break-spaces;
line-height: 1;
}
</style>

View file

@ -10,6 +10,7 @@
div {
width: 3em;
white-space: break-spaces;
line-height: 1;
}
</style>

View file

@ -10,6 +10,7 @@
div {
width: 3em;
white-space: break-spaces;
line-height: 1;
}
</style>

View file

@ -10,6 +10,7 @@
div {
width: 3em;
white-space: break-spaces;
line-height: 1;
}
</style>

View file

@ -10,6 +10,7 @@
div {
width: 3em;
white-space: break-spaces;
line-height: 1;
}
</style>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text Test: min-content sizing and white-space: pre-wrap</title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#propdef-white-space">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-004-ref.html">
<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html">
<meta name="assert" content="Preserved spaces at the end of the line unconditioanlly hang, hence they do not affect the intrinsic min-content size.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
div {
font: 25px/1 Ahem;
color: green;
background: red;
width: min-content;
white-space: pre-wrap;
}
span { background: blue; } /* If the space is removed instead of hanging, there will be no blue box*/
</style>
<p>This test passes if there is a green square and no red.
<div>XX<span>&#x0020;</span>XX</div>

View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text Test: min-content sizing and white-space: pre-wrap</title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#propdef-white-space">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html">
<meta name="assert" content="Preserved spaces unconditionally hang if they might overflow otherwise, hence they do not affect the intrinsic min-content size.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
div {
font: 25px/1 Ahem;
color: green;
background: red;
width: min-content;
white-space: pre-wrap;
}
</style>
<p>This test passes if there is a green square and no red.
<div>XX&#x0020;XX</div>

View file

@ -5,7 +5,7 @@
<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" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-004-ref.html">
<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html">
<meta name="assert" content="Preserved white space at the end of a soft-wrapped line is hanged when white-space is pre-wrap.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>

View file

@ -8,6 +8,7 @@
<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="match" href="reference/white-space-pre-wrap-trailing-spaces-004-ref.html">
<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html">
<meta name="assert" content="Preserved white space at the end of a soft-wrapped line is hanged when white-space is pre-wrap.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
@ -20,6 +21,9 @@ div {
white-space: pre-wrap;
overflow-wrap: break-word;
}
span {
background: blue;
}
</style>
<p>This test passes if there is a green square and no red.

View file

@ -7,7 +7,7 @@
<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
<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="match" href="reference/white-space-pre-wrap-trailing-spaces-004-ref.html">
<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html">
<meta name="assert" content="Preserved white space at the end of a soft-wrapped line is hanged when white-space is pre-wrap.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>

View file

@ -7,7 +7,7 @@
<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
<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-anywhere">
<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-004-ref.html">
<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html">
<meta name="assert" content="Preserved white space at the end of a soft-wrapped line is hanged when white-space is pre-wrap.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>

View file

@ -8,6 +8,7 @@
<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-word-break-break-all">
<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-004-ref.html">
<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html">
<meta name="assert" content="Preserved white space at the end of a soft-wrapped line is hanged when white-space is pre-wrap.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
@ -20,6 +21,7 @@ div {
white-space: pre-wrap;
word-break: break-all;
}
span { background: blue; } /* If the space is removed instead of hanging, there will be no blue box*/
</style>
<p>This test passes if there is a green square and no red.

View file

@ -7,7 +7,7 @@
<link rel="help" title="4.1.3. Phase II: Trimming and Positioning" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
<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-word-break-break-all">
<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-004-ref.html">
<link rel="match" href="reference/white-space-pre-wrap-trailing-spaces-alt-004-ref.html">
<meta name="assert" content="Preserved white space at the end of a soft-wrapped line is hanged when white-space is pre-wrap.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>

View file

@ -1,12 +1,12 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text Test: overflow-wrap: anywhere and intrinsic sizing</title>
<title>CSS Text Test: word-break: break-word and intrinsic sizing</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org/">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
<meta name="flags" content="">
<link rel="match" href="../overflow-wrap/reference/overflow-wrap-min-content-size-002-ref.html">
<meta name="assert" content="overflow-wrap:anywhere doesn't break grapheme cluster and min-content intrinsic size should take that into account.">
<meta name="assert" content="'word-break: break-word' doesn't break grapheme cluster and min-content intrinsic size should take that into account.">
<style>
#wrapper {
width: 0px;

View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Text Test: min-content sizing and white-space: pre-wrap</title>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-property">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-word-break-break-word">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#propdef-white-space">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
<link rel="match" href="../overflow-wrap/reference/overflow-wrap-min-content-size-009-ref.html">
<meta name="assert" content="word-break: break-word should behave as overflow-wrap: anywhere, so breaking opportunities **are not** considered when calculating min-content intrinsic sizes.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
div {
font: 20px/1 Ahem;
}
.test {
color: green;
background: red;
z-index: -1;
width: min-content;
white-space: pre-wrap;
word-break: break-word;
}
.ref {
position: absolute;
background: green;
color: transparent;
}
</style>
<p>Test passes if there is a green box below and no red.
<div class="ref"><br><br>X</div>
<div class="test">&#9;&#9;<span>XX</span></div>