servo/tests/wpt/css-tests/css-text-3_dev/xhtml1/white-space-collapse-002.xht

161 lines
No EOL
7 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>Whitespace and bidi control characters</title>
<link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida" />
<link href="https://drafts.csswg.org/css-text-3/#line-break-transform" rel="help" />
<meta content="All spaces and tabs immediately preceding or following a segment break are removed, ignoring bidi formatting characters as if they were not there." name="assert" />
<style type="text/css">
.test span { font-size: 24px; font-family: sans-serif; background-color:#2AA5F7; color: white; }
.ref span { font-size: 24px; font-family: sans-serif; background-color:#270CEF; color: white; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="log"></div>
<div class="test" id="testRLO1"><span>RLO&#x202E;
level&#x202C;here</span></div>
<div class="ref" id="refRLO1"><span>RLOlevel here</span></div>
<div class="test" id="testRLO2"><span>RLO &#x202E;
level&#x202C;</span></div>
<div class="ref" id="refRLO2"><span>RLO level</span></div>
<div class="test" id="testRLO3"><span>RLO
&#x202E; level&#x202C;</span></div>
<div class="ref" id="refRLO3"><span>RLO level</span></div>
<div class="test" id="testRLO4"><span>RLO &#x202E;
level&#x202C;</span></div>
<div class="ref" id="refRLO4"><span>RLO level</span></div>
<div class="test" id="testRLO5"><span>RLO
&#x202E;
level&#x202C;</span></div>
<div class="ref" id="refRLO5"><span>RLO level</span></div>
<div class="test" id="testRLE1"><span>RLE&#x202B;
level&#x202C;here</span></div>
<div class="ref" id="refRLE1"><span>RLElevel here</span></div>
<div class="test" id="testRLE2"><span>RLE &#x202B;
level&#x202C;</span></div>
<div class="ref" id="refRLE2"><span>RLE level</span></div>
<div class="test" id="testRLE3"><span>RLE
&#x202B; level&#x202C;</span></div>
<div class="ref" id="refRLE3"><span>RLE level</span></div>
<div class="test" id="testRLE4"><span>RLE &#x202B;
level&#x202C;</span></div>
<div class="ref" id="refRLE4"><span>RLE level</span></div>
<div class="test" id="testRLE5"><span>RLE
&#x202B;
level&#x202C;</span></div>
<div class="ref" id="refRLE5"><span>RLE level</span></div>
<div class="test" id="testRLI1"><span>RLI
levelhere</span></div>
<div class="ref" id="refRLI1"><span>RLIlevel here</span></div>
<div class="test" id="testRLI2"><span>RLI
level</span></div>
<div class="ref" id="refRLI2"><span>RLI level</span></div>
<div class="test" id="testRLI3"><span>RLI
level</span></div>
<div class="ref" id="refRLI3"><span>RLI level</span></div>
<div class="test" id="testRLI4"><span>RLI
level</span></div>
<div class="ref" id="refRLI4"><span>RLI level</span></div>
<div class="test" id="testRLI5"><span>RLI
level</span></div>
<div class="ref" id="refRLI5"><span>RLI level</span></div>
<div class="test" id="testRLM1"><span>RLM&#x200F;
mark</span></div>
<div class="ref" id="refRLM1"><span>RLM mark</span></div>
<div class="test" id="testRLM2"><span>RLM &#x200F;
mark</span></div>
<div class="ref" id="refRLM2"><span>RLM mark</span></div>
<div class="test" id="testRLM3"><span>RLM
&#x200F; mark</span></div>
<div class="ref" id="refRLM3"><span>RLM mark</span></div>
<div class="test" id="testRLM4"><span>RLM &#x200F;
mark</span></div>
<div class="ref" id="refRLM4"><span>RLM mark</span></div>
<div class="test" id="testRLM5"><span>RLM
&#x200F;
mark</span></div>
<div class="ref" id="refRLM5"><span>RLM mark</span></div>
<script>
test(function() {
assert_equals(document.getElementById('testRLO1').firstChild.offsetWidth, document.getElementById('refRLO1').firstChild.offsetWidth);
}, "RLO 1");
test(function() {
assert_equals(document.getElementById('testRLO2').firstChild.offsetWidth, document.getElementById('refRLO2').firstChild.offsetWidth);
}, "RLO 2");
test(function() {
assert_equals(document.getElementById('testRLO3').firstChild.offsetWidth, document.getElementById('refRLO3').firstChild.offsetWidth);
}, "RLO 3");
test(function() {
assert_equals(document.getElementById('testRLO4').firstChild.offsetWidth, document.getElementById('refRLO4').firstChild.offsetWidth);
}, "RLO 4");
test(function() {
assert_equals(document.getElementById('testRLO5').firstChild.offsetWidth, document.getElementById('refRLO5').firstChild.offsetWidth);
}, "RLO 5");
test(function() {
assert_equals(document.getElementById('testRLE1').firstChild.offsetWidth, document.getElementById('refRLE1').firstChild.offsetWidth);
}, "RLE 1");
test(function() {
assert_equals(document.getElementById('testRLE2').firstChild.offsetWidth, document.getElementById('refRLE2').firstChild.offsetWidth);
}, "RLE 2");
test(function() {
assert_equals(document.getElementById('testRLE3').firstChild.offsetWidth, document.getElementById('refRLE3').firstChild.offsetWidth);
}, "RLE 3");
test(function() {
assert_equals(document.getElementById('testRLE4').firstChild.offsetWidth, document.getElementById('refRLE4').firstChild.offsetWidth);
}, "RLE 4");
test(function() {
assert_equals(document.getElementById('testRLE5').firstChild.offsetWidth, document.getElementById('refRLE5').firstChild.offsetWidth);
}, "RLE 5");
test(function() {
assert_equals(document.getElementById('testRLI1').firstChild.offsetWidth, document.getElementById('refRLI1').firstChild.offsetWidth);
}, "RLI 1");
test(function() {
assert_equals(document.getElementById('testRLI2').firstChild.offsetWidth, document.getElementById('refRLI2').firstChild.offsetWidth);
}, "RLI 2");
test(function() {
assert_equals(document.getElementById('testRLI3').firstChild.offsetWidth, document.getElementById('refRLI3').firstChild.offsetWidth);
}, "RLI 3");
test(function() {
assert_equals(document.getElementById('testRLI4').firstChild.offsetWidth, document.getElementById('refRLI4').firstChild.offsetWidth);
}, "RLI 4");
test(function() {
assert_equals(document.getElementById('testRLI5').firstChild.offsetWidth, document.getElementById('refRLI5').firstChild.offsetWidth);
}, "RLI 5");
test(function() {
assert_equals(document.getElementById('testRLM1').firstChild.offsetWidth, document.getElementById('refRLM1').firstChild.offsetWidth);
}, "RLM 1");
test(function() {
assert_equals(document.getElementById('testRLM2').firstChild.offsetWidth, document.getElementById('refRLM2').firstChild.offsetWidth);
}, "RLM 2");
test(function() {
assert_equals(document.getElementById('testRLM3').firstChild.offsetWidth, document.getElementById('refRLM3').firstChild.offsetWidth);
}, "RLM 3");
test(function() {
assert_equals(document.getElementById('testRLM4').firstChild.offsetWidth, document.getElementById('refRLM4').firstChild.offsetWidth);
}, "RLM 4");
test(function() {
assert_equals(document.getElementById('testRLM5').firstChild.offsetWidth, document.getElementById('refRLM5').firstChild.offsetWidth);
}, "RLM 5");
</script>
<!-- Notes:
The first test has an extra word to make the reference easier to create, given that the space ends up at the end of the sequence.
-->
</body></html>