/
computed-testcommon.js
90 lines (82 loc) · 3.93 KB
/
computed-testcommon.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
'use strict';
/**
* Create test that a CSS property computes to the expected value.
* The document element #target is used to perform the test.
*
* @param {string} property The name of the CSS property being tested.
* @param {string} specified A specified value for the property.
* @param {string|array} computed The expected computed value,
* or an array of permitted computed value.
* If omitted, defaults to specified.
*/
function test_computed_value(property, specified, computed, titleExtra) {
if (!computed)
computed = specified;
test(() => {
const target = document.getElementById('target');
assert_true(property in getComputedStyle(target), property + " doesn't seem to be supported in the computed style");
assert_true(CSS.supports(property, specified), "'" + specified + "' is a supported value for " + property + ".");
target.style[property] = '';
target.style[property] = specified;
let readValue = getComputedStyle(target)[property];
if (Array.isArray(computed)) {
assert_in_array(readValue, computed);
} else {
assert_equals(readValue, computed);
}
if (readValue !== specified) {
target.style[property] = '';
target.style[property] = readValue;
assert_equals(getComputedStyle(target)[property], readValue,
'computed value should round-trip');
}
}, `Property ${property} value '${specified}'${titleExtra ? ' ' + titleExtra : ''}`);
}
function test_computed_value_greater_or_lower_than(property, specified, expected, titleExtra) {
test(() => {
const target = document.getElementById('target');
assert_true(property in getComputedStyle(target), property + " doesn't seem to be supported in the computed style");
assert_true(CSS.supports(property, specified), "'" + specified + "' is a supported value for " + property + ".");
target.style[property] = '';
target.style[property] = specified;
let readValue = parseFloat(getComputedStyle(target)[property]);
assert_true(isFinite(readValue), specified + " expected finite value but got " + readValue)
assert_false(isNaN(readValue), specified + " expected finite value but got " + readValue)
if (expected > 0)
assert_greater_than_equal(readValue, expected, specified);
else
assert_less_than_equal(readValue, expected, specified);
}, `Property ${property} value '${specified}'${titleExtra ? ' ' + titleExtra : ''}`);
}
function test_pseudo_computed_value(pseudo, property, specified, computed, titleExtra) {
if (!computed)
computed = specified;
test(() => {
assert_true(/^::\w+$/.test(pseudo), pseudo + " doesn't seem to be a pseudo-element");
const styleElement = document.createElement("style");
document.documentElement.appendChild(styleElement);
try {
const {sheet} = styleElement;
sheet.insertRule("#target" + pseudo + "{}");
const {style} = sheet.cssRules[0];
const target = document.getElementById('target');
assert_true(property in getComputedStyle(target, pseudo), property + " doesn't seem to be supported in the computed style");
assert_true(CSS.supports(property, specified), "'" + specified + "' is a supported value for " + property + ".");
style[property] = specified;
let readValue = getComputedStyle(target, pseudo)[property];
if (Array.isArray(computed)) {
assert_in_array(readValue, computed);
} else {
assert_equals(readValue, computed);
}
if (readValue !== specified) {
style[property] = '';
style[property] = readValue;
assert_equals(getComputedStyle(target, pseudo)[property], readValue,
'computed value should round-trip');
}
} finally {
document.documentElement.removeChild(styleElement);
}
}, `Property ${property} value '${specified}' in ${pseudo}${titleExtra ? ' ' + titleExtra : ''}`);
}