mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-11 05:39:41 +02:00
9a0fcd3db4
Automatic update from web-platform-tests[css-properties-values-api] Substitution behavior. Currently, registered properties substitute into other values exactly like specified (like unregistered properties). This means that, for a <length>-registered property with a specified value "10em" (for instance), when that property is substituted via var()-reference, the tokens "10em" are inserted. This is not correct, and produces the wrong result with e.g. inherited values. This CL changes that, by implementing "absolutization" of registered custom properties: a process which calculates the computed value of the property, and then produces a token stream usable for substitution which is equivalent to the computed value. * Currently we resolve var()-references on all custom properties before applying high-priority properties. This is no longer possible, because the true value of a custom property (also unregistered) can not be known until the font has been updated. Consider: --reg-len: 1em; --unreg:var(--reg-len). Here, the computed value of --unreg should be "16px" (assuming a font-size of 16px), and not "1em". If we destructively resolve --unreg before the font size is known, we end up with the wrong tokens. Hence the resolution process has been moved to after the font has been updated. * Custom properties must also be usable from high-priority properties. Since they are no longer resolved beforehand, they are resolved "on the fly", non-destructively. "Non-destructively" means that resolved token streams are not stored on ComputedStyle, such that any var()-references are kept for the _real_ resolution pass after the font has been updated. This works, because the high-priority properties do not require proper "absolute substitution" to produce the correct value. Note that font-size is special, in that font-relative units may not be used if they arrive via a registered custom property. * There is a special resolving pass for registered custom properties (ComputeRegisteredVariables). This pass produces non-absolute CSSValues for calculation of animation. * Parsing of registered properties now happens entirely in CSSVariableResolver, and no longer in variable.cc. Having this in multiple places is just confusing. R=futhark@chromium.org Bug: 641877 Change-Id: Ic705d0808ffcea0ae5db02fb20870767175bb706 Reviewed-on: https://chromium-review.googlesource.com/1240274 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Anders Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/master@{#593902} -- wpt-commits: c801e269e3e22d11e1bb4530ff15e87db877b1d2 wpt-pr: 13193
205 lines
8.2 KiB
HTML
205 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#dependency-cycles-via-relative-units" />
|
|
<meta name="assert" content="This test verifies that reference cycles via units are detected" />
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script>
|
|
function register_length(name, inherits=true) {
|
|
CSS.registerProperty({
|
|
name: name,
|
|
syntax: '<length>',
|
|
initialValue: '0px',
|
|
inherits: inherits
|
|
});
|
|
}
|
|
|
|
register_length('--font-size-em');
|
|
register_length('--font-size-rem');
|
|
register_length('--font-size-ex');
|
|
register_length('--font-size-ch');
|
|
register_length('--font-size-px');
|
|
register_length('--font-size-em-via-var');
|
|
register_length('--font-size-rem-via-var');
|
|
register_length('--font-size-ex-via-var');
|
|
register_length('--font-size-ch-via-var');
|
|
register_length('--font-size-em-inherited', true);
|
|
register_length('--font-size-ex-inherited', true);
|
|
register_length('--font-size-ch-inherited', true);
|
|
</script>
|
|
<style>
|
|
:root {
|
|
--unregistered-em: 10em;
|
|
--unregistered-rem: 10rem;
|
|
--unregistered-ex: 10ex;
|
|
--unregistered-ch: 10ch;
|
|
}
|
|
|
|
:root, #target {
|
|
--font-size-em: 2em;
|
|
--font-size-rem: 2rem;
|
|
--font-size-ex: 2ex;
|
|
--font-size-ch: 2ch;
|
|
--font-size-px: 42px;
|
|
--font-size-em-via-var: var(--unregistered-em);
|
|
--font-size-rem-via-var: var(--unregistered-rem);
|
|
--font-size-ex-via-var: var(--unregistered-ex);
|
|
--font-size-ch-via-var: var(--unregistered-ch);
|
|
}
|
|
|
|
#parent {
|
|
--font-size-em-inherited: 4em;
|
|
--font-size-ex-inherited: 4ex;
|
|
--font-size-ch-inherited: 4ch;
|
|
}
|
|
|
|
#target {
|
|
font-size: 11px;
|
|
}
|
|
</style>
|
|
|
|
<div id=parent>
|
|
<div id=target></div>
|
|
</div>
|
|
<div id=ref></div>
|
|
|
|
<script>
|
|
|
|
// Compute a dimension (e.g. 1em) given a certain fontSize.
|
|
function compute_dimension(dimension, fontSize, element = ref) {
|
|
try {
|
|
element.attributeStyleMap.set('font-size', fontSize);
|
|
element.attributeStyleMap.set('margin-bottom', dimension);
|
|
return getComputedStyle(element).marginBottom;
|
|
} finally {
|
|
element.attributeStyleMap.clear();
|
|
}
|
|
}
|
|
|
|
function assert_property_equals(name, value, element = target) {
|
|
var computedStyle = getComputedStyle(element);
|
|
assert_equals(computedStyle.getPropertyValue(name), value);
|
|
}
|
|
|
|
let unsetFontSize = compute_dimension('1em', 'unset');
|
|
|
|
add_result_callback(function(){
|
|
target.attributeStyleMap.clear();
|
|
document.documentElement.attributeStyleMap.clear();
|
|
});
|
|
|
|
test(function() {
|
|
target.style = 'font-size: var(--font-size-px);';
|
|
assert_property_equals('font-size', '42px');
|
|
assert_property_equals('--font-size-px', '42px');
|
|
}, 'Non-font-dependent variables can be used in font-size');
|
|
|
|
test(function() {
|
|
target.style = 'font-size: var(--font-size-em);';
|
|
assert_property_equals('font-size', unsetFontSize);
|
|
assert_property_equals('--font-size-em', compute_dimension('2em', 'unset'));
|
|
}, 'Lengths with em units may not be referenced from font-size');
|
|
|
|
test(function() {
|
|
target.style = 'font-size: var(--font-size-ex);';
|
|
assert_property_equals('font-size', unsetFontSize);
|
|
assert_property_equals('--font-size-ex', compute_dimension('2ex', 'unset'));
|
|
}, 'Lengths with ex units may not be referenced from font-size');
|
|
|
|
test(function() {
|
|
target.style = 'font-size: var(--font-size-ch);';
|
|
assert_property_equals('font-size', unsetFontSize);
|
|
assert_property_equals('--font-size-ch', compute_dimension('2ch', 'unset'));
|
|
}, 'Lengths with ch units may not be referenced from font-size');
|
|
|
|
test(function() {
|
|
target.style = 'font-size: var(--font-size-rem);';
|
|
let expected = compute_dimension('2rem', 'unset', document.documentElement);
|
|
assert_property_equals('--font-size-rem', expected);
|
|
assert_property_equals('font-size', expected);
|
|
}, 'Lengths with rem units may be referenced from font-size on non-root element');
|
|
|
|
test(function() {
|
|
let root = document.documentElement;
|
|
let expected1rem = compute_dimension('1rem', 'unset', root);
|
|
let expected2rem = compute_dimension('2rem', 'unset', root);
|
|
root.style = 'font-size: var(--font-size-rem);';
|
|
assert_property_equals('font-size', expected1rem, root);
|
|
assert_property_equals('--font-size-rem', expected2rem, root);
|
|
}, 'Lengths with rem units may not be referenced from font-size on root element');
|
|
|
|
test(function() {
|
|
target.style = 'font-size: var(--noexist, var(--font-size-em));';
|
|
assert_property_equals('font-size', unsetFontSize);
|
|
}, 'Fallback may not use font-relative units');
|
|
|
|
test(function() {
|
|
target.style = 'font-size: var(--font-size-em, 42px);';
|
|
assert_property_equals('font-size', '42px');
|
|
}, 'Fallback triggered when em unit cycle is detected');
|
|
|
|
test(function() {
|
|
target.style = 'font-size: var(--font-size-ex, 42px);';
|
|
assert_property_equals('font-size', '42px');
|
|
}, 'Fallback triggered when ex unit cycle is detected');
|
|
|
|
test(function() {
|
|
target.style = 'font-size: var(--font-size-ch, 42px);';
|
|
assert_property_equals('font-size', '42px');
|
|
}, 'Fallback triggered when ch unit cycle is detected');
|
|
|
|
test(function() {
|
|
let root = document.documentElement;
|
|
root.style = 'font-size: var(--font-size-rem, 42px);';
|
|
assert_property_equals('font-size', '42px', root);
|
|
root.style = 'font-size: unset;';
|
|
}, 'Fallback triggered when rem unit cycle is detected on root element');
|
|
|
|
test(function() {
|
|
target.style = 'font-size: var(--font-size-em-via-var);';
|
|
assert_property_equals('font-size', unsetFontSize);
|
|
assert_property_equals('--font-size-em-via-var', compute_dimension('10em', 'unset'));
|
|
}, 'Lengths with em units are detected via var references');
|
|
|
|
test(function() {
|
|
target.style = 'font-size: var(--font-size-ex-via-var);';
|
|
assert_property_equals('font-size', unsetFontSize);
|
|
assert_property_equals('--font-size-ex-via-var', compute_dimension('10ex', 'unset'));
|
|
}, 'Lengths with ex units are detected via var references');
|
|
|
|
test(function() {
|
|
target.style = 'font-size: var(--font-size-ch-via-var);';
|
|
assert_property_equals('font-size', unsetFontSize);
|
|
assert_property_equals('--font-size-ch-via-var', compute_dimension('10ch', 'unset'));
|
|
}, 'Lengths with ch units are detected via var references');
|
|
|
|
test(function() {
|
|
let root = document.documentElement;
|
|
let expected1rem = compute_dimension('1rem', 'unset', root);
|
|
let expected10rem = compute_dimension('10rem', 'unset', root);
|
|
root.style = 'font-size: var(--font-size-rem-via-var);';
|
|
assert_property_equals('font-size', expected1rem, root);
|
|
assert_property_equals('--font-size-rem-via-var', expected10rem, root);
|
|
}, 'Lengths with rem units are detected via var references');
|
|
|
|
test(function() {
|
|
let expected4em = compute_dimension('4em', 'unset');
|
|
target.style = 'font-size: var(--font-size-em-inherited);';
|
|
assert_property_equals('font-size', expected4em);
|
|
assert_property_equals('--font-size-em-inherited', expected4em);
|
|
}, 'Inherited lengths with em units may be used');
|
|
|
|
test(function() {
|
|
let expected4ex = compute_dimension('4ex', 'unset');
|
|
target.style = 'font-size: var(--font-size-ex-inherited);';
|
|
assert_property_equals('font-size', expected4ex);
|
|
assert_property_equals('--font-size-ex-inherited', expected4ex);
|
|
}, 'Inherited lengths with ex units may be used');
|
|
|
|
test(function() {
|
|
let expected4ch = compute_dimension('4ch', 'unset');
|
|
target.style = 'font-size: var(--font-size-ch-inherited);';
|
|
assert_property_equals('font-size', expected4ch);
|
|
assert_property_equals('--font-size-ch-inherited', expected4ch);
|
|
}, 'Inherited lengths with ch units may be used');
|
|
|
|
</script>
|