Commit 490c0f22 authored by Anders Hartvoll Ruud's avatar Anders Hartvoll Ruud Committed by Commit Bot

[css-properties-values-api] Avoid viewport dependent tests.

The test registered-property-computation.html fails on wpt.fyi, because
it assumes that the tests are run in a viewport with specific dimensions.

This CL fixes that by using a standard property as a reference. For
instance, to figure out the expected value in pixels for '10vw', we
compute min-height:10vw and use that result as the expected value.

Also added some generally useful utils, and rewrote the test using those
utils to make the test more understandable.

R=futhark@chromium.org

Bug: 641877
Change-Id: Ie1ceb334eefee6e76015447f24148638ad8c55a6
Reviewed-on: https://chromium-review.googlesource.com/c/1275893Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Commit-Queue: Anders Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/master@{#598847}
parent f6a8e159
let next_property_id = 1;
// Generate a unique property name on the form --prop-N.
function generate_name() {
return `--prop-${next_property_id++}`;
}
// Produce a compatible initial value for the specified syntax.
function any_initial_value(syntax) {
let components = syntax.split('|').map(x => x.trim())
let first_component = components[0];
if (first_component.endsWith('+') || first_component.endsWith('#'))
first_component = first_component.slice(0, -1);
switch (first_component) {
case '*':
case '<custom-ident>':
return 'NULL';
case '<angle>':
return '0deg';
case '<color>':
return 'rgb(0, 0, 0)';
case '<image>':
case '<url>':
return 'url(0)';
case '<integer>':
case '<length-percentage>':
case '<length>':
case '<number>':
return '0';
case '<percentage>':
return '0%';
case '<resolution>':
return '0dpi';
case '<time>':
return '0s';
case '<transform-function>':
case '<transform-list>':
return 'matrix(0, 0, 0, 0, 0, 0)';
default:
// We assume syntax is a specific custom ident.
return first_component;
}
}
// Registers a unique property on the form '--prop-N' and returns the name.
// Any value except 'syntax' may be omitted, in which case the property will
// not inherit, and some undefined (but compatible) initial value will be
// generated. If a single string is used as the argument, it is assumed to be
// the syntax.
function generate_property(reg) {
let syntax = typeof(reg) === 'string' ? reg : reg.syntax;
let initial = typeof(reg.initialValue) === 'undefined' ? any_initial_value(syntax)
: reg.initialValue;
let inherits = typeof(reg.inherits) === 'undefined' ? false : reg.inherits;
let name = generate_name();
CSS.registerProperty({
name: name,
syntax: syntax,
initialValue: initial,
inherits: inherits
});
return name;
}
function all_syntaxes() {
return [
'*',
'<angle>',
'<color>',
'<custom-ident>',
'<image>',
'<integer>',
'<length-percentage>',
'<length>',
'<number>',
'<percentage>',
'<resolution>',
'<time>',
'<transform-function>',
'<transform-list>',
'<url>'
]
}
<!DOCTYPE html>
<title>Self-test for utils.js</title>
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="./resources/utils.js"></script>
<div id=outer><div id=inner></div></div>
<script>
test(function(){
let syntaxes = all_syntaxes().concat([
'foo',
'bar | <length>',
'<angle> | <length>'
]);
// Don't throw:
syntaxes.forEach(generate_property);
}, 'Default initial values of generated properties are valid (self-test).');
test(function(){
try {
let inherited = generate_property({ syntax: '<length>', inherits: true });
let non_inherited = generate_property({ syntax: '<length>', inherits: false, initialValue: '5px' });
outer.style = `${inherited}: 10px; ${non_inherited}: 11px;`;
assert_equals(getComputedStyle(outer).getPropertyValue(inherited), '10px');
assert_equals(getComputedStyle(outer).getPropertyValue(non_inherited), '11px');
assert_equals(getComputedStyle(inner).getPropertyValue(inherited), '10px');
assert_equals(getComputedStyle(inner).getPropertyValue(non_inherited), '5px');
} finally {
outer.style = '';
inner.style = '';
}
}, 'Generated properties respect inherits flag');
</script>
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