mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-11 21:58:41 +02:00
e39bf77494
Summary: The behavior the WG proposed is way more subtle than what that bug implements, including: * Implementing two logical overflow longhands. * Expanding the overflow shorthand to different longhands depending on the syntax of that. Meanwhile, Blink hasn't done the swap and will ship the same behavior that we shipped in Firefox 61 (bug 1453148), that is, overflow-x, then overflow-y. So I think lacking a clear way forward we should revert this change and preserve our shipped behavior. Reviewers: dbaron! Tags: #secure-revision Bug #: 1492567 Differential Revision: https://phabricator.services.mozilla.com/D6317
50 lines
2.7 KiB
HTML
50 lines
2.7 KiB
HTML
<!doctype html>
|
|
<head>
|
|
<title>CSS OM: CSS Values</title>
|
|
<link rel="author" title="Divya Manian" href="mailto:manian@adobe.com">
|
|
<link rel="help" href="https://drafts.csswg.org/cssom/#serialize-a-css-declaration-block">
|
|
<meta name="flags" content="dom">
|
|
<meta name="assert" content="Testing Serialization of Shorthand Values">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="test"></div>
|
|
<script>
|
|
function test_shorthand_serialization(value, expected) {
|
|
test(function() {
|
|
const div = document.getElementById("test");
|
|
div.style.cssText = value;
|
|
assert_equals(div.style.cssText, expected);
|
|
}, "The serialization of " + value + " should be canonical.");
|
|
}
|
|
|
|
var tests = {
|
|
// specified -> expected
|
|
'border: 1px; border-top: 1px;': 'border: 1px;',
|
|
'border: 1px solid red;': 'border: 1px solid red;',
|
|
'border: 1px red;': 'border: 1px red;',
|
|
'border: red;': 'border: red;',
|
|
'border-top: 1px; border-right: 1px; border-bottom: 1px; border-left: 1px;': 'border: 1px;',
|
|
'border-top: 1px; border-right: 2px; border-bottom: 3px; border-left: 4px;': 'border-width: 1px 2px 3px 4px;',
|
|
'border: 1px; border-top: 2px;': 'border-width: 2px 1px 1px;',
|
|
'border: 1px; border-top: 1px !important;': 'border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-width: 1px !important;',
|
|
'border: 1px; border-top-color: red;': 'border-width: 1px; border-top-color: red;',
|
|
'border: solid; border-style: dotted': 'border: dotted;',
|
|
'border-width: 1px;': 'border-width: 1px;',
|
|
'overflow-x: scroll; overflow-y: hidden;': 'overflow: scroll hidden;',
|
|
'overflow-x: scroll; overflow-y: scroll;': 'overflow: scroll;',
|
|
'outline-width: 2px; outline-style: dotted; outline-color: blue;': 'outline: blue dotted 2px;',
|
|
'margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;': 'margin: 1px 2px 3px 4px;',
|
|
'list-style-type: circle; list-style-position: inside; list-style-image: initial;': 'list-style: circle inside;',
|
|
'list-style-type: lower-alpha;': 'list-style-type: lower-alpha;',
|
|
'font-family: sans-serif; line-height: 2em; font-size: 3em; font-style: italic; font-weight: bold;': 'font-family: sans-serif; line-height: 2em; font-size: 3em; font-style: italic; font-weight: bold;',
|
|
'padding-top: 1px; padding-right: 2px; padding-bottom: 3px; padding-left: 4px;': 'padding: 1px 2px 3px 4px;'
|
|
}
|
|
|
|
for (let test in tests) {
|
|
test_shorthand_serialization(test, tests[test]);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|