logical-shorthand-relative-prioritization-by-number-of-components.tentative.html (1207B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>Logical shorthands follow the usual prioritization based on number of component longhands</title> 4 <link rel="help" href="https://drafts.csswg.org/web-animations-1/#calculating-computed-keyframes"> 5 <meta name="assert" content="Shorthand properties with fewer longhand components override those with more longhand components (e.g. border-top overrides border-color)."> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="../../css-animations/support/testcommon.js"></script> 9 10 <div id="log"></div> 11 <script> 12 'use strict'; 13 14 test(t => { 15 const div = addDiv(t); 16 const anim = div.animate( 17 { 18 marginInlineStart: '100px', 19 marginInline: '200px', 20 margin: 'logical 300px', 21 }, 22 { duration: 1, easing: 'step-start' } 23 ); 24 assert_equals(getComputedStyle(div).marginLeft, '100px'); 25 assert_equals(getComputedStyle(div).marginRight, '200px'); 26 assert_equals(getComputedStyle(div).marginTop, '300px'); 27 assert_equals(getComputedStyle(div).marginBottom, '300px'); 28 }, 'Logical shorthands follow the usual prioritization based on number of' 29 + ' component longhands'); 30 31 </script>