Skip to content

GitLab

T
tangled
Commit 7f266bea authored by Xiaocheng Hu's avatar Xiaocheng Hu Committed by Commit Bot
Browse files
Options

Add tests of the recalculation of 'ch' in pseudo elements 

Length unit 'ch' should be recalculated after loading a web font. This
patch is a followup of crrev.com/c/1972815 to ensure that it's also
recalculated in pseudo elements.

Bug: 441925
Change-Id: Ie62dba854aa9d1beb6b9a734f31760abf1acd040
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2016198Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org>
Cr-Commit-Position: refs/heads/master@{#734495}
parent 7df0769a
Hide whitespace changes
Inline Side-by-side
Showing with 135 additions and 0 deletions
third_party/blink/web_tests/external/wpt/css/css-values/ch-pseudo-recalc-on-font-load.html 0 → 100644
View file @ 7f266bea
<!DOCTYPE html>
<meta charset="utf-8">
<title>Length unit 'ch' used in pseudo elements should be recalculated after loading a web font</title>
<link rel="help" href="https://www.w3.org/TR/css-values-4/#font-relative-lengths">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4">
<link rel="author" href="xiaochengh@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.container {
font: 25px/1 "custom font", monospace;
}
.before::before,
.after::after,
.first-letter::first-letter,
.first-line::first-line {
font-family: monospace;
font-size: 1ch; /* Refers to originating element's font metrics, which are different from self font metrics. */
}
.before::before,
.after::after {
content: 'text';
}
/* Defined separately so that browsers that haven't shipped it can still pass other tests. */
.marker::marker {
font-family: monospace;
font-size: 1ch;
content: 'text';
}
</style>
<div class="container before"></div>
<div class="container after"></div>
<div class="container first-letter">text</div>
<div class="container first-line">text</div>
<li class="container marker"></li>
<script>
function parseFontSizeInPx(element, pseudoElement) {
const value = CSSNumericValue.parse(getComputedStyle(element, pseudoElement).fontSize);
if (!value || !(value instanceof CSSUnitValue) || value.unit !== 'px')
throw 'Cannot parse width in pixels';
return value.value;
}
const testCases = ['before', 'after', 'first-letter', 'first-line', 'marker'];
const elements = testCases.map(testCase => document.querySelector('.' + testCase));
const asyncTests = testCases.map(
testCase => async_test(`ch in pseudo-element ::${testCase} should be recalculated after loading a web font`));
// Before loading custom font, tests should be rendered with monospace
// fallback and have a '1ch' measurement much shorter than 25px.
for (let i = 0; i < testCases.length; ++i) {
asyncTests[i].step(() => {
const fontSizePx = parseFontSizeInPx(elements[i], '::' + testCases[i]);
assert_less_than(fontSizePx, 24);
});
}
// Insert custom font into style sheet and load it
const customFont = new FontFace('custom font', 'url(/fonts/Ahem.ttf)');
document.fonts.add(customFont);
// After loading custom font, tests should be rendered with the custom font,
// which is Ahem, and have a '1ch' measurement that equals 25px.
customFont.load().then(
() => {
for (let i = 0; i < testCases.length; ++i) {
asyncTests[i].step(() => {
const fontSizePx = parseFontSizeInPx(elements[i], '::' + testCases[i]);
assert_approx_equals(fontSizePx, 25, 0.1);
asyncTests[i].done();
});
}
},
() => {
for (let i = 0; i < testCases.length; ++i) {
asyncTests[i].step(() => {
assert_unreached('Failed to load font');
});
}
}
);
</script>
third_party/blink/web_tests/wpt_internal/css/css-fonts/webkit-scrollbar-ch-recalc-ref.html 0 → 100644
View file @ 7f266bea
<!DOCTYPE html>
<title>Length unit ch used in webkit-scrollbar should be recalculated after loading a web font</title>
<link rel="help" href="https://www.w3.org/TR/css-values-4/#font-relative-lengths">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4">
<link rel="author" href="xiaochengh@chromium.org">
<style>
.container {
width: 600px;
height: 400px;
overflow: scroll;
}
.container::-webkit-scrollbar {
width: 25px; /* Refers to self font size. */
background-color: gray;
}
</style>
<div class="container"></div>
third_party/blink/web_tests/wpt_internal/css/css-fonts/webkit-scrollbar-ch-recalc.html 0 → 100644
View file @ 7f266bea
<!DOCTYPE html>
<title>Length unit ch used in webkit-scrollbar should be recalculated after loading a web font</title>
<link rel="help" href="https://www.w3.org/TR/css-values-4/#font-relative-lengths">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4">
<link rel="match" href="webkit-scrollbar-ch-recalc-ref.html">
<link rel="author" href="xiaochengh@chromium.org">
<style>
@font-face {
font-family: "custom font";
src: url(/fonts/Ahem.ttf);
}
.container {
width: 600px;
height: 400px;
font: 25px/1 "custom font", monospace;
overflow: scroll;
}
.container::-webkit-scrollbar {
font-family: monospace;
font-size: 1ch; /* Refers to originating element's font metrics, which are different from self font metrics. */
width: 1em; /* Refers to self font size. */
background-color: gray;
}
</style>
<div class="container"></div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment