mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1740530 - patch 10 - Basic reftests for COLRv1 font rendering. r=gfx-reviewers,lsalzman 

The font here is a copy of Ahem with a COLRv1 table added, using various of the
COLRv1 paint and transform tables. This is far from an exhaustive set of tests,
but serves to check that basic rendering functionality is working.

The reference file uses CSS blocks filled with gradients, etc, to simulate the
expected rendering of the colored Ahem glyphs. This is unlikely to be a perfect
match in any but the simplest cases, thanks to antialiasing, pixel-rounding, etc.,
but the results are visually indistinguishable, or virtually so, and the amount
of "fuzz" is far less than the differences would be in the case of the COLRv1
glyphs actually being mis-rendered.

(There's a try run *without* the fuzz annotations at
https://treeherder.mozilla.org/jobs?repo=try&revision=4a2e2f7190661614ecddd223dd7178589d0ec5f2
where the results can be viewed in reftest-analyzer.)

We may eventually want to move this or similar tests into WPT, but I'm expecting
more extensive test coverage to be a co-operative effort with the other vendors
who are also implementing support, so this is intended as an interim step just to
ensure we have the basic functionality tested in-tree.

Depends on D154585

Differential Revision: https://phabricator.services.mozilla.com/D154586
This commit is contained in:
Jonathan Kew 2022-08-16 12:48:35 +00:00
Родитель 248f9c2891
Коммит 8e8d6fbbce
7 изменённых файлов: 132 добавлений и 0 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

Двоичные данные
layout/reftests/font-face/CAhem.ttf Normal file
Просмотреть файл

Двоичный файл не отображается.

43
layout/reftests/font-face/colrv1-01-ref.html Normal file
Просмотреть файл

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset=utf-8>
<title>COLRv1 font test: comparing against CSS representation</title>
<style>
#ref { font: 0px serif; margin: 10px; padding: 10px; }
#ref > div { width: 100px; height: 100px; display: inline-block; vertical-align: top; }
span { display: inline-block; }
.A { background: rgba(255, 0, 0, 1.0); }
.B { background: rgba(255, 0, 0, 0.5); }
.C { background: rgba(255, 0, 0, 0.1); }
.D { background: linear-gradient(to right, rgb(0, 255, 0), rgb(0, 0, 255)); }
.E { background: linear-gradient(to right, rgb(0, 255, 0) 25%, rgb(0, 0, 255) 75%); }
.F { background: linear-gradient(to right, rgb(0, 255, 0) 25%, rgb(0, 0, 255) 75%); }
.G { background: repeating-linear-gradient(to right, rgb(0, 255, 0) 40%, rgb(0, 0, 255) 60%); }
.H { background: repeating-linear-gradient(to right, rgb(0, 255, 0) 40%, rgb(0, 0, 255) 60%, rgb(0, 255, 0) 80%); }
.I { background: repeating-linear-gradient(to bottom, rgb(0, 255, 0) 40%, rgb(0, 0, 255) 60%, rgb(0, 255, 0) 80%); }
.J { background: radial-gradient(rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255) 70.7107%); }
.K { background: repeating-radial-gradient(rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255) 70.7107%); }
.L { background: repeating-radial-gradient(rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255), rgb(0, 255, 0), rgb(255, 0, 0) 70.7107%); }
.M { background: conic-gradient(rgb(0, 0, 255), rgb(0, 255, 0), rgb(255, 0, 0)); }
.N { background: conic-gradient(rgb(0, 0, 255), rgb(0, 255, 0), rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255)); }
.O { background: conic-gradient(rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255) 25%, rgb(0, 255, 0), rgb(255, 0, 0)); }
.P :nth-child(1) { background: rgb(0, 0, 255); width: 100%; height: 50%; }
.P :nth-child(2) { background: rgb(255, 0, 0); width: 50%; height: 50%; }
.P :nth-child(3) { background: rgb(0, 255, 0); width: 50%; height: 50%; }
.Q { background: rgba(0, 255, 0); }
.Q :nth-child(1) { background: rgb(255, 0, 0); width: 50%; height: 50%; translate: 50% 50%; rotate: 45deg; }
.R { background: rgba(0, 0, 255); }
.R :nth-child(1) { background: rgb(255, 0, 0); width: 50%; height: 50%; translate: 50% 50%; transform: skew(30deg); }
.S { background: rgba(255, 0, 0); }
.S :nth-child(1) { background: rgb(0, 255, 0); width: 50%; height: 50%; translate: 50% 50%; transform: skew(0, 30deg); }
.T { background: rgba(0, 255, 0); }
.T :nth-child(1) { background: rgb(0, 0, 255); width: 50%; height: 50%; translate: 50% 50%; transform: skew(-20deg, -20deg); }
</style>
<p>COLRv1 font rendering:</p>
<div id="ref"><div><span></span><span></span><span></span></div></div>
<script>
ref.firstChild.classList = window.location.hash.substr(1);
document.documentElement.classList = "";
</script>

16
layout/reftests/font-face/colrv1-01.html Normal file
Просмотреть файл

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset=utf-8>
<title>COLRv1 font test: comparing against CSS representation</title>
<style>
@font-face { font-family: CAhem; src: url("CAhem.ttf"); }
#test { font: 100px/1 CAhem; margin: 10px; padding: 10px; }
</style>
<p>COLRv1 font rendering:</p>
<div id="test"></div>
<script>
test.textContent = window.location.hash.substr(1);
document.documentElement.classList = "";
</script>

17
layout/reftests/font-face/colrv1-02.html Normal file
Просмотреть файл

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<meta charset=utf-8>
<title>COLRv1 font test: using the tech() function</title>
<style>
@font-face {
font-family: CAhem;
src: url("../fonts/fira/FiraSansOT-RegularItalic.otf"); /* if tech() is not parsed */
src: url("CAhem.ttf") tech(color-COLRv1),
url("../fonts/fira/FiraSans-Regular.otf");
}
#test { font: 100px/1 CAhem, serif; margin: 10px; padding: 10px; }
</style>
<!-- This should render using CAhem if COLRv1 is enabled, and FiraSans if disabled.
If the tech() function fails to parse at all, we'll get Fira Italic. -->
<div id="test">ABC</div>

13
layout/reftests/font-face/colrv1-02a-ref.html Normal file
Просмотреть файл

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<meta charset=utf-8>
<title>COLRv1 font test: using the tech() function</title>
<style>
@font-face {
font-family: CAhem;
src: url("CAhem.ttf");
}
#test { font: 100px/1 CAhem, serif; margin: 10px; padding: 10px; }
</style>
<div id="test">ABC</div>

13
layout/reftests/font-face/colrv1-02b-ref.html Normal file
Просмотреть файл

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<meta charset=utf-8>
<title>COLRv1 font test: using the tech() function</title>
<style>
@font-face {
font-family: CAhem;
src: url("../fonts/fira/FiraSans-Regular.otf");
}
#test { font: 100px/1 CAhem, serif; margin: 10px; padding: 10px; }
</style>
<div id="test">ABC</div>

30
layout/reftests/font-face/reftest.list
Просмотреть файл

@ -160,6 +160,36 @@ fuzzy-if(OSX,198-198,172-172) == color-1b.html color-1-ref.html
== color-2a.html color-2-ref.html
!= color-2a.html color-2-notref.html
# COLRv1 (enhanced color font) format
# Comparing COLRv1 glyph rendering to CSS backgrounds we can expect "fuzz" in lots of gradients
# and along antialiased diagonals, etc., but the differences are barely perceptible to the eye.
defaults pref(gfx.font_rendering.colr_v1.enabled,true)
== colrv1-01.html#A colrv1-01-ref.html#A
== colrv1-01.html#B colrv1-01-ref.html#B
fuzzy(0-1,0-10000) == colrv1-01.html#C colrv1-01-ref.html#C
fuzzy(0-1,0-600) == colrv1-01.html#D colrv1-01-ref.html#D
fuzzy(0-1,0-200) == colrv1-01.html#E colrv1-01-ref.html#E
fuzzy(0-1,0-200) == colrv1-01.html#F colrv1-01-ref.html#F
fuzzy(0-1,0-400) == colrv1-01.html#G colrv1-01-ref.html#G
fuzzy(0-1,0-400) == colrv1-01.html#H colrv1-01-ref.html#H
fuzzy(0-1,0-10000) == colrv1-01.html#I colrv1-01-ref.html#I
fuzzy(0-1,0-576) == colrv1-01.html#J colrv1-01-ref.html#J
fuzzy(0-1,0-748) == colrv1-01.html#K colrv1-01-ref.html#K
fuzzy(0-1,0-851) == colrv1-01.html#L colrv1-01-ref.html#L
fuzzy(0-1,0-668) == colrv1-01.html#M colrv1-01-ref.html#M
fuzzy(0-1,0-848) == colrv1-01.html#N colrv1-01-ref.html#N
fuzzy(0-1,0-675) == colrv1-01.html#O colrv1-01-ref.html#O
== colrv1-01.html#P colrv1-01-ref.html#P
fuzzy(0-138,0-318) == colrv1-01.html#Q colrv1-01-ref.html#Q
fuzzy(0-207,0-156) == colrv1-01.html#R colrv1-01-ref.html#R
fuzzy(0-255,0-156) == colrv1-01.html#S colrv1-01-ref.html#S
fuzzy(0-237,0-277) == colrv1-01.html#T colrv1-01-ref.html#T
defaults
# Check that the tech(color-COLRv1) function responds to whether COLRv1 support is enabled.
pref(gfx.font_rendering.colr_v1.enabled,true) == colrv1-02.html colrv1-02a-ref.html
pref(gfx.font_rendering.colr_v1.enabled,false) == colrv1-02.html colrv1-02b-ref.html
== woff2-1.html woff2-1-ref.html
== woff2-totalsfntsize.html woff2-totalsfntsize-ref.html