mirror of
https://github.com/servo/servo.git
synced 2025-08-10 07:55:33 +01:00
Update web-platform-tests to revision b'468d01bbd84da2babf265c6af46947be68713440'
This commit is contained in:
parent
35e95f55a1
commit
58e8ee674b
9438 changed files with 266112 additions and 106976 deletions
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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'
|
||||
}
|
||||
|
|
|
@ -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'
|
||||
}
|
||||
|
|
|
@ -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'
|
||||
}
|
||||
|
|
|
@ -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'
|
||||
}
|
||||
|
|
|
@ -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'
|
||||
}
|
||||
|
|
|
@ -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'
|
||||
}
|
||||
|
|
|
@ -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 ` ` 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 </div>
|
||||
</html>
|
|
@ -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 ` ` 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 </div>
|
||||
</html>
|
|
@ -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">		<span>XX</span></div>
|
|
@ -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>
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
|
@ -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 character’s 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	1	1	1</div>
|
||||
<div class=ref2>1 1 1 1</div>
|
|
@ -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>
|
|
@ -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 character’s 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	1	1	1</div>
|
||||
<div class=ref2>1 1 1 1</div>
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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">‏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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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 XX <br>XXX</span></div>
|
||||
|
|
@ -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 XX <br>XXX</span></div>
|
|
@ -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;"> </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>
|
||||
|
|
@ -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 XX<br>XXX</span></div>
|
||||
|
|
@ -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 XX<br>XXX</span></div>
|
|
@ -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>
|
||||
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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">ß</span>
|
||||
|
||||
<script>
|
||||
window.getSelection().setBaseAndExtent(target, 0, target, 1);
|
||||
</script>
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -10,6 +10,7 @@
|
|||
div {
|
||||
width: 3em;
|
||||
white-space: break-spaces;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
@ -10,6 +10,7 @@
|
|||
div {
|
||||
width: 3em;
|
||||
white-space: break-spaces;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
@ -10,6 +10,7 @@
|
|||
div {
|
||||
width: 3em;
|
||||
white-space: break-spaces;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
@ -10,6 +10,7 @@
|
|||
div {
|
||||
width: 3em;
|
||||
white-space: break-spaces;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
@ -10,6 +10,7 @@
|
|||
div {
|
||||
width: 3em;
|
||||
white-space: break-spaces;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
@ -10,6 +10,7 @@
|
|||
div {
|
||||
width: 3em;
|
||||
white-space: break-spaces;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
@ -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> </span>XX</div>
|
|
@ -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 XX</div>
|
|
@ -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>
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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">		<span>XX</span></div>
|
Loading…
Add table
Add a link
Reference in a new issue