Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test gets skipped with pattern: os == 'android'
- Manifest: layout/inspector/tests/chrome/chrome.toml
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="test_fontFaceRanges.css"?>
<!--
-->
onload="RunTest();">
<script type="application/javascript">
<![CDATA[
SimpleTest.waitForExplicitFinish();
function expectRanges(f, ranges) {
var r = f.ranges;
is(r.length, ranges.length, "number of ranges");
for (var i = 0; i < Math.min(r.length, ranges.length); i++) {
is(r[i].toString(), ranges[i], "text of range");
}
}
function RunTest() {
var rng = document.createRange();
var elem, fonts;
var familyNames = new Map();
// Test element contains Latin & Chinese
elem = document.getElementById("test1");
rng.selectNode(elem);
fonts = InspectorUtils.getUsedFontFaces(rng, 10);
is(fonts.length, 4, "number of font faces");
for (var i = 0; i < fonts.length; i++) {
var f = fonts[i];
familyNames.set(f.CSSFamilyName, true);
switch (true) {
case f.CSSFamilyName == "capitals":
expectRanges(f, ["H", "W"]);
break;
case f.CSSFamilyName == "lowercase":
expectRanges(f, ["ello", "orld"]);
break;
case f.CSSFamilyName == "gentium":
expectRanges(f, [" ", " ", " ", "!"]);
break;
default:
// We'll get a platform-dependent font for the Chinese characters,
// so we don't attempt to check its name.
expectRanges(f, ["\u4F60", "\u597D"]);
break;
}
}
is(familyNames.size, 4, "found all expected families");
// Test element #test1 again, but limit maxRanges to 1 per face
elem = document.getElementById("test1");
rng.selectNode(elem);
fonts = InspectorUtils.getUsedFontFaces(rng, 1);
is(fonts.length, 4, "number of font faces");
familyNames.clear();
for (var i = 0; i < fonts.length; i++) {
var f = fonts[i];
familyNames.set(f.CSSFamilyName, true);
switch (true) {
case f.CSSFamilyName == "capitals":
expectRanges(f, ["H"]);
break;
case f.CSSFamilyName == "lowercase":
expectRanges(f, ["ello"]);
break;
case f.CSSFamilyName == "gentium":
expectRanges(f, [" "]);
break;
default:
// We'll get a platform-dependent font for the Chinese characters,
// so we don't attempt to check its name.
expectRanges(f, ["\u4F60"]);
break;
}
}
is(familyNames.size, 4, "found all expected families");
// Test element contains Latin & Arabic (for bidi)
elem = document.getElementById("test2");
rng.selectNode(elem);
fonts = InspectorUtils.getUsedFontFaces(rng, 10);
is(fonts.length, 4, "number of font faces");
familyNames.clear();
for (var i = 0; i < fonts.length; i++) {
var f = fonts[i];
familyNames.set(f.CSSFamilyName, true);
switch (true) {
case f.CSSFamilyName == "capitals":
expectRanges(f, ["H", "W"]);
break;
case f.CSSFamilyName == "lowercase":
expectRanges(f, ["ello", "orld"]);
break;
case f.CSSFamilyName == "gentium":
expectRanges(f, [" ", " ", "!"]);
break;
default:
// We'll get a platform-dependent font for the Arabic characters,
// so we don't attempt to check its name.
expectRanges(f, ["العربي"]);
break;
}
}
is(familyNames.size, 4, "found all expected families");
// Test element wrapped across multiple lines, including soft hyphens,
// one of which will be used as a line-break.
elem = document.getElementById("test3");
rng.selectNode(elem);
fonts = InspectorUtils.getUsedFontFaces(rng, 10);
is(fonts.length, 3, "number of font faces");
familyNames.clear();
for (var i = 0; i < fonts.length; i++) {
var f = fonts[i];
familyNames.set(f.CSSFamilyName, true);
switch (true) {
case f.CSSFamilyName == "capitals":
expectRanges(f, ["H", "W"]);
break;
case f.CSSFamilyName == "lowercase":
expectRanges(f, ["ello", "mul\u00ADti\u00ADline", "orld"]);
break;
case f.CSSFamilyName == "gentium":
expectRanges(f, [" ", " ", "!"]);
break;
default:
// There shouldn't be any other font used
ok(false, "unexpected font: " + f.CSSFamilyName);
break;
}
}
is(familyNames.size, 3, "found all expected families");
// Test where textrun should continue across inline element boundaries
// (but we expect to get separate Range objects).
elem = document.getElementById("test4");
rng.selectNode(elem);
fonts = InspectorUtils.getUsedFontFaces(rng, 10);
is(fonts.length, 3, "number of font faces");
familyNames.clear();
for (var i = 0; i < fonts.length; i++) {
var f = fonts[i];
familyNames.set(f.CSSFamilyName, true);
switch (true) {
case f.CSSFamilyName == "capitals":
expectRanges(f, ["H"]);
break;
case f.CSSFamilyName == "lowercase":
expectRanges(f, ["ello", "cruel", "world"]);
break;
case f.CSSFamilyName == "gentium":
expectRanges(f, ["!"]);
break;
default:
// There shouldn't be any other font used
ok(false, "unexpected font: " + f.CSSFamilyName);
break;
}
}
is(familyNames.size, 3, "found all expected families");
// Testcase involving collapsed whitespace, to test mapping from textrun
// offsets back to DOM content offsets.
elem = document.getElementById("test5");
rng.selectNode(elem);
fonts = InspectorUtils.getUsedFontFaces(rng, 10);
is(fonts.length, 3, "number of font faces");
familyNames.clear();
for (var i = 0; i < fonts.length; i++) {
var f = fonts[i];
familyNames.set(f.CSSFamilyName, true);
switch (true) {
case f.CSSFamilyName == "capitals":
expectRanges(f, ["H"]);
break;
case f.CSSFamilyName == "lowercase":
expectRanges(f, ["ello", "linked", "world"]);
break;
case f.CSSFamilyName == "gentium":
expectRanges(f, ["\n ", "\n ", "\n ", "!\n "]);
break;
default:
// There shouldn't be any other font used
ok(false, "unexpected font: " + f.CSSFamilyName);
break;
}
}
is(familyNames.size, 3, "found all expected families");
// Test that fonts used in non-visible elements are not reported,
// nor non-visible ranges for fonts that are also used in visible content.
elem = document.getElementById("test6");
rng.selectNode(elem);
fonts = InspectorUtils.getUsedFontFaces(rng, 10);
is(fonts.length, 2, "number of font faces");
familyNames.clear();
for (var i = 0; i < fonts.length; i++) {
var f = fonts[i];
familyNames.set(f.CSSFamilyName, true);
switch (true) {
case f.CSSFamilyName == "capitals":
ok(false, "font used in hidden element should not be reported");
break;
case f.CSSFamilyName == "lowercase":
expectRanges(f, ["hello", "visible", "world"]);
break;
case f.CSSFamilyName == "gentium":
expectRanges(f, ["\n ", "\n ", "\n ", "!"]);
break;
default:
// There shouldn't be any other font used
ok(false, "unexpected font: " + f.CSSFamilyName);
break;
}
}
is(familyNames.size, 2, "found all expected families");
SimpleTest.finish();
}
]]>
</script>
<!-- We use @font-face with unicode-range to force different font faces to be used
for uppercase, lowercase, and non-letter Latin characters; and then the Chinese
and Arabic characters will result in font fallback being applied. -->
<div class="gentium" id="test1">Hello 你 <b>World</b> 好!</div>
<div class="gentium" id="test2">Hello العربي World!</div>
<div class="gentium" id="test3" style="width:3em">Hello mul­ti­line World!</div>
<div class="gentium" id="test4"><span>Hello</span><span>cruel</span>world!</div>
<div class="gentium" id="test5">
Hello
<!-- comment -->
<a href="#foo">linked</a>
<!-- comment -->
world!
</div>
<div class="gentium" id="test6">
hello
<a href="#foo" style="visibility:hidden">Non-Visible
<span style="visibility:visible">visible</span></a>
world!</div>
</body>
</window>