Skip to content

Commit d5b591d

Browse files
tursunovalutien
tursunova
authored and
lutien
committed
Bug 1968553 [wpt PR 52784] - Evaluate range container style queries in if(),
Automatic update from web-platform-tests Evaluate range container style queries in if() Resolved in [0]. [0] w3c/csswg-drafts#8376 (comment) Bug: 408011559 Change-Id: Ided2356dae0981e31c70774419738f958f8b7636 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6582622 Reviewed-by: Anders Hartvoll Ruud Commit-Queue: Munira Tursunova Cr-Commit-Position: refs/heads/main@{#1465578} -- wpt-commits: ed9846d475761ebb5c0aa451341482447f2c1bb8 wpt-pr: 52784 Differential Revision: https://phabricator.services.mozilla.com/D251826
1 parent c01957e commit d5b591d

File tree

1 file changed

+131
-0
lines changed

1 file changed

+131
-0
lines changed

‎testing/web-platform/tests/css/css-values/if-conditionals.html

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,21 @@
3737
inherits: true;
3838
initial-value: 3;
3939
}
40+
@property --angle {
41+
syntax: "";
42+
inherits: true;
43+
initial-value: 3deg;
44+
}
45+
@property --time {
46+
syntax: ";
47+
inherits: true;
48+
initial-value: 3s;
49+
}
50+
@property --resolution {
51+
syntax: "";
52+
inherits: true;
53+
initial-value: 3dpi;
54+
}
4055
div {
4156
font-size: 30px;
4257
}
@@ -511,6 +526,122 @@
511526
[['--length', 'attr(data-foo type())']],
512527
'false_value');
513528

529+
// style() queries with range syntax in the condition, literals on both sides of equation
530+
test_if_with_custom_properties('if(style(10em > 3px): true_value; else: false_value)', [], 'true_value');
531+
test_if_with_custom_properties('if(style(1em > 1px): true_value; else: false_value)', [], 'true_value');
532+
test_if_with_custom_properties('if(style(7px > 3px): true_value; else: false_value)', [], 'true_value');
533+
test_if_with_custom_properties('if(style(3px > 3px): true_value; else: false_value)', [], 'false_value');
534+
test_if_with_custom_properties('if(style(3turn > 3deg): true_value; else: false_value)', [], 'true_value');
535+
test_if_with_custom_properties('if(style(3turn <= 3deg): true_value; else: false_value)', [], 'false_value');
536+
test_if_with_custom_properties('if(style(3% >= 3%): true_value; else: false_value)', [], 'true_value');
537+
test_if_with_custom_properties('if(style(3s > 3ms): true_value; else: false_value)', [], 'true_value');
538+
test_if_with_custom_properties('if(style(3dppx > 96dpi): true_value; else: false_value)', [], 'true_value');
539+
540+
// style() queries with range syntax in the condition, simple custom properties in the condition
541+
test_if_with_custom_properties('if(style(--x <= 3): true_value; else: false_value)',
542+
[['--x', '3']],
543+
'true_value');
544+
test_if_with_custom_properties('if(style(--x >= --y): true_value; else: false_value)',
545+
[['--x', '3'], ['--y', '3']],
546+
'true_value');
547+
test_if_with_custom_properties('if(style(--length > 3px): true_value; else: false_value)',
548+
[['--length', '11px']],
549+
'true_value');
550+
test_if_with_custom_properties('if(style(--x > 3px): true_value; else: false_value)',
551+
[['--x', '11px']],
552+
'true_value');
553+
test_if_with_custom_properties('if(style(--number >= 3): true_value; else: false_value)',
554+
[['--number', '3']],
555+
'true_value');
556+
test_if_with_custom_properties('if(style(--x >= 3): true_value; else: false_value)',
557+
[['--x', '3']],
558+
'true_value');
559+
test_if_with_custom_properties('if(style(--percentage > 3%): true_value; else: false_value)',
560+
[['--percentage', '5%']],
561+
'true_value');
562+
test_if_with_custom_properties('if(style(--x > 3%): true_value; else: false_value)',
563+
[['--x', '5%']],
564+
'true_value');
565+
test_if_with_custom_properties('if(style(--angle < 1turn): true_value; else: false_value)',
566+
[['--angle', '1deg']],
567+
'true_value');
568+
test_if_with_custom_properties('if(style(--x < 1turn): true_value; else: false_value)',
569+
[['--x', '1deg']],
570+
'true_value');
571+
test_if_with_custom_properties('if(style(--time <= 1000ms): true_value; else: false_value)',
572+
[['--time', '1s']],
573+
'true_value');
574+
test_if_with_custom_properties('if(style(--x <= 1000ms): true_value; else: false_value)',
575+
[['--x', '1s']],
576+
'true_value');
577+
test_if_with_custom_properties('if(style(3dppx > --resolution): true_value; else: false_value)',
578+
[['--resolution', '96dpi']],
579+
'true_value');
580+
test_if_with_custom_properties('if(style(3dppx > --x): true_value; else: false_value)',
581+
[['--x', '96dpi']],
582+
'true_value');
583+
584+
// style() queries with range syntax in the condition, invalid custom properties in the condition
585+
test_if_with_custom_properties('if(style(--x + 1 >= --y): true_value; else: false_value)',
586+
[['--x', '5'], ['--y', '3']],
587+
'false_value');
588+
test_if_with_custom_properties('if(style(--x >= --y + 1): true_value; else: false_value)',
589+
[['--x', '5'], ['--y', '3']],
590+
'false_value');
591+
test_if_with_custom_properties('if(style(calc(--x + 1) >= --y): true_value; else: false_value)',
592+
[['--x', '5'], ['--y', '3']],
593+
'false_value');
594+
test_if_with_custom_properties('if(style(--x >= calc(--y + 1)): true_value; else: false_value)',
595+
[['--x', '5'], ['--y', '3']],
596+
'false_value');
597+
598+
// style() queries with range syntax in the condition, custom properties with functions in the condition
599+
test_if_with_custom_properties('if(style(--x >= calc(3px + 3px)): true_value; else: false_value)',
600+
[['--x', '7px']],
601+
'true_value');
602+
test_if_with_custom_properties('if(style(calc(var(--x) + 1) >= var(--y)): true_value; else: false_value)',
603+
[['--x', '5'], ['--y', '3']],
604+
'true_value');
605+
test_if_with_custom_properties('if(style(var(--x) >= --x): true_value; else: false_value)',
606+
[['--x', '3']],
607+
'true_value');
608+
609+
// style() queries with range syntax in the condition, incompatible types in the range.
610+
test_if_with_custom_properties('if(style(3px > 3): true_value; else: false_value)',
611+
[],
612+
'false_value');
613+
test_if_with_custom_properties('if(style(3em > 3deg): true_value; else: false_value)',
614+
[],
615+
'false_value');
616+
test_if_with_custom_properties('if(style(1px >= 1%) or style(1px <= 1%): true_value; else: false_value)',
617+
[],
618+
'false_value');
619+
test_if_with_custom_properties('if(style(--length > 3): true_value; else: false_value)',
620+
[['--length', '11em']],
621+
'false_value');
622+
test_if_with_custom_properties('if(style(--number > 3px): true_value; else: false_value)',
623+
[['--number', '11']],
624+
'false_value');
625+
test_if_with_custom_properties('if(style(--x >= 3): true_value; else: false_value)',
626+
[['--x', '3px']],
627+
'false_value');
628+
test_if_with_custom_properties(`if(style(--length >= 30px): true_value;
629+
else: false_value)`,
630+
[['--length', 'attr(data-foo type())']],
631+
'true_value');
632+
633+
// style() queries with range syntax in the condition, double range
634+
test_if_with_custom_properties('if(style(10px <= 10px < 11px): true_value; else: false_value)', [], 'true_value');
635+
test_if_with_custom_properties('if(style(3 < --x <= 5): true_value; else: false_value)',
636+
[['--x', '5']],
637+
'true_value');
638+
test_if_with_custom_properties('if(style(--x >= --y > --z): true_value; else: false_value)',
639+
[['--x', '3'], ['--y', '3'], ['--z', '3']],
640+
'false_value');
641+
test_if_with_custom_properties('if(style(--x >= --y > --z): true_value; else: false_value)',
642+
[['--x', '3'], ['--y', '3'], ['--z', '1']],
643+
'true_value');
644+
514645
// media() queries in the condition
515646
test_if(`if(media(max-width: 1px): true_value;
516647
else: false_value)`,

0 commit comments

Comments
 (0)