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
82 lines
3.1 KiB
HTML
82 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Values and Units Test: random() in container queries</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-values-5/#random">
|
|
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10982">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script>
|
|
<style id="test_style">
|
|
@property --length {
|
|
syntax: "<length>";
|
|
initial-value: 30px;
|
|
inherits: true;
|
|
}
|
|
|
|
#container {
|
|
container-type: size;
|
|
--length: 30px;
|
|
--unregistered: random(--foo, 30px, 10px);
|
|
}
|
|
#target {
|
|
--test1: true;
|
|
--test2: true;
|
|
--test3: true;
|
|
--test4: true;
|
|
--test5: true;
|
|
--test6: true;
|
|
--test7: true;
|
|
}
|
|
@container style(--length: random(--foo, 30px, 10px)) {
|
|
#target { --test1: false; }
|
|
}
|
|
@container style(--length: var(--unregistered)) {
|
|
#target { --test2: false; }
|
|
}
|
|
@container style(--length = random(--foo, 30px, 10px)) {
|
|
#target { --test3: false; }
|
|
}
|
|
@container style(--unregistered = 30px) {
|
|
#target { --test4: false; }
|
|
}
|
|
@container style(random(--foo, 30px, 10px) = random(--foo, 30px, 10px)) {
|
|
#target { --test5: false; }
|
|
}
|
|
@container style(random(--foo, 30px, 10px) <= random(--foo, 30px, 10px) <= random(--foo, 10px, 30px)) {
|
|
#target { --test6: false; }
|
|
}
|
|
@container style(--length <= --length <= random(--foo, 30px, 10px)) {
|
|
#target { --test7: false; }
|
|
}
|
|
</style>
|
|
<div style="container-name:name">
|
|
<main id="cq-main"></main>
|
|
</div>
|
|
<div id="container">
|
|
<div id="target"></div>
|
|
</div>
|
|
<script>
|
|
test_cq_condition_unknown("(width: random(--foo, 10px, 30px))");
|
|
test_cq_condition_unknown("(height: random(10px, 30px))");
|
|
|
|
test(() => {
|
|
assert_equals(getComputedStyle(target).getPropertyValue("--test1"), "true");
|
|
}, "random() should be disallowed in @container style() query");
|
|
test(() => {
|
|
assert_equals(getComputedStyle(target).getPropertyValue("--test2"), "true");
|
|
}, "random() in var() should be disallowed in @container style() query");
|
|
test(() => {
|
|
assert_equals(getComputedStyle(target).getPropertyValue("--test3"), "true");
|
|
}, "comparing custom property to random() should be disallowed in @container style() query range");
|
|
test(() => {
|
|
assert_equals(getComputedStyle(target).getPropertyValue("--test4"), "true");
|
|
}, "comparing custom property with random() value should be disallowed in @container style() query range");
|
|
test(() => {
|
|
assert_equals(getComputedStyle(target).getPropertyValue("--test5"), "true");
|
|
}, "comparing two random() values should be disallowed in @container style() query range");
|
|
test(() => {
|
|
assert_equals(getComputedStyle(target).getPropertyValue("--test6"), "true");
|
|
}, "comparing three random() values should be disallowed in @container style() query range");
|
|
test(() => {
|
|
assert_equals(getComputedStyle(target).getPropertyValue("--test7"), "true");
|
|
}, "comparing custom properties to random() should be disallowed in @container style() query range");
|
|
</script> |