gecko-dev/testing/web-platform/tests/css/css-backgrounds/parsing/background-position-y-valid.html
Emilio Cobos Álvarez 200431f455 Bug 1567349 - Fix various bogus WPTs that test wrong calc serialization. r=heycam
https://drafts.csswg.org/css-values-4/#calc-serialize:

> Sort the terms in the following order:
>  The number, if present
>  The percentage, if present
>  The dimensions, ordered by their units ASCII case-insensitive alphabetically
>  Comparison, trigonometric and exponential functions, in the order they appeared in the original expression.

So em goes before px. I filed https://github.com/w3c/csswg-drafts/issues/4129 on
the second part of that algorithm not matching any browser.

These are tests that are marked as only failing in Firefox because we're the
only following the spec. #funtimes

Differential Revision: https://phabricator.services.mozilla.com/D38593

--HG--
extra : moz-landing-system : lando
2019-07-19 01:31:54 +00:00

31 lines
1.5 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Backgrounds and Borders Module Level 4: parsing background-position-y with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-y">
<meta name="assert" content="background-position-y supports the full grammar '[ center | [ top | bottom | y-start | y-end ]? <length-percentage>? ]#'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("background-position-y", "center");
test_valid_value("background-position-y", "top");
test_valid_value("background-position-y", "bottom");
test_valid_value("background-position-y", "y-start");
test_valid_value("background-position-y", "y-end");
test_valid_value("background-position-y", "-20%");
test_valid_value("background-position-y", "10px");
test_valid_value("background-position-y", "0.5em");
test_valid_value("background-position-y", "calc(10px - 0.5em)", "calc(-0.5em + 10px)");
test_valid_value("background-position-y", "top -20%");
test_valid_value("background-position-y", "bottom 10px");
test_valid_value("background-position-y", "-20%, 10px");
test_valid_value("background-position-y", "center, top, bottom");
test_valid_value("background-position-y", "0.5em, y-start, y-end");
test_valid_value("background-position-y", "calc(10px - 0.5em), top -20%, bottom 10px", "calc(-0.5em + 10px), top -20%, top 10px");
</script>
</body>
</html>