font-style-computed.html (1816B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Fonts Module Level 3: getComputedStyle().fontStyle</title> 6 <link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-style-prop"> 7 <meta name="assert" content="font-style computed value is as specified."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/computed-testcommon.js"></script> 11 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 12 <style> 13 #container { 14 container-type: inline-size; 15 width: 10px; 16 } 17 #target { 18 font-family: Ahem; 19 } 20 </style> 21 </head> 22 <body> 23 <div id="container"> 24 <div id="target"></div> 25 </div> 26 <script> 27 test_computed_value('font-style', 'normal'); 28 test_computed_value('font-style', 'italic'); 29 test_computed_value('font-style', 'oblique'); 30 31 test_computed_value('font-style', 'oblique 0deg', 'normal'); 32 test_computed_value('font-style', 'oblique calc(10deg - 10deg)', 'normal'); 33 34 test_computed_value('font-style', 'oblique 10deg'); 35 test_computed_value('font-style', 'oblique -10deg'); 36 test_computed_value('font-style', 'oblique 14deg', 'oblique'); 37 test_computed_value('font-style', 'oblique -14deg'); 38 test_computed_value('font-style', 'oblique -90deg'); 39 test_computed_value('font-style', 'oblique 90deg'); 40 test_computed_value('font-style', 'oblique 10grad', 'oblique 9deg'); 41 test_computed_value('font-style', 'oblique calc(90deg)', 'oblique 90deg'); 42 test_computed_value('font-style', 'oblique calc(100deg)', 'oblique 90deg'); 43 test_computed_value('font-style', 'oblique calc(-100deg)', 'oblique -90deg'); 44 test_computed_value('font-style', 'oblique calc(30deg * 2)', 'oblique 60deg'); 45 test_computed_value('font-style', 'oblique calc(30deg + (sign(20cqw - 10px) * 5deg))', 'oblique 25deg'); 46 </script> 47 </body> 48 </html>