moonira
b6602cc03e
Automatic update from web-platform-tests
Update random() with new syntax
Resolved in [0] and [1] to change random syntax to following:
<random()> = random( <random-cache-key>? , <calc-sum>, <calc-sum>,
<calc-sum>? )
<random-cache-key> = auto | <random-name> | fixed <number [0,1]>
<random-name> = <dashed-ident> [ element-scoped || [ property-scoped |
property-index-scoped ]]?
Previous syntax:
<random()> = random( <random-value-sharing>? , <calc-sum>, <calc-sum>,
<calc-sum>? )
<random-value-sharing> = [ [ auto | <dashed-ident> ] || element-shared ]
| fixed <number [0,1]>
Spec has not been fully updated yet.
[0] https://github.com/w3c/csswg-drafts/issues/13132#issuecomment-3998898114
[1] https://github.com/w3c/csswg-drafts/issues/13601#issuecomment-4171573718
Bug: 413385732
Change-Id: I30f355ef6241b3d0c8e259bc1044ba2f57ce2b97
Fixed: 498620677, 489743837
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7735052
Commit-Queue: Munira Tursunova <moonira@google.com>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1612756}
--
wpt-commits: 30794ddd1660f5dfe791bbc660754fc8e7d224f1
wpt-pr: 59091
118 lines
4.0 KiB
HTML
118 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Values and Units Test: random() in if()</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-values-5/#random">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/css/support/computed-testcommon.js"></script>
|
|
<body>
|
|
</body>
|
|
<style id="style">
|
|
@property --number {
|
|
syntax: "<number>";
|
|
inherits: true;
|
|
initial-value: 0;
|
|
}
|
|
@property --number2 {
|
|
syntax: "<number>";
|
|
inherits: true;
|
|
initial-value: 0;
|
|
}
|
|
div {
|
|
--random1: random(1, 10);
|
|
--random2: random(11, 30);
|
|
}
|
|
</style>
|
|
<script>
|
|
// Since actual and expected values are generated randomly, `assert_equals()`
|
|
// does not generate deterministic test failure output. Chrome relies on test
|
|
// failure output to be deterministic and stable for failing test expectations.
|
|
function test_random_equals(actual, expected, message = "Random values should be equal") {
|
|
assert_true(actual == expected, message);
|
|
}
|
|
function test_random_not_equals(actual, expected, message = "Random values should be equal") {
|
|
assert_false(actual == expected, message);
|
|
}
|
|
|
|
function test_value_is_not_initial(value) {
|
|
assert_false(value == 0);
|
|
}
|
|
|
|
test(() => {
|
|
const holder = document.createElement('div');
|
|
document.body.appendChild(holder);
|
|
try {
|
|
const el = document.createElement('div');
|
|
el.style.setProperty('--unregistered', 'if(style(random(1, 10) < random(11, 30)): true; else: false;)');
|
|
holder.appendChild(el);
|
|
|
|
const elComputedValue = getComputedStyle(el).getPropertyValue('--unregistered');
|
|
|
|
assert_equals(elComputedValue, 'false');
|
|
} finally {
|
|
document.body.removeChild(holder);
|
|
}
|
|
}, `random() should not be allowed in if() style() condition`);
|
|
|
|
test(() => {
|
|
const holder = document.createElement('div');
|
|
document.body.appendChild(holder);
|
|
try {
|
|
const el = document.createElement('div');
|
|
el.style.setProperty('--unregistered', 'if(style(var(--random1) < var(--random2)): true; else: false;)');
|
|
holder.appendChild(el);
|
|
|
|
const elComputedValue = getComputedStyle(el).getPropertyValue('--unregistered');
|
|
|
|
assert_equals(elComputedValue, 'false');
|
|
} finally {
|
|
document.body.removeChild(holder);
|
|
}
|
|
}, `random() in var() should not be allowed in if() style() condition`);
|
|
|
|
test(() => {
|
|
const holder = document.createElement('div');
|
|
document.body.appendChild(holder);
|
|
|
|
try {
|
|
const el = document.createElement('div');
|
|
el.style.setProperty('--number', 'if(style(--unknown): ; else: random(1, 100000);)');
|
|
el.style.setProperty('--number2', 'if(style(--unknown): ; else: random(1, 100000);)');
|
|
holder.appendChild(el);
|
|
|
|
const elComputedValue1 = getComputedStyle(el).getPropertyValue('--number');
|
|
const elComputedValue2 = getComputedStyle(el).getPropertyValue('--number2');
|
|
|
|
test_value_is_not_initial(elComputedValue1);
|
|
test_value_is_not_initial(elComputedValue2);
|
|
|
|
test_random_not_equals(elComputedValue1, elComputedValue2);
|
|
} finally {
|
|
document.body.removeChild(holder);
|
|
}
|
|
}, `random() with different property names should not be shared in if() declaration value`);
|
|
|
|
test(() => {
|
|
const holder = document.createElement('div');
|
|
document.body.appendChild(holder);
|
|
|
|
try {
|
|
const el1 = document.createElement('div');
|
|
el1.style.setProperty('--number', 'if(style(--unknown): ; else: random(--foo property-index-scoped, 1, 100000);)');
|
|
holder.appendChild(el1);
|
|
const el2 = document.createElement('div');
|
|
el2.style.setProperty('--number', 'if(style(--unknown): ; else: random(--foo property-index-scoped, 1, 100000);)');
|
|
holder.appendChild(el2);
|
|
|
|
const elComputedValue1 = getComputedStyle(el1).getPropertyValue('--number');
|
|
const elComputedValue2 = getComputedStyle(el2).getPropertyValue('--number');
|
|
|
|
test_value_is_not_initial(elComputedValue1);
|
|
test_value_is_not_initial(elComputedValue2);
|
|
|
|
test_random_equals(elComputedValue1, elComputedValue2);
|
|
} finally {
|
|
document.body.removeChild(holder);
|
|
}
|
|
}, `random() with same property name on different elements in if() declaration value should be equal`);
|
|
|
|
</script> |