minmax-angle-serialize.html (3055B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-values-4/#comp-func"> 3 <link rel="help" href="https://drafts.csswg.org/css-values-4/#angles"> 4 <link rel="help" href="https://drafts.csswg.org/css-values-4/#calc-serialize"> 5 <link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org"> 6 <link rel="author" title="Tab Atkins-Bittner" href="https://xanthir.com/contact"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="../support/serialize-testcommon.js"></script> 10 <div id=target></div> 11 <script> 12 function test_serialization(t,s,c,u, {prop="transform"}={}) { 13 t = `rotate(${t})`; 14 test_specified_serialization(prop, t, `rotate(${s})`); 15 test_computed_serialization(prop, t, c); 16 if(u) test_used_serialization(prop, t, u); 17 } 18 19 // Browsers aren't perfectly interoperable about how a 90deg rotation is serialized, 20 // but that's not the focus of this test, 21 // so just capture *whatever* the browser does and expect that. 22 const rotateMatrix = (()=>{ 23 const el = document.querySelector("#target"); 24 el.style.transform = "rotate(90deg)"; 25 const ret = getComputedStyle(el).transform; 26 el.removeAttribute('style'); 27 return ret; 28 })(); 29 30 test_serialization( 31 'min(90deg)', 32 'calc(90deg)', 33 rotateMatrix); 34 test_serialization( 35 'min(.25turn)', 36 'calc(90deg)', 37 rotateMatrix); 38 test_serialization( 39 'min(100grad)', 40 'calc(90deg)', 41 rotateMatrix); 42 test_serialization( 43 'max(90deg)', 44 'calc(90deg)', 45 rotateMatrix); 46 test_serialization( 47 'max(.25turn)', 48 'calc(90deg)', 49 rotateMatrix); 50 test_serialization( 51 'max(100grad)', 52 'calc(90deg)', 53 rotateMatrix); 54 // No way to test 'rad' serialization without depending heavily on numeric serialization 55 // and the precision used for radians... 56 57 test_serialization( 58 'min(90deg, 92deg, 93deg)', 59 'calc(90deg)', 60 rotateMatrix); 61 test_serialization( 62 'min(93deg, 92deg, 90deg)', 63 'calc(90deg)', 64 rotateMatrix); 65 test_serialization( 66 'min(90deg, 1.58rad, 0.25turn)', 67 'calc(90deg)', 68 rotateMatrix); 69 test_serialization( 70 'min(0.25turn, 1.58rad, 90deg)', 71 'calc(90deg)', 72 rotateMatrix); 73 test_serialization( 74 'max(81deg, 82deg, 90deg)', 75 'calc(90deg)', 76 rotateMatrix); 77 test_serialization( 78 'max(83deg, 82deg, 90deg)', 79 'calc(90deg)', 80 rotateMatrix); 81 test_serialization( 82 'max(90deg, 1.57rad, 0.25turn)', 83 'calc(90deg)', 84 rotateMatrix); 85 test_serialization( 86 'max(0.25turn, 1.57rad, 90deg)', 87 'calc(90deg)', 88 rotateMatrix); 89 90 test_serialization( 91 'calc(min(30deg) + max(60deg))', 92 'calc(90deg)', 93 rotateMatrix); 94 test_serialization( 95 'calc(50grad + min(45deg))', 96 'calc(90deg)', 97 rotateMatrix); 98 test_serialization( 99 'calc(min(45deg) + 50grad)', 100 'calc(90deg)', 101 rotateMatrix); 102 test_serialization( 103 'calc(50grad + max(45deg))', 104 'calc(90deg)', 105 rotateMatrix); 106 test_serialization( 107 'calc(max(45deg) + 50grad)', 108 'calc(90deg)', 109 rotateMatrix); 110 111 </script>