<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Shape across element boundary test</title>
<script src="../../../resources/js-test.js"></script>
<style>
section { padding-left: 1rem; }
section > div {
display: inline-block;
font-size: 1.5rem;
width: 5rem;
vertical-align: middle;
}
section > span {
display: inline-block;
width: 25rem;
vertical-align: middle;
}
</style>
</head>
<body>
<h1>Shape across element boundary test</h1>
<section>
<div><span id="expected">سلام</span></div>
The word by itself.
</section>
<section>
<div><span id="split">س<span id="red" style="color: red">ل</span>ام</span></div>
<span>
Adding a span around a character that forms a ligature.
Should render the same as the above, except that half
of the middle glyph should be red.
</span>
</section>
<section>
<div>سلام</div>
Same word with a ZWJ character to disallow the ligature.
</section>
<section>
<div><span id="isolated" style="color: red;">ل</span></div>
The letter in red, in isolation.
</section>
<script>
function width(id)
{
var el = document.getElementById(id);
return el.getBoundingClientRect().width;
}
if (Math.abs(width('split') - width('expected')) > 0.1) {
testFailed('Width of isolated word should match width of' +
' word with markup.');
} else {
testPassed('Width of isolated word does match width of' +
' word with markup.');
}
if (Math.abs(width('red') - width('isolated')) < 0.1) {
testFailed('Width of partial glyph in ligature should not' +
' match width of isolated glyph.');
} else {
testPassed('Width of partial glyph in ligature does not' +
' match width of isolated glyph.');
}
</script>
</body>
<html>
Codebase Browser
chromium