font-weight-computed.html (3520B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Fonts Module Level 3: getComputedStyle().fontWeight</title> 6 <link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-weight-prop"> 7 <meta name="assert" content="font-weight computed value is a number."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/computed-testcommon.js"></script> 11 <style> 12 #container { 13 container-type: inline-size; 14 width: 10px; 15 } 16 </style> 17 </head> 18 <body> 19 <div id="container"> 20 <div id="target"></div> 21 </div> 22 <script> 23 'use strict'; 24 test_computed_value('font-weight', 'normal', '400'); 25 test_computed_value('font-weight', 'bold', '700'); 26 test_computed_value('font-weight', '1'); 27 test_computed_value('font-weight', '100'); 28 test_computed_value('font-weight', '200'); 29 test_computed_value('font-weight', '300'); 30 test_computed_value('font-weight', '400'); 31 test_computed_value('font-weight', '500'); 32 test_computed_value('font-weight', '600'); 33 test_computed_value('font-weight', '700'); 34 test_computed_value('font-weight', '800'); 35 test_computed_value('font-weight', '900'); 36 test_computed_value('font-weight', '1000'); 37 test_computed_value('font-weight', '101'); 38 test_computed_value('font-weight', '150.25'); 39 test_computed_value('font-weight', 'calc(100)', '100'); 40 test_computed_value('font-weight', 'calc(0)', '1'); 41 test_computed_value('font-weight', 'calc(-100)', '1'); 42 test_computed_value('font-weight', 'calc(100 + 100)', '200'); 43 test_computed_value('font-weight', 'calc(100 + (sign(20cqw - 10px) * 5))', '95'); 44 45 function test_relative(specified, inherited, computed) { 46 test(() => { 47 const container = document.getElementById('container'); 48 const target = document.getElementById('target'); 49 container.style.fontWeight = inherited; 50 target.style.fontWeight = specified; 51 assert_equals(getComputedStyle(target).fontWeight, computed); 52 }, inherited + ' made ' + specified + ' computes to ' + computed); 53 } 54 55 test_relative('bolder', '1', '400'); 56 test_relative('bolder', '50', '400'); 57 test_relative('bolder', '100', '400'); 58 test_relative('bolder', '200', '400'); 59 test_relative('bolder', '300', '400'); 60 test_relative('bolder', '349', '400'); 61 test_relative('bolder', '350', '700'); 62 test_relative('bolder', '400', '700'); 63 test_relative('bolder', '500', '700'); 64 test_relative('bolder', '549', '700'); 65 test_relative('bolder', '550', '900'); 66 test_relative('bolder', '600', '900'); 67 test_relative('bolder', '700', '900'); 68 test_relative('bolder', '749', '900'); 69 test_relative('bolder', '750', '900'); 70 test_relative('bolder', '800', '900'); 71 test_relative('bolder', '900', '900'); 72 test_relative('bolder', '950', '950'); 73 test_relative('bolder', '1000', '1000'); 74 75 test_relative('lighter', '1', '1'); 76 test_relative('lighter', '50', '50'); 77 test_relative('lighter', '100', '100'); 78 test_relative('lighter', '200', '100'); 79 test_relative('lighter', '300', '100'); 80 test_relative('lighter', '349', '100'); 81 test_relative('lighter', '350', '100'); 82 test_relative('lighter', '400', '100'); 83 test_relative('lighter', '500', '100'); 84 test_relative('lighter', '549', '100'); 85 test_relative('lighter', '550', '400'); 86 test_relative('lighter', '600', '400'); 87 test_relative('lighter', '700', '400'); 88 test_relative('lighter', '749', '400'); 89 test_relative('lighter', '750', '700'); 90 test_relative('lighter', '800', '700'); 91 test_relative('lighter', '900', '700'); 92 test_relative('lighter', '950', '700'); 93 test_relative('lighter', '1000', '700'); 94 </script> 95 </body> 96 </html>