| <!DOCTYPE html> |
| <title>Custom Functions: Conditionals within @function</title> |
| <link rel="help" href="https://drafts.csswg.org/css-mixins-1/#conditional-rules"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="resources/utils.js"></script> |
| |
| <style> |
| #container { |
| container-type: size; |
| width: 100px; |
| height: 50px; |
| } |
| </style> |
| <div id=container> |
| <div id=target></div> |
| <div> |
| <div id=main></div> |
| |
| <!-- To pass, a test must produce matching computed values for --actual and |
| --expected on #target. --> |
| |
| <template data-name="Basic @supports"> |
| <style> |
| @function --f() { |
| result: FAIL; |
| @supports (width: 100px) { |
| result: PASS; |
| } |
| } |
| #target { |
| --actual: --f(); |
| --expected: PASS; |
| } |
| </style> |
| </template> |
| |
| <template data-name="Basic @supports (false)"> |
| <style> |
| @function --f() { |
| result: PASS; |
| @supports (not (width: 100px)) { |
| result: FAIL; |
| } |
| } |
| #target { |
| --actual: --f(); |
| --expected: PASS; |
| } |
| </style> |
| </template> |
| |
| <template data-name="Nested @supports"> |
| <style> |
| @function --f() { |
| result: FAIL; |
| @supports (not (width: red)) { |
| @supports (height: 100px) { |
| result: PASS; |
| } |
| } |
| } |
| #target { |
| --actual: --f(); |
| --expected: PASS; |
| } |
| </style> |
| </template> |
| |
| <template data-name="Nested @supports (false)"> |
| <style> |
| @function --f() { |
| result: FAIL-outer; |
| @supports (not (width: red)) { |
| result: PASS; |
| @supports (height: red) { |
| result: FAIL-inner; |
| } |
| } |
| } |
| #target { |
| --actual: --f(); |
| --expected: PASS; |
| } |
| </style> |
| </template> |
| |
| <template data-name="Inconsequential conditional"> |
| <style> |
| @function --f() { |
| @supports (width: 100px) { |
| result: FAIL; |
| } |
| result: PASS; |
| } |
| #target { |
| --actual: --f(); |
| --expected: PASS; |
| } |
| </style> |
| </template> |
| |
| <template data-name="@supports with locals"> |
| <style> |
| @function --f(--x) { |
| --y: 2; |
| --z: 3; |
| @supports (width: 100px) { |
| --y: 20; |
| } |
| result: var(--x) var(--y) var(--z); |
| } |
| #target { |
| --actual: --f(1); |
| --expected: 1 20 3; |
| } |
| </style> |
| </template> |
| |
| <!-- @media --> |
| |
| <template data-name="Basic @media"> |
| <style> |
| @function --f() { |
| result: FAIL; |
| @media (width > 0px) { |
| result: PASS; |
| } |
| } |
| #target { |
| --actual: --f(); |
| --expected: PASS; |
| } |
| </style> |
| </template> |
| |
| <template data-name="Basic @media (false)"> |
| <style> |
| @function --f() { |
| result: PASS; |
| @media (not (width)) { |
| result: FAIL; |
| } |
| } |
| #target { |
| --actual: --f(); |
| --expected: PASS; |
| } |
| </style> |
| </template> |
| |
| <template data-name="Nested @media"> |
| <style> |
| @function --f() { |
| result: FAIL; |
| @media (width > 0px) { |
| @media (not (height: 99999999px)) { |
| result: PASS; |
| } |
| @media (width: 99999999px) { |
| result: FAIL; |
| } |
| } |
| } |
| #target { |
| --actual: --f(); |
| --expected: PASS; |
| } |
| </style> |
| </template> |
| |
| <template data-name="Nested @media (false)"> |
| <style> |
| @function --f() { |
| result: PASS; |
| @media (not (width > 0px)) { |
| @media (not (height: 99999999px)) { |
| result: FAIL; |
| } |
| @media (width: 99999999px) { |
| result: FAIL; |
| } |
| } |
| } |
| #target { |
| --actual: --f(); |
| --expected: PASS; |
| } |
| </style> |
| </template> |
| |
| <template data-name="Locals within @media"> |
| <style> |
| @function --f() { |
| --x: FAIL; |
| @media (width > 0px) { |
| --x: PASS; |
| } |
| result: var(--x); |
| } |
| #target { |
| --actual: --f(); |
| --expected: PASS; |
| } |
| </style> |
| </template> |
| |
| <template data-name="@supports within @media"> |
| <style> |
| @function --f() { |
| --x: FAIL; |
| @media (width > 0px) { |
| @supports (color: green) { |
| --x: PASS; |
| } |
| @supports (not (color: green)) { |
| --x: FAIL; |
| } |
| } |
| result: var(--x); |
| } |
| #target { |
| --actual: --f(); |
| --expected: PASS; |
| } |
| </style> |
| </template> |
| |
| <template data-name="@media within @supports"> |
| <style> |
| @function --f() { |
| --x: FAIL; |
| @supports (color: green) { |
| @media (width > 0px) { |
| --x: PASS; |
| } |
| @media (width = 99999999999px) { |
| --x: FAIL; |
| } |
| } |
| result: var(--x); |
| } |
| #target { |
| --actual: --f(); |
| --expected: PASS; |
| } |
| </style> |
| </template> |
| |
| |
| <!-- @container --> |
| |
| <template data-name="Basic @container"> |
| <style> |
| @function --f() { |
| result: FAIL; |
| @container (width = 100px) { |
| result: PASS; |
| } |
| } |
| #target { |
| --actual: --f(); |
| --expected: PASS; |
| } |
| </style> |
| </template> |
| |
| <template data-name="Basic @container (false)"> |
| <style> |
| @function --f() { |
| result: PASS; |
| @container (width = 110px) { |
| result: FAIL; |
| } |
| } |
| #target { |
| --actual: --f(); |
| --expected: PASS; |
| } |
| </style> |
| </template> |
| |
| <template data-name="Nested @container"> |
| <style> |
| @function --f() { |
| result: FAIL; |
| @container (width = 100px) { |
| @container (not (height = 75px)) { |
| result: PASS; |
| } |
| @container (height: 75px) { |
| result: FAIL; |
| } |
| } |
| } |
| #target { |
| --actual: --f(); |
| --expected: PASS; |
| } |
| </style> |
| </template> |
| |
| <template data-name="Nested @container (false)"> |
| <style> |
| @function --f() { |
| result: PASS; |
| @container (width = 200px) { |
| @container (not (height = 75px)) { |
| result: FAIL; |
| } |
| @container (width: 75px) { |
| result: FAIL; |
| } |
| } |
| } |
| #target { |
| --actual: --f(); |
| --expected: PASS; |
| } |
| </style> |
| </template> |
| |
| <template data-name="Locals within @container"> |
| <style> |
| @function --f() { |
| --x: FAIL; |
| @container (width = 100px) { |
| --x: PASS; |
| } |
| result: var(--x); |
| } |
| #target { |
| --actual: --f(); |
| --expected: PASS; |
| } |
| </style> |
| </template> |
| |
| <template data-name="@supports within @container"> |
| <style> |
| @function --f() { |
| --x: FAIL; |
| @container (width = 100px) { |
| @supports (color: green) { |
| --x: PASS; |
| } |
| @supports (not (color: green)) { |
| --x: FAIL; |
| } |
| } |
| result: var(--x); |
| } |
| #target { |
| --actual: --f(); |
| --expected: PASS; |
| } |
| </style> |
| </template> |
| |
| <template data-name="@container within @supports"> |
| <style> |
| @function --f() { |
| --x: FAIL; |
| @supports (color: green) { |
| @container (width = 100px) { |
| --x: PASS; |
| } |
| @container (width = 75px) { |
| --x: FAIL; |
| } |
| } |
| result: var(--x); |
| } |
| #target { |
| --actual: --f(); |
| --expected: PASS; |
| } |
| </style> |
| </template> |
| |
| <template data-name="@container, @media, @supports"> |
| <style> |
| @function --f() { |
| --x: FAIL; |
| @container (width = 100px) { |
| @media (width > 0px) { |
| @supports (color: red) { |
| --x: PASS; |
| } |
| } |
| } |
| result: var(--x); |
| } |
| #target { |
| --actual: --f(); |
| --expected: PASS; |
| } |
| </style> |
| </template> |
| |
| <template data-name="@supports, @media, @container"> |
| <style> |
| @function --f() { |
| --x: FAIL; |
| @supports (color: red) { |
| @media (width > 0px) { |
| @container (width = 100px) { |
| --x: PASS; |
| } |
| } |
| } |
| result: var(--x); |
| } |
| #target { |
| --actual: --f(); |
| --expected: PASS; |
| } |
| </style> |
| </template> |
| |
| <script> |
| test_all_templates(); |
| </script> |
