mirror of
https://github.com/servo/servo.git
synced 2025-10-04 02:29:12 +01:00
Update web-platform-tests to revision c583bcd7eb30f38cb2d673031cde245776f1da5a
This commit is contained in:
WPT Sync Bot
parent
ba1ed11ced
commit
bd791500b2
107 changed files with 2870 additions and 469 deletions
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Whitespace across display:contents shadow host</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-rules">
|
||||
<link rel="match" href="../reference/pass_if_two_words.html">
|
||||
<p>There should be a space between "two" and "words" below.</p>
|
||||
<div id="host" style="display:contents"></div> <span>words</span>
|
||||
<script>
|
||||
host.attachShadow({mode:"open"}).innerHTML = "two";
|
||||
</script>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<title>CSS Flexbox Test: Flex item - contiguous text runs - node removal</title>
|
||||
<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items">
|
||||
<link rel="match" href="anonymous-flex-item-ref.html">
|
||||
<link rel="match" href="../reference/pass_if_two_words.html">
|
||||
<p>There should be a space between "two" and "words" below.</p>
|
||||
<div style="display:flex">two <span id="spanRemove"></span>words</div>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,6 @@
|
|||
<title>CSS Flexbox Test: Flex item - contiguous text runs - display:none</title>
|
||||
<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items">
|
||||
<link rel="match" href="anonymous-flex-item-ref.html">
|
||||
<link rel="match" href="../reference/pass_if_two_words.html">
|
||||
<p>There should be a space between "two" and "words" below.</p>
|
||||
<div style="display:flex">two <span style="display:none"></span>words</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<title>CSS Flexbox Test: Flex item - contiguous text runs - display:none dynamic</title>
|
||||
<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-items">
|
||||
<link rel="match" href="anonymous-flex-item-ref.html">
|
||||
<link rel="match" href="../reference/pass_if_two_words.html">
|
||||
<p>There should be a space between "two" and "words" below.</p>
|
||||
<div style="display:flex">two <span id="noneSpan"></span>words</div>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
spec: https://drafts.csswg.org/css-overscroll-behavior/
|
||||
suggested_reviewers:
|
||||
- majido
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Inheritance of CSS Overscroll Behavior properties</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overscroll-behavior/#property-index">
|
||||
<meta name="assert" content="Properties inherit or not according to the spec.">
|
||||
<meta name="assert" content="Properties have initial values according to the spec.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/inheritance-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
<script>
|
||||
assert_not_inherited('overscroll-behavior-x', 'auto', 'contain');
|
||||
assert_not_inherited('overscroll-behavior-y', 'auto', 'contain');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<title>Registering a property causes invalidation for initial value</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
|
||||
<link rel="match" href="parse-input-arguments-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
<body>
|
||||
<style>
|
||||
#target {
|
||||
background: paint(geometry);
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<div id="target"></div>
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('geometry', class {
|
||||
static get inputProperties() { return ['--color']; }
|
||||
paint(ctx, geom, styleMap) {
|
||||
ctx.strokeStyle = styleMap.get('--color').toString();
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
async function test() {
|
||||
getComputedStyle(target);
|
||||
let code = document.getElementById('code').textContent;
|
||||
await importWorklet(CSS.paintWorklet, code);
|
||||
await workletPainted();
|
||||
CSS.registerProperty({
|
||||
name: '--color',
|
||||
syntax: '<color>',
|
||||
initialValue: 'green',
|
||||
inherits: false
|
||||
});
|
||||
await workletPainted();
|
||||
takeScreenshot();
|
||||
}
|
||||
|
||||
test();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<title>Registering a property causes invalidation for applied value</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-paint-api-1/#examples">
|
||||
<link rel="match" href="parse-input-arguments-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
<body>
|
||||
<style>
|
||||
#target {
|
||||
background: paint(geometry);
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
--length: 100px;
|
||||
}
|
||||
</style>
|
||||
<div id="target"></div>
|
||||
<script id="code" type="text/worklet">
|
||||
registerPaint('geometry', class {
|
||||
static get inputProperties() { return ['--length']; }
|
||||
paint(ctx, geom, styleMap) {
|
||||
let value = styleMap.get('--length');
|
||||
let pass = value.value === 100 && value.unit === 'px';
|
||||
ctx.strokeStyle = pass ? 'green' : 'red';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeRect(0, 0, geom.width, geom.height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
async function test() {
|
||||
getComputedStyle(target);
|
||||
let code = document.getElementById('code').textContent;
|
||||
await importWorklet(CSS.paintWorklet, code);
|
||||
await workletPainted();
|
||||
CSS.registerProperty({
|
||||
name: '--length',
|
||||
syntax: '<length>',
|
||||
initialValue: '0px',
|
||||
inherits: false
|
||||
});
|
||||
await workletPainted();
|
||||
takeScreenshot();
|
||||
}
|
||||
|
||||
test();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/visufx.html#propdef-overflow">
|
||||
<style>
|
||||
/* Avoid auto scrollbars on the viewport, because that might trigger re-layout
|
||||
(and thus hide bugs). */
|
||||
body { overflow:hidden; }
|
||||
|
||||
.container { width:100px; }
|
||||
</style>
|
||||
<p>There should be a blue rectangle below, and possibly a scrollbar (depending
|
||||
on OS / browser), that shouldn not obscure any parts of the rectangle. The
|
||||
word "FAIL" should not be seen.</p>
|
||||
<div class="container" style="overflow:auto; height:200px;">
|
||||
<div id="child" style="display:inline-block; box-sizing:border-box; width:100%; height:100%; border:10px solid blue;"></div>
|
||||
<br>FAIL
|
||||
</div>
|
||||
|
||||
<div class="container" style="visibility:hidden; overflow:scroll;">
|
||||
<div id="ref"></div>
|
||||
</div>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
test(()=> {
|
||||
var child = document.getElementById("child");
|
||||
assert_equals(child.offsetWidth, ref.offsetWidth);
|
||||
}, "Auto scrollbar affects size of children");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test: letter spacing after bidi</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property">
|
||||
<link rel="match" href="reference/letter-spacing-bidi-001-ref.html">
|
||||
<meta name="assert" content="Letter spacing is inserted after RTL reordering, so letter spacing cannot apply to any of the letters in the span below,
|
||||
since they get split appart.">
|
||||
<style>
|
||||
div {
|
||||
font-family: monospace;
|
||||
font-size: 3em;
|
||||
}
|
||||
span {
|
||||
letter-spacing: 1ch;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the rightmost character of the line that starts with “a” is under the number 4.
|
||||
<div>12345</div>
|
||||
<div>a<span>bא</span>ב</div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test: letter spacing at bidi fragment boudary</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#bidi-fragmentation">
|
||||
<link rel="match" href="reference/letter-spacing-bidi-002-ref.html">
|
||||
<meta name="assert" content="When bidi would cause to pieces of a single inline box to be appart if there was enough room to fit everything in one line,
|
||||
the two pieces are separate fragments even if they end up next to eachother due to line breaking.
|
||||
Letter spacing at the boundary of such separate fragments comes from their common ancestor,
|
||||
not from the letter-spacing property on the fragmented inline box itself.">
|
||||
<style>
|
||||
div {
|
||||
font-family: monospace;
|
||||
font-size: 3em;
|
||||
width: 0;
|
||||
}
|
||||
span {
|
||||
letter-spacing: 1ch;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the rightmost character of the line that starts with “a” is under the number 3.
|
||||
<div>12345</div>
|
||||
<div>a<span>aב</span> ב</div>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test: letter spacing at end of line</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property">
|
||||
<link rel="match" href="reference/letter-spacing-end-of-line-001-ref.html">
|
||||
<meta name="assert" content="Letter-spacing must not be applied at the beginning or at the end of a line.">
|
||||
<style>
|
||||
div {
|
||||
font-family: monospace;
|
||||
font-size: 3em;
|
||||
}
|
||||
span {
|
||||
float:left;
|
||||
letter-spacing: 1ch;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the rightmost character of the line that starts with “a” is under the number 4.
|
||||
<div>12345</div>
|
||||
<div><span>aa</span>a</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test: letter on nested element</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property">
|
||||
<link rel="match" href="reference/letter-spacing-nesting-001-ref.html">
|
||||
<meta name="assert" content="A given value of letter-spacing only affects the spacing between characters completely contained within the element for which it is specified">
|
||||
<style>
|
||||
div {
|
||||
font-family: monospace;
|
||||
font-size: 3em;
|
||||
}
|
||||
span {
|
||||
letter-spacing: 1ch;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the rightmost character of the line that starts with “a” is under the number 5.
|
||||
<div>123456</div>
|
||||
<div>a<span>aa</span>a</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test: letter spacing on element with single character</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property">
|
||||
<link rel="match" href="reference/letter-spacing-nesting-002-ref.html">
|
||||
<meta name="assert" content="Applying letter-spacing to an element containing only a single character has no effect on the rendered result">
|
||||
<style>
|
||||
div {
|
||||
font-family: monospace;
|
||||
font-size: 3em;
|
||||
}
|
||||
span {
|
||||
letter-spacing: 1ch;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the rightmost character of the line that starts with “a” is under the number 3.
|
||||
<div>12345</div>
|
||||
<div>a<span>a</span>a</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<style>
|
||||
div {
|
||||
font-family: monospace;
|
||||
font-size: 3em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the rightmost character of the line that starts with “a” is under the number 4.
|
||||
<div>12345</div>
|
||||
<div>abאב</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<style>
|
||||
div {
|
||||
font-family: monospace;
|
||||
font-size: 3em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the rightmost character of the line that starts with “a” is under the number 3.
|
||||
<div>12345</div>
|
||||
<div>aaב<br>ב</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<style>
|
||||
div {
|
||||
font-family: monospace;
|
||||
font-size: 3em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the rightmost character of the line that starts with “a” is under the number 4.
|
||||
<div>12345</div>
|
||||
<div>a aa</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<style>
|
||||
div {
|
||||
font-family: monospace;
|
||||
font-size: 3em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the rightmost character of the line that starts with “a” is under the number 5.
|
||||
<div>123456</div>
|
||||
<div>aa aa</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
|
||||
<style>
|
||||
div {
|
||||
font-family: monospace;
|
||||
font-size: 3em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the rightmost character of the line that starts with “a” is under the number 3.
|
||||
<div>12345</div>
|
||||
<div>aaa</div>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text Test: overflow-wrap: break-word</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-overflow-wrap-break-word">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#valdef-white-space-pre-wrap">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="match" href="reference/overflow-wrap-break-word-001-ref.html">
|
||||
<meta name="assert" content="A Single leading white-space constitutes a soft breaking opportunity, honoring the 'white-space: pre-wrap' property, that must prevent the word to be broken.">
|
||||
<style>
|
||||
div {
|
||||
position: relative;
|
||||
font-size: 20px;
|
||||
font-family: Ahem;
|
||||
}
|
||||
.fail {
|
||||
position: absolute;
|
||||
color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
span { color: green; }
|
||||
.test {
|
||||
color: green;
|
||||
line-height: 1em;
|
||||
width: 5ch;
|
||||
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div class="fail">XXX<span>XX<br></span><span>XXXXX<br></span>XXXXX<br>XXXX<span>X<br></span><span>XXXXX</span></div>
|
||||
<div class="test">XXX
|
||||
XXXXXXXXX</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
|
||||
<p>Test passes if the characters below are arranged in a square and if there is no red.
|
||||
<div>ああ<br>ああ</div>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<style>
|
||||
div { white-space: pre; }
|
||||
span { background: blue; }
|
||||
</style>
|
||||
|
||||
<p>Test passes if the characters below are arranged in a square and if there is a blue rectangle at the end of the first line.
|
||||
<div>ああ<span>　</span><br>ああ</div>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<style>
|
||||
div { white-space: pre; }
|
||||
span { background: blue; }
|
||||
</style>
|
||||
|
||||
<p>Test passes if the characters below are arranged in a square and if there is a blue rectangle at the end of the first line.
|
||||
<div>ああ<span>　　 　 　</span><br>ああ</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<style>
|
||||
div { white-space: pre; }
|
||||
span {
|
||||
background: blue;
|
||||
|
||||
/* to make the span go under the right border */
|
||||
z-index:-1;
|
||||
position: relative;
|
||||
}
|
||||
aside {
|
||||
display: inline-block;
|
||||
width: 0.5em;
|
||||
border-right: 1em white solid;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the characters below are arranged in a square and if there is a blue rectangle at the end of the first line.
|
||||
<div>ああ<aside><span>　</span></aside><br>ああ</div>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<p>There should be a space between "Two" and "words".</p>
|
||||
Two words
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test: ideographic space at the end of line must be removed</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
|
||||
<link rel="match" href="reference/trailing-ideographic-space-001-ref.html">
|
||||
<meta name="assert" content="An ideographic space (U+3000) at the end of the line must be removed.">
|
||||
<style>
|
||||
div { width: 2em; }
|
||||
span { background: red; } /* If the space hangs instead of being removed, there will be red */
|
||||
</style>
|
||||
|
||||
<p>Test passes if the characters below are arranged in a square and if there is no red.
|
||||
<div>ああ<span>　</span>ああ</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test: sequence of spaces and ideographic spaces at the end of line must be removed</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
|
||||
<link rel="match" href="reference/trailing-ideographic-space-001-ref.html">
|
||||
<meta name="assert" content="An sequence ideographic space (U+3000) and regular spaces at the end of the line must be removed.">
|
||||
<style>
|
||||
div { width: 2em; }
|
||||
span { background: red; } /* If the space hangs instead of being removed, there will be red */
|
||||
</style>
|
||||
|
||||
<p>Test passes if the characters below are arranged in a square and if there is no red.
|
||||
<div>ああ<span>　　 　 　</span>ああ</div>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test: preserved ideographic space at the end of line must hang</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
|
||||
<link rel="match" href="reference/trailing-ideographic-space-003-ref.html">
|
||||
<link rel="match" href="reference/trailing-ideographic-space-alt-003-ref.html">
|
||||
<meta name="assert" content="An ideographic space (U+3000) at the end of the line must hang if white-space preserves spaces.">
|
||||
<style>
|
||||
div {
|
||||
width: 2.5em;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
span { background: blue; } /* If the space is removed instead of hanging, there will be no blue box*/
|
||||
</style>
|
||||
|
||||
<p>Test passes if the characters below are arranged in a square and if there is a blue rectangle at the end of the first line.
|
||||
<div>ああ<span>　</span>ああ</div>
|
||||
|
||||
<!--
|
||||
We're using a 2.5em width and two references, instead of 2em and just the first one,
|
||||
because in addition to requiring the spaces to hang,
|
||||
the spec allows, but does not require, browsers to visually collapse the advance widths of characters that overflow.
|
||||
In browsers that don't do that, the whole sequence of preserved spaces will be visible, and the first ref will be matched.
|
||||
In browsers that do, only the first 0.5em worth of space will be preserved, and the second ref will match.
|
||||
-->
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test: preserved sequences of spaces and ideographic spaces at the end of line must hang</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2">
|
||||
<link rel="match" href="reference/trailing-ideographic-space-004-ref.html">
|
||||
<link rel="match" href="reference/trailing-ideographic-space-alt-003-ref.html">
|
||||
<meta name="assert" content="An sequence ideographic space (U+3000) and regular spaces at the end of the line must hang if white-space preserves spaces.">
|
||||
<style>
|
||||
div {
|
||||
width: 2.5em;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
span { background: blue; } /* If the spaces are removed instead of hanging, there will be no blue box*/
|
||||
</style>
|
||||
|
||||
<p>Test passes if the characters below are arranged in a square and if there is a blue rectangle at the end of the first line.
|
||||
<div>ああ<span>　　 　 　</span>ああ</div>
|
||||
|
||||
<!--
|
||||
We're using a 2.5em width and two references, instead of 2em and just the first one,
|
||||
because in addition to requiring the spaces to hang,
|
||||
the spec allows, but does not require, browsers to visually collapse the advance widths of characters that overflow.
|
||||
In browsers that don't do that, the whole space will be visible, and the first ref will be matched.
|
||||
In browsers that do, only the first 0.5em worth of space will be preserved, and the second ref will match.
|
||||
-->
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-rules">
|
||||
<link rel="match" href="reference/white-space-empty-text-sibling-ref.html">
|
||||
<p>There should be a space between "Two" and "words".</p>
|
||||
<link rel="match" href="../../reference/pass_if_two_words.html">
|
||||
<p>There should be a space between "two" and "words" below.</p>
|
||||
<div id="block"> <span>words</span></div>
|
||||
<script>
|
||||
block.insertBefore(document.createTextNode(""), block.firstChild);
|
||||
block.insertBefore(document.createTextNode(""), block.firstChild);
|
||||
block.offsetTop;
|
||||
block.firstChild.data = "Two";
|
||||
block.firstChild.data = "two";
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS test reference</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<style>
|
||||
div {
|
||||
border: 5px solid;
|
||||
width: 2em;
|
||||
}
|
||||
|
||||
div::nth-of-type(1) { border-color: blue; }
|
||||
div::nth-of-type(2) { border-color: green; }
|
||||
div::nth-of-type(3) { border-color: orange; }
|
||||
|
||||
</style>
|
||||
|
||||
<p>Test passes if the text in each of the following 3 boxes is broken into separate lines at the same points.
|
||||
|
||||
<div lang=ja>あ<br>い）<br>あ<br>（い</div>
|
||||
<div lang=ja>あ<br>い）<br>あ<br>（い</div>
|
||||
<div lang=ja>あ<br>い）<br>あ<br>（い</div>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-Text reference file</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
|
||||
<p>This test passes if the four characters below are arranged in a two-by-two square.
|
||||
<div>字字<br>字字</div>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 3 Test: break-all and punctuation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-property">
|
||||
<link rel="match" href="reference/word-break-break-all-020-ref.html">
|
||||
<meta name="assert" content="work-break:break-all does not affect rules governing the soft wrap opportunities created by punctuation.">
|
||||
<style>
|
||||
div {
|
||||
border: 5px solid;
|
||||
width: 2em;
|
||||
}
|
||||
|
||||
div::nth-of-type(1) { border-color: blue; }
|
||||
div::nth-of-type(2) { border-color: green; }
|
||||
div::nth-of-type(3) { border-color: orange; }
|
||||
|
||||
div::nth-of-type(3) { word-break: break-word; }
|
||||
</style>
|
||||
|
||||
<p>Test passes if the text in each of the following 3 boxes is broken into separate lines at the same points.
|
||||
<div lang=ja>あい）あ（い</div>
|
||||
<div lang=ja>あ<br>い）<br>あ<br>（い</div>
|
||||
<div lang=ja>あい）あ（い</div>
|
||||
|
||||
<!--
|
||||
If the first box (blue) is wrong,
|
||||
customary rules for line breaking japanese are not implemented (or not correctly).
|
||||
|
||||
If the third box (orange) is wrong,
|
||||
customary rules for line breaking japanese are discarded
|
||||
when applying 'word-break: break-all', which is a spec violation.
|
||||
-->
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-Text test: word-break keep-all does not affect U+3000</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="U+3000, despite being called Ideographic Space, does not belong to the ID line breaking class, or any other class whose wrapping opportunities are suppressed by word-break:keep-all. A break after it should still be allowed.">
|
||||
<link rel="match" href="reference/word-break-keep-all-005-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-text-3/#valdef-word-break-keep-all">
|
||||
<style>
|
||||
div {
|
||||
width: 4em;
|
||||
word-break: keep-all;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if the four characters below are arranged in a two-by-two square.
|
||||
<div lang=ja>字字 字字</div>
|
||||
<!--
|
||||
If keep-all has no effect at all, breaks are allowed everywhere,
|
||||
and the result will be:
|
||||
字字 字
|
||||
字
|
||||
|
||||
If keep-all correctly suppresses wrapping opportunities between CJK ideographs
|
||||
but also incorrectly suppresses the wrapping opportunity after U+3000,
|
||||
no wrapping is possible, and the result will be:
|
||||
字字 字字
|
||||
-->
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS-Text test: word-break keep-all does not affect punctuation</title>
|
||||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<meta name=flags content="">
|
||||
<meta name=assert content="word-break:keep-all does not affect rules governing the soft wrap opportunities created by punctuation">
|
||||
<link rel="match" href="reference/word-break-keep-all-005-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-text-3/#propdef-word-break">
|
||||
<style>
|
||||
div {
|
||||
width: 4em;
|
||||
word-break: keep-all;
|
||||
}
|
||||
span { color: transparent }
|
||||
</style>
|
||||
|
||||
<p>This test passes if the four characters below are arranged in a two-by-two square.
|
||||
<div lang=ja>字字<span>、</span>字字</div>
|
||||
<!--
|
||||
U+3001 : IDEOGRAPHIC COMMA is made transparent for visual simplicity,
|
||||
the change in color has no effect on layout.
|
||||
|
||||
If keep-all has no effect at all, breaks are allowed everywhere
|
||||
(except before U+3001, but this has no incidence in this case)
|
||||
and the result will be:
|
||||
字字、字
|
||||
字
|
||||
|
||||
If keep-all correctly suppresses wrapping opportunities between CJK ideographs
|
||||
but also incorrectly suppresses the wrapping opportunity after U+3001,
|
||||
no wrapping is possible, and the result will be:
|
||||
字字、字字
|
||||
-->
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org">
|
||||
<p>There should be a space between "two" and "words" below.</p>
|
||||
two words
|
||||
Loading…
Add table
Add a link
Reference in a new issue