mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-27 02:05:07 +02:00
915fc4602b
The remaining failing imported tests are due to wider issues which are covered by FIXMEs (both existing and added in this commit)
140 lines
3.2 KiB
HTML
140 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Values: The inherit() function (basic behavior)</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-values-5/#inherit-notation">
|
|
<script src="../../resources/testharness.js"></script>
|
|
<script src="../../resources/testharnessreport.js"></script>
|
|
<main id=main>
|
|
</main>
|
|
|
|
<template id=inherit_immediate_parent>
|
|
<style>
|
|
#parent {
|
|
--z: 2;
|
|
}
|
|
#target {
|
|
--z: 13;
|
|
z-index: inherit(--z);
|
|
}
|
|
</style>
|
|
<div id=parent>
|
|
<div id=target>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
test((t) => {
|
|
main.append(inherit_immediate_parent.content.cloneNode(true));
|
|
t.add_cleanup(() => { main.replaceChildren(); });
|
|
assert_equals(getComputedStyle(target).zIndex, '2');
|
|
}, 'inherit() on value set on parent');
|
|
</script>
|
|
|
|
<template id=inherit_ancestor>
|
|
<style>
|
|
:root {
|
|
--z: 2;
|
|
}
|
|
#foo {
|
|
--z: 13;
|
|
z-index: inherit(--z);
|
|
}
|
|
</style>
|
|
<div id=foo>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
test((t) => {
|
|
main.append(inherit_ancestor.content.cloneNode(true));
|
|
t.add_cleanup(() => { main.replaceChildren(); });
|
|
assert_equals(getComputedStyle(foo).zIndex, '2');
|
|
}, 'inherit() on value set on ancestor');
|
|
</script>
|
|
|
|
<template id=inherit_fallback>
|
|
<style>
|
|
#foo {
|
|
--z: 13;
|
|
z-index: inherit(--z, 4);
|
|
}
|
|
</style>
|
|
<div id=foo>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
test((t) => {
|
|
main.append(inherit_fallback.content.cloneNode(true));
|
|
t.add_cleanup(() => { main.replaceChildren(); });
|
|
assert_equals(getComputedStyle(foo).zIndex, '4');
|
|
}, 'inherit(), no value set on parent');
|
|
</script>
|
|
|
|
<template id=inherit_accumulate_values>
|
|
<style>
|
|
#e1 { --v: e1; }
|
|
#e2 { --v: e2 inherit(--v); }
|
|
#e3 { --v: e3 inherit(--v); }
|
|
</style>
|
|
<div id=e1>
|
|
<div id=e2>
|
|
<div id=e3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
test((t) => {
|
|
main.append(inherit_accumulate_values.content.cloneNode(true));
|
|
t.add_cleanup(() => { main.replaceChildren(); });
|
|
assert_equals(getComputedStyle(e3).getPropertyValue('--v'), 'e3 e2 e1');
|
|
}, 'inherit(), accumulating values');
|
|
</script>
|
|
|
|
<template id=inherit_accumulate_font_size>
|
|
<style>
|
|
@property --f {
|
|
syntax: "<length>";
|
|
inherits: false;
|
|
initial-value: 0px;
|
|
}
|
|
#e1 { font-size: 3px; --f: 1em; }
|
|
#e2 { font-size: 5px; --f: calc(1em + inherit(--f)); }
|
|
#e3 { font-size: 7px; --f: calc(1em + inherit(--f)); }
|
|
</style>
|
|
<div id=e1>
|
|
<div id=e2>
|
|
<div id=e3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
test((t) => {
|
|
main.append(inherit_accumulate_font_size.content.cloneNode(true));
|
|
t.add_cleanup(() => { main.replaceChildren(); });
|
|
assert_equals(getComputedStyle(e3).getPropertyValue('--f'), '15px');
|
|
}, 'inherit(), accumulating font-size');
|
|
</script>
|
|
|
|
<template id=inherit_within_if>
|
|
<style>
|
|
#parent {
|
|
--z: 2;
|
|
}
|
|
#target {
|
|
--z: 13;
|
|
z-index: if(style(--z > inherit(--z)):4; else:7);
|
|
}
|
|
</style>
|
|
<div id=parent>
|
|
<div id=target>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
test((t) => {
|
|
main.append(inherit_within_if.content.cloneNode(true));
|
|
t.add_cleanup(() => { main.replaceChildren(); });
|
|
assert_equals(getComputedStyle(target).zIndex, '4');
|
|
}, 'inherit() can be used within if()');
|
|
</script>
|