mirror of
https://github.com/servo/servo.git
synced 2025-07-13 10:23:40 +01:00
117 lines
6.6 KiB
HTML
117 lines
6.6 KiB
HTML
<!DOCTYPE HTML>
|
|
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#calculation-of-computed-values" />
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
|
|
<style>
|
|
#divWithFontSizeSet, #parentDiv {
|
|
font-size: 10px;
|
|
}
|
|
#divWithFontSizeSet, #divWithFontSizeInherited {
|
|
--length-1: 12px;
|
|
--length-2: 13vw;
|
|
--length-3: 14em;
|
|
--length-4: 15vmin;
|
|
--length-5: calc(16px - 7em + 10vh);
|
|
--length-6: var(--length-3);
|
|
--length-percentage-1: 17em;
|
|
--length-percentage-2: 18%;
|
|
--length-percentage-3: calc(19em - 2%);
|
|
--csv-1: 10px, 3em;
|
|
--csv-2: 4em ,9px;
|
|
--csv-3: 8em;
|
|
--csv-4: 3% , 10vmax , 22px;
|
|
--csv-5: calc(50% + 1em), 4px;
|
|
--csv-6: calc(13% + 37px);
|
|
--list-1: 10px 3em;
|
|
--list-2: 4em 9px;
|
|
--list-3: 3% 10vmax 22px;
|
|
--list-4: calc(50% + 1em) 4px;
|
|
--transform-function-1: translateX(2px);
|
|
--transform-function-2: translateX(10em);
|
|
--transform-function-3: translateX(calc(11em + 10%));
|
|
--transform-function-4: translateX(10%) scale(2);
|
|
}
|
|
</style>
|
|
|
|
<div id=divWithFontSizeSet></div>
|
|
<div id=parentDiv>
|
|
<div id=divWithFontSizeInherited></div>
|
|
</div>
|
|
|
|
<script>
|
|
test(() => {
|
|
CSS.registerProperty({name: '--length-1', syntax: '<length>', initialValue: '0px', inherits: false});
|
|
CSS.registerProperty({name: '--length-2', syntax: '<length>', initialValue: '0px', inherits: false});
|
|
CSS.registerProperty({name: '--length-3', syntax: '<length>', initialValue: '0px', inherits: false});
|
|
CSS.registerProperty({name: '--length-4', syntax: '<length>', initialValue: '0px', inherits: false});
|
|
CSS.registerProperty({name: '--length-5', syntax: '<length>', initialValue: '0px', inherits: false});
|
|
CSS.registerProperty({name: '--length-6', syntax: '<length>', initialValue: '0px', inherits: false});
|
|
CSS.registerProperty({name: '--length-percentage-1', syntax: '<length-percentage>', initialValue: '0px', inherits: false});
|
|
CSS.registerProperty({name: '--length-percentage-2', syntax: '<length-percentage>', initialValue: '0px', inherits: false});
|
|
CSS.registerProperty({name: '--length-percentage-3', syntax: '<length-percentage>', initialValue: '0px', inherits: false});
|
|
CSS.registerProperty({name: '--csv-1', syntax: '<length>#', initialValue: '0px', inherits: false});
|
|
CSS.registerProperty({name: '--csv-2', syntax: '<length>#', initialValue: '0px', inherits: false});
|
|
CSS.registerProperty({name: '--csv-3', syntax: '<length>#', initialValue: '0px', inherits: false});
|
|
CSS.registerProperty({name: '--csv-4', syntax: '<length-percentage>#', initialValue: '0px', inherits: false});
|
|
CSS.registerProperty({name: '--csv-5', syntax: '<length-percentage>#', initialValue: '0px', inherits: false});
|
|
CSS.registerProperty({name: '--csv-6', syntax: '<length-percentage>#', initialValue: '0px', inherits: false});
|
|
CSS.registerProperty({name: '--list-1', syntax: '<length>+', initialValue: '0px', inherits: false});
|
|
CSS.registerProperty({name: '--list-2', syntax: '<length>+', initialValue: '0px', inherits: false});
|
|
CSS.registerProperty({name: '--list-3', syntax: '<length-percentage>+', initialValue: '0px', inherits: false});
|
|
CSS.registerProperty({name: '--list-4', syntax: '<length-percentage>+', initialValue: '0px', inherits: false});
|
|
CSS.registerProperty({name: '--transform-function-1', syntax: '<transform-function>', initialValue: 'translateX(0px)', inherits: false});
|
|
CSS.registerProperty({name: '--transform-function-2', syntax: '<transform-function>', initialValue: 'translateX(0px)', inherits: false});
|
|
CSS.registerProperty({name: '--transform-function-3', syntax: '<transform-function>', initialValue: 'translateX(0px)', inherits: false});
|
|
CSS.registerProperty({name: '--transform-function-4', syntax: '<transform-function>+', initialValue: 'translateX(0px)', inherits: false});
|
|
}, "CSS.registerProperty");
|
|
|
|
for (var element of [divWithFontSizeSet, divWithFontSizeInherited]) {
|
|
var id = element.id;
|
|
var computedStyle = getComputedStyle(element);
|
|
|
|
test(function() {
|
|
assert_equals(computedStyle.getPropertyValue('--length-1'), '12px');
|
|
assert_equals(computedStyle.getPropertyValue('--length-2'), '104px');
|
|
assert_equals(computedStyle.getPropertyValue('--length-3'), '140px');
|
|
assert_equals(computedStyle.getPropertyValue('--length-4'), '90px');
|
|
assert_equals(computedStyle.getPropertyValue('--length-5'), '6px');
|
|
assert_equals(computedStyle.getPropertyValue('--length-6'), '140px');
|
|
}, "<length> values are computed correctly for " + id);
|
|
|
|
test(function() {
|
|
assert_equals(computedStyle.getPropertyValue('--length-percentage-1'), '170px');
|
|
assert_equals(computedStyle.getPropertyValue('--length-percentage-2'), '18%');
|
|
assert_equals(computedStyle.getPropertyValue('--length-percentage-3'), 'calc(190px + -2%)');
|
|
}, "<length-percentage> values are computed correctly for " + id);
|
|
|
|
test(function() {
|
|
assert_equals(computedStyle.getPropertyValue('--csv-1'), '10px, 30px');
|
|
assert_equals(computedStyle.getPropertyValue('--csv-2'), '40px, 9px');
|
|
assert_equals(computedStyle.getPropertyValue('--csv-3'), '80px');
|
|
}, "<length># values are computed correctly for " + id);
|
|
|
|
test(function() {
|
|
assert_equals(computedStyle.getPropertyValue('--csv-4'), '3%, 80px, 22px');
|
|
assert_equals(computedStyle.getPropertyValue('--csv-5'), 'calc(10px + 50%), 4px');
|
|
assert_equals(computedStyle.getPropertyValue('--csv-6'), 'calc(37px + 13%)');
|
|
}, "<length-percentage># values are computed correctly for " + id);
|
|
|
|
test(function() {
|
|
assert_equals(computedStyle.getPropertyValue('--list-1'), '10px 30px');
|
|
assert_equals(computedStyle.getPropertyValue('--list-2'), '40px 9px');
|
|
}, "<length>+ values are computed correctly for " + id);
|
|
|
|
test(function() {
|
|
assert_equals(computedStyle.getPropertyValue('--list-3'), '3% 80px 22px');
|
|
assert_equals(computedStyle.getPropertyValue('--list-4'), 'calc(10px + 50%) 4px');
|
|
}, "<length-percentage>+ values are computed correctly for " + id);
|
|
|
|
test(function() {
|
|
assert_equals(computedStyle.getPropertyValue('--transform-function-1'), 'translateX(2px)');
|
|
assert_equals(computedStyle.getPropertyValue('--transform-function-2'), 'translateX(100px)');
|
|
assert_equals(computedStyle.getPropertyValue('--transform-function-3'), 'translateX(calc(110px + 10%))');
|
|
assert_equals(computedStyle.getPropertyValue('--transform-function-4'), 'translateX(10%) scale(2)');
|
|
}, "<transform-function> values are computed correctly for " + id);
|
|
}
|
|
</script>
|