mirror of
https://github.com/servo/servo.git
synced 2025-08-14 01:45:33 +01:00
Update web-platform-tests to revision 2660fc486f7027c913863d48a8843942f0c0365e
This commit is contained in:
WPT Sync Bot
parent
96de31b463
commit
c413a1139e
455 changed files with 8535 additions and 2067 deletions
|
|
@ -0,0 +1,261 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Fonts Module Level 4: getComputedStyle().font</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#font-prop">
|
||||
<meta name="assert" content="font computed value round-trips.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
<style>
|
||||
#container {
|
||||
font-weight: 800;
|
||||
font-size: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const initial_style = 'normal';
|
||||
const initial_variant = 'normal';
|
||||
const initial_weight = 'normal';
|
||||
const initial_stretch = 'normal';
|
||||
const initial_line_height = 'normal';
|
||||
|
||||
// Firefox and Edge 18 serialize these as supplied.
|
||||
// Blink and Safari have implementation-dependent or platform-dependent serializations.
|
||||
function test_system_font(keyword) {
|
||||
test(() => {
|
||||
const target = document.getElementById('target');
|
||||
const previousValue = 'italic xx-large/0px fantasy';
|
||||
target.style.font = previousValue;
|
||||
target.style.font = keyword;
|
||||
const readValue = getComputedStyle(target).font;
|
||||
assert_not_equals(readValue, '', 'font should be set');
|
||||
assert_not_equals(readValue, previousValue, 'font should be updated');
|
||||
target.style.font = previousValue;
|
||||
target.style.font = readValue;
|
||||
assert_equals(getComputedStyle(target).font, readValue, "serialization should round-trip");
|
||||
}, keyword + ' should be a supported system font.');
|
||||
}
|
||||
|
||||
test_system_font('caption');
|
||||
test_system_font('icon');
|
||||
test_system_font('menu');
|
||||
test_system_font('message-box');
|
||||
test_system_font('small-caption');
|
||||
test_system_font('status-bar');
|
||||
|
||||
// a value other than normal
|
||||
const generate_style = () => 'italic';
|
||||
|
||||
// value other than normal
|
||||
const generate_variant = () => 'small-caps';
|
||||
|
||||
// values other than normal
|
||||
const generate_weight = (() => {
|
||||
const alternatives = [
|
||||
'bold',
|
||||
'bolder',
|
||||
'lighter',
|
||||
'100',
|
||||
'900'
|
||||
];
|
||||
let counter = 0;
|
||||
return () => alternatives[counter++ % alternatives.length];
|
||||
})();
|
||||
|
||||
const compute_weight = (() => {
|
||||
const cache = {}
|
||||
return (weight) => {
|
||||
if (!(weight in cache)) {
|
||||
const weight_reference = document.createElement('div');
|
||||
document.getElementById('container').appendChild(weight_reference);
|
||||
weight_reference.style.fontWeight = weight;
|
||||
cache[weight] = getComputedStyle(weight_reference).fontWeight;
|
||||
weight_reference.remove();
|
||||
}
|
||||
return cache[weight];
|
||||
}
|
||||
})();
|
||||
|
||||
// values other than normal
|
||||
const generate_stretch = (() => {
|
||||
const alternatives = [
|
||||
'ultra-condensed',
|
||||
'extra-condensed',
|
||||
'condensed',
|
||||
'semi-condensed',
|
||||
'semi-expanded',
|
||||
'expanded',
|
||||
'extra-expanded',
|
||||
'ultra-expanded'
|
||||
];
|
||||
let counter = 0;
|
||||
return () => alternatives[counter++ % alternatives.length];
|
||||
})();
|
||||
|
||||
const generate_size = (() => {
|
||||
const alternatives = [
|
||||
// <absolute-size>
|
||||
'xx-small',
|
||||
'medium',
|
||||
'xx-large',
|
||||
|
||||
// <relative-size>
|
||||
'larger',
|
||||
'smaller',
|
||||
|
||||
// <length-percentage>
|
||||
'10px',
|
||||
'20%',
|
||||
'calc(30% - 40px)',
|
||||
];
|
||||
let counter = 0;
|
||||
return () => alternatives[counter++ % alternatives.length];
|
||||
})();
|
||||
|
||||
const generate_line_height = (() => {
|
||||
const alternatives = [
|
||||
null,
|
||||
'normal',
|
||||
'1.2',
|
||||
'calc(120% + 1.2em)'
|
||||
];
|
||||
let counter = 0;
|
||||
return () => alternatives[counter++ % alternatives.length];
|
||||
})();
|
||||
|
||||
const generate_family = (() => {
|
||||
const alternatives = [
|
||||
'serif',
|
||||
'sans-serif',
|
||||
'cursive',
|
||||
'fantasy',
|
||||
'monospace',
|
||||
'Menu',
|
||||
'"Non-Generic Example Family Name"'
|
||||
];
|
||||
let counter = 0;
|
||||
return () => alternatives[counter++ % alternatives.length];
|
||||
})();
|
||||
|
||||
function test_specific(prefix) {
|
||||
const reference = document.createElement('div');
|
||||
document.getElementById('container').appendChild(reference);
|
||||
|
||||
let parts = [];
|
||||
let canonical = [];
|
||||
let style = null;
|
||||
let variant = null;
|
||||
let weight = null;
|
||||
let stretch = null;
|
||||
for (let entry of prefix) {
|
||||
if (entry === 'style') {
|
||||
style = generate_style();
|
||||
parts.push(style);
|
||||
} else if (entry === 'variant') {
|
||||
variant = generate_variant();
|
||||
parts.push(variant);
|
||||
} else if (entry === 'weight') {
|
||||
weight = generate_weight();
|
||||
parts.push(weight);
|
||||
} else if (entry === 'stretch') {
|
||||
stretch = generate_stretch();
|
||||
parts.push(stretch);
|
||||
} else {
|
||||
// normal
|
||||
parts.push('normal');
|
||||
}
|
||||
}
|
||||
|
||||
if (style) {
|
||||
canonical.push(style);
|
||||
reference.style.fontStyle = style;
|
||||
} else {
|
||||
canonical.push(initial_style);
|
||||
}
|
||||
|
||||
if (variant) {
|
||||
canonical.push(variant);
|
||||
reference.style.fontVariant = style;
|
||||
} else {
|
||||
canonical.push(initial_variant);
|
||||
}
|
||||
if (weight) {
|
||||
canonical.push(compute_weight(weight));
|
||||
reference.style.fontWeight = style;
|
||||
} else {
|
||||
canonical.push(compute_weight(initial_weight));
|
||||
}
|
||||
if (stretch) {
|
||||
canonical.push(stretch);
|
||||
reference.style.fontStretch = style;
|
||||
} else {
|
||||
canonical.push(initial_stretch);
|
||||
}
|
||||
|
||||
const size = generate_size();
|
||||
reference.style.fontSize = size;
|
||||
const line_height = generate_line_height();
|
||||
if (line_height) {
|
||||
parts.push(size + '/' + line_height);
|
||||
reference.style.lineHeight = line_height;
|
||||
} else {
|
||||
parts.push(size);
|
||||
}
|
||||
|
||||
const family = generate_family();
|
||||
parts.push(family);
|
||||
reference.style.fontFamily = family;
|
||||
|
||||
canonical.push(getComputedStyle(reference).fontSize + '/' + getComputedStyle(reference).lineHeight);
|
||||
canonical.push(family);
|
||||
|
||||
reference.remove();
|
||||
|
||||
// Implementations differ on adjacent space when serializing '/'
|
||||
// https://github.com/w3c/csswg-drafts/issues/4282
|
||||
const expected = canonical.join(' ');
|
||||
test_computed_value('font', parts.join(' '), [expected, expected.replace('/', ' / ')]);
|
||||
}
|
||||
|
||||
// Font style, variant, weight and stretch may appear in any order.
|
||||
// Any or all may be omitted. Each accepts the keyword 'normal'.
|
||||
// We generate every permutation of these four properties, treating
|
||||
// the cases of a property value being omitted or being explicitly
|
||||
// 'normal' as being distinct permutations from when the property
|
||||
// has a value other than 'normal'.
|
||||
function test_various(prefix) {
|
||||
test_specific(prefix);
|
||||
if (prefix.length === 4) {
|
||||
// Font style, variant, weight and stretch may not appear
|
||||
// more than once.
|
||||
return;
|
||||
}
|
||||
|
||||
const alternatives = [
|
||||
'normal',
|
||||
'style',
|
||||
'variant',
|
||||
'weight',
|
||||
'stretch'
|
||||
];
|
||||
for (let alternative of alternatives) {
|
||||
// Since this is called recursively, check prefix for existing
|
||||
// alternatives, otherwise we may have two styles or two variants, etc.
|
||||
if (alternative === 'normal' || !prefix.includes(alternative))
|
||||
test_various(prefix.concat(alternative));
|
||||
}
|
||||
}
|
||||
|
||||
test_various([]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue