diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-fonts/font-display')
10 files changed, 490 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-fonts/font-display/font-display-change-ref.html b/testing/web-platform/tests/css/css-fonts/font-display/font-display-change-ref.html new file mode 100644 index 0000000000..e06a559399 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/font-display/font-display-change-ref.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Updating font-display value while loading</title> +<script> + +window.onload = () => { + const displayValues = [ 'auto', 'block', 'swap', 'fallback', 'optional' ]; + + for (let value of displayValues) { + let face = new FontFace(value, + 'url("/fonts/Ahem.ttf?pipe=trickle(d5)")', + {display: value}); + document.fonts.add(face); + face.load(); + } + + setTimeout(() => { + document.documentElement.classList.remove("reftest-wait"); + }, 200); +}; + +</script> +<table> + <tr> + <th>auto</th> + <th>block</th> + <th>swap</th> + <th>fallback</th> + <th>optional</th> + </tr> + <tr> + <td>from auto</td> + <td style="font-family: auto">a</td> + <td style="font-family: block">a</td> + <td style="font-family: swap">a</td> + <td style="font-family: fallback">a</td> + <td style="font-family: optional">a</td> + </tr> + <tr> + <td>from block</td> + <td style="font-family: auto">a</td> + <td style="font-family: block">a</td> + <td style="font-family: swap">a</td> + <td style="font-family: fallback">a</td> + <td style="font-family: optional">a</td> + </tr> + <tr> + <td>from swap</td> + <td style="font-family: auto">a</td> + <td style="font-family: block">a</td> + <td style="font-family: swap">a</td> + <td style="font-family: fallback">a</td> + <td style="font-family: optional">a</td> + </tr> + <tr> + <td>from fallback</td> + <td style="font-family: auto">a</td> + <td style="font-family: block">a</td> + <td style="font-family: swap">a</td> + <td style="font-family: fallback">a</td> + <td style="font-family: optional">a</td> + </tr> + <tr> + <td>from optional</td> + <td style="font-family: auto">a</td> + <td style="font-family: block">a</td> + <td style="font-family: swap">a</td> + <td style="font-family: fallback">a</td> + <td style="font-family: optional">a</td> + </tr> +</table> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/font-display/font-display-change.html b/testing/web-platform/tests/css/css-fonts/font-display/font-display-change.html new file mode 100644 index 0000000000..64130ca52a --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/font-display/font-display-change.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Updating font-display value while loading</title> +<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#font-display-desc"> +<link rel="match" href="font-display-change-ref.html"> +<script> + +window.onload = () => { + const displayValues = [ 'auto', 'block', 'swap', 'fallback', 'optional' ]; + + let updateFuncs = []; + + for (let initialValue of displayValues) { + for (let targetValue of displayValues) { + let face = new FontFace(initialValue + '-' + targetValue, + 'url("/fonts/Ahem.ttf?pipe=trickle(d5)")', + {display: initialValue}); + document.fonts.add(face); + face.load(); + updateFuncs.push(() => { + face.display = targetValue; + }); + } + } + + setTimeout(() => { + for (let update of updateFuncs) { + update(); + } + document.documentElement.classList.remove("reftest-wait"); + }, 200); +}; + +</script> +<table> + <tr> + <th>auto</th> + <th>block</th> + <th>swap</th> + <th>fallback</th> + <th>optional</th> + </tr> + <tr> + <td>from auto</td> + <td style="font-family: auto-auto">a</td> + <td style="font-family: auto-block">a</td> + <td style="font-family: auto-swap">a</td> + <td style="font-family: auto-fallback">a</td> + <td style="font-family: auto-optional">a</td> + </tr> + <tr> + <td>from block</td> + <td style="font-family: block-auto">a</td> + <td style="font-family: block-block">a</td> + <td style="font-family: block-swap">a</td> + <td style="font-family: block-fallback">a</td> + <td style="font-family: block-optional">a</td> + </tr> + <tr> + <td>from swap</td> + <td style="font-family: swap-auto">a</td> + <td style="font-family: swap-block">a</td> + <td style="font-family: swap-swap">a</td> + <td style="font-family: swap-fallback">a</td> + <td style="font-family: swap-optional">a</td> + </tr> + <tr> + <td>from fallback</td> + <td style="font-family: fallback-auto">a</td> + <td style="font-family: fallback-block">a</td> + <td style="font-family: fallback-swap">a</td> + <td style="font-family: fallback-fallback">a</td> + <td style="font-family: fallback-optional">a</td> + </tr> + <tr> + <td>from optional</td> + <td style="font-family: optional-auto">a</td> + <td style="font-family: optional-block">a</td> + <td style="font-family: optional-swap">a</td> + <td style="font-family: optional-fallback">a</td> + <td style="font-family: optional-optional">a</td> + </tr> +</table> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/font-display/font-display-failure-fallback.html b/testing/web-platform/tests/css/css-fonts/font-display/font-display-failure-fallback.html new file mode 100644 index 0000000000..00b528298b --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/font-display/font-display-failure-fallback.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#font-display-timeline"> +<script nonce="abc" src="/resources/testharness.js"></script> +<script nonce="abc" src="/resources/testharnessreport.js"></script> +<style> +@font-face { + font-family: 'TestFace'; + src: url('/fonts/Ahem.ttf?pipe=trickle(d0.5)'), + url('/fonts/Ahem.ttf?fallback-src'); + font-display: optional; +} + +@font-face { + font-family: 'FallbackFace'; + src: url('/fonts/Ahem.ttf?fallback-face'); +} + +.test { + font-family: 'TestFace','FallbackFace'; +} +</style> +<div class="test">hello</div> +<script> +function numberOfDownloads(url) { + assert_true(!!window.PerformanceResourceTiming, "ResourceTiming not supported"); + var absoluteURL = new URL(url, location.href).href; + return performance.getEntriesByName(absoluteURL).length; +} + +promise_test(function() { + return document.fonts.ready.then(function() { + assert_equals(numberOfDownloads('/fonts/Ahem.ttf?pipe=trickle(d0.5)'), 1, 'first source should be loaded'); + assert_equals(numberOfDownloads('/fonts/Ahem.ttf?fallback-src'), 0, 'fallback source should not be loaded'); + assert_equals(numberOfDownloads('/fonts/Ahem.ttf?fallback-face'), 1, 'fallback font face should be loaded'); + }); +}, "Fallback for font failure period"); +</script> diff --git a/testing/web-platform/tests/css/css-fonts/font-display/font-display-feature-policy-02.tentative-ref.html b/testing/web-platform/tests/css/css-fonts/font-display/font-display-feature-policy-02.tentative-ref.html new file mode 100644 index 0000000000..019043fd11 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/font-display/font-display-feature-policy-02.tentative-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Test for font-display-late-swap feature policy behavior when set to report-only</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.ahem { + font-family: 'Ahem'; +} +.arial { + font-family: 'Arial'; +} +</style> +<p>None of the font-display values should be changed</p> +<table id="container"> + <tr> + <th>not-set</th> + <th>auto</th> + <th>block</th> + <th>swap</th> + <th>fallback</th> + <th>optional</th> + </tr> + <tr> + <td class="ahem">a</td> + <td class="ahem">a</td> + <td class="ahem">a</td> + <td class="ahem">a</td> + <td class="ahem">a</td> + <td class="arial">a</td> + </tr> +</table> diff --git a/testing/web-platform/tests/css/css-fonts/font-display/font-display-feature-policy-02.tentative.html b/testing/web-platform/tests/css/css-fonts/font-display/font-display-feature-policy-02.tentative.html new file mode 100644 index 0000000000..65f76b0784 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/font-display/font-display-feature-policy-02.tentative.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Test for font-display-late-swap feature policy behavior when set to report-only</title> +<link rel="help" href="https://github.com/w3c/webappsec-feature-policy/blob/master/policies/font-display-late-swap.md"> +<link rel="match" href="font-display-feature-policy-02.tentative-ref.html"> +<style> +</style> +<p>None of the font-display values should be changed</p> +<table id="container"> + <tr> + <th>not-set</th> + <th>auto</th> + <th>block</th> + <th>swap</th> + <th>fallback</th> + <th>optional</th> + </tr> +</table> +<script> +const fontDisplayValues = ['', 'auto', 'block', 'swap', 'fallback', 'optional']; +const table = document.getElementById('container'); + +function makeFontFaceDeclaration(family, display) { + url = '/fonts/Ahem.ttf?pipe=trickle(d1)'; // Before the swap period is over + return '@font-face { font-family: ' + family + '; src: url("' + url + '"); font-display: ' + display + '; }'; +} + +window.onload = () => { + let tr = document.createElement('tr'); + for (let display of fontDisplayValues) { + const family = display + '-face'; + const rule = makeFontFaceDeclaration(family, display); + document.styleSheets[0].insertRule(rule, 0); + let td = document.createElement('td'); + td.textContent = 'a'; + td.style.fontFamily = family + ', Arial'; + tr.appendChild(td); + } + table.appendChild(tr); + const timeoutMilliSec = 1500; // After the font is loaded + setTimeout(() => { + document.documentElement.classList.remove("reftest-wait"); + }, timeoutMilliSec); +} +</script> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/font-display/font-display-feature-policy-02.tentative.html.headers b/testing/web-platform/tests/css/css-fonts/font-display/font-display-feature-policy-02.tentative.html.headers new file mode 100644 index 0000000000..e6c4898d5d --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/font-display/font-display-feature-policy-02.tentative.html.headers @@ -0,0 +1 @@ +Feature-Policy-Report-Only: font-display-late-swap 'none';
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-fonts/font-display/font-display-preload-ref.html b/testing/web-platform/tests/css/css-fonts/font-display/font-display-preload-ref.html new file mode 100644 index 0000000000..e3ba8caa32 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/font-display/font-display-preload-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<title>font-display should work for preloaded fonts</title> +<style> + .arial { + height: 20px; + font-family: Arial; + } +</style> +<div id="container"> + <div class="arial"></div> + <div class="arial"></div> + <div class="arial">Swap</div> + <div class="arial">Fallback</div> + <div class="arial">Optional</div> +</div> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/font-display/font-display-preload.html b/testing/web-platform/tests/css/css-fonts/font-display/font-display-preload.html new file mode 100644 index 0000000000..46f392ff84 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/font-display/font-display-preload.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>font-display should work for preloaded fonts</title> +<link id="link" href="/fonts/Ahem.ttf?pipe=trickle(d5)" as="font" type="font/ttf" crossorigin> +<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#font-display-desc"> +<link rel="match" href="font-display-preload-ref.html"> +<style> + @font-face { + font-family: 'Auto'; + src: url('/fonts/Ahem.ttf?pipe=trickle(d5)'); + font-display: auto; + } + @font-face { + font-family: 'Block'; + src: url('/fonts/Ahem.ttf?pipe=trickle(d5)'); + font-display: block; + } + @font-face { + font-family: 'Swap'; + src: url('/fonts/Ahem.ttf?pipe=trickle(d5)'); + font-display: swap; + } + @font-face { + font-family: 'Fallback'; + src: url('/fonts/Ahem.ttf?pipe=trickle(d5)'); + font-display: fallback; + } + @font-face { + font-family: 'Optional'; + src: url('/fonts/Ahem.ttf?pipe=trickle(d5)'); + font-display: optional; + } +</style> +<div id="container" hidden> + <div style="height: 20px; font-family: 'Auto', Arial">Auto</div> + <div style="height: 20px; font-family: 'Block', Arial">Block</div> + <div style="height: 20px; font-family: 'Swap', Arial">Swap</div> + <div style="height: 20px; font-family: 'Fallback', Arial">Fallback</div> + <div style="height: 20px; font-family: 'Optional', Arial">Optional</div> +</div> +<script> + window.onload = () => { + document.getElementById('link').rel = 'preload'; + document.getElementById('container').hidden = false; + const timeoutMsec = 200; // Between the short limit and the long limit + setTimeout(() => { + document.documentElement.classList.remove("reftest-wait"); + }, timeoutMsec); + }; +</script> +</html> diff --git a/testing/web-platform/tests/css/css-fonts/font-display/font-display-ref.html b/testing/web-platform/tests/css/css-fonts/font-display/font-display-ref.html new file mode 100644 index 0000000000..d75644e351 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/font-display/font-display-ref.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<title>Test for font-display @font-face descriptor</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.ahem { + font-family: Ahem; +} +.arial { + font-family: Arial; +} +</style> +<p>Tests how text with a font that takes <i>delay</i> seconds to load look like after <i>T</i> seconds from load start.</p> +<table> +<tr> + <th>T[sec]</th> + <th>delay[sec]</th> + <th>block</th> + <th>swap</th> + <th>fallback</th> + <th>optional</th> +</tr> +<tr> + <td>0</td> + <td>1</td> + <td></td> + <td class="arial">a</td> + <td></td> + <td class="arial">a</td> +</tr> +<tr> + <td>1</td> + <td>0</td> + <td class="ahem">a</td> + <td class="ahem">a</td> + <td class="ahem">a</td> + <td class="ahem">a</td> +</tr> +<tr> + <td>1</td> + <td>0.5</td> + <td class="ahem">a</td> + <td class="ahem">a</td> + <td class="ahem">a</td> + <td class="arial">a</td> +</tr> +<tr> + <td>1</td> + <td>3</td> + <td></td> + <td class="arial">a</td> + <td class="arial">a</td> + <td class="arial">a</td> +</tr> +<tr> + <td>5</td> + <td>2</td> + <td class="ahem">a</td> + <td class="ahem">a</td> + <td class="ahem">a</td> + <td class="arial">a</td> +</tr> +<tr> + <td>5</td> + <td>4</td> + <td class="ahem">a</td> + <td class="ahem">a</td> + <td class="arial">a</td> + <td class="arial">a</td> +</tr> +<tr> + <td>5</td> + <td>8</td> + <td class="arial">a</td> + <td class="arial">a</td> + <td class="arial">a</td> + <td class="arial">a</td> +</tr> +</table> diff --git a/testing/web-platform/tests/css/css-fonts/font-display/font-display.html b/testing/web-platform/tests/css/css-fonts/font-display/font-display.html new file mode 100644 index 0000000000..a2b62c0676 --- /dev/null +++ b/testing/web-platform/tests/css/css-fonts/font-display/font-display.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Test for font-display @font-face descriptor</title> +<meta name="timeout" content="long"> +<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#font-display-desc"> +<link rel="match" href="font-display-ref.html"> +<link rel="preload" href="/fonts/Ahem.ttf?pipe=trickle(d0)" as="font" crossorigin> +<style> +.hidden { display: none; } +</style> +<p>Tests how text with a font that takes <i>delay</i> seconds to load look like after <i>T</i> seconds from load start.</p> +<table id="container"> + <tr> + <th>T[sec]</th> + <th>delay[sec]</th> + <th>block</th> + <th>swap</th> + <th>fallback</th> + <th>optional</th> + </tr> +</table> +<script> +var fontDisplayValues = ['block', 'swap', 'fallback', 'optional']; +var configs = [{time: 0, delay: 1000}, + {time: 1000, delay: 0}, + {time: 1000, delay: 500}, + {time: 1000, delay: 3000}, + {time: 5000, delay: 2000}, + {time: 5000, delay: 4000}, + {time: 5000, delay: 8000}]; + +function makeFontFaceDeclaration(family, config, display) { + url = '/fonts/Ahem.ttf?pipe=trickle(d' + config.delay / 1000 + ')'; + return '@font-face { font-family: ' + family + '; src: url("' + url + '"); font-display: ' + display + '; }'; +} + + +var maxTime = Math.max.apply(null, configs.map((config) => config.time)); +var table = document.getElementById('container'); + +window.onload = function() { + for (var config, i = 0; config = configs[i]; i++) { + var tr = document.createElement('tr'); + tr.classList.add('hidden'); + var td1 = document.createElement('td'); + td1.textContent = config.time / 1000; + tr.appendChild(td1); + var td2 = document.createElement('td'); + td2.textContent = config.delay / 1000; + tr.appendChild(td2); + + for (var display, j = 0; display = fontDisplayValues[j]; j++) { + var family = [display, config.time, config.delay].join('-'); + var rule = makeFontFaceDeclaration(family, config, display); + document.styleSheets[0].insertRule(rule, 0); + var td = document.createElement('td'); + td.textContent = 'a'; + td.style.fontFamily = family + ', Arial'; + tr.appendChild(td); + } + table.appendChild(tr); + if (config.time == 0) { + setTimeout((function(tr){ + tr.classList.remove('hidden'); + document.documentElement.classList.remove("reftest-wait"); + }).bind(null, tr), maxTime); + } else { + setTimeout((function(tr){tr.classList.remove('hidden')}).bind(null, tr), maxTime - config.time); + } + } +} + +</script> +</html> |