font-weight-lighter-bolder.html (2693B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Testing new font-weight lighter/bolder table introduced in CSS Fonts level 4</title> 5 <link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-weight-prop" /> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 </head> 9 <body> 10 11 <div id="testcases"> 12 <div class="testcase" style="font-family: 'CSSTest Weights Full';"> 13 <span style="font-weight:lighter;color:red;">A</span>A<span style="font-weight:bolder;color:red;">A</span> 14 <span style="font: menu; font-size: 10px;">(default)</span> 15 </div> 16 </div> 17 18 <script> 19 20 testRelativeWeights = [ 21 { baseWeight: 99, lighter: "99", bolder: "400" }, 22 { baseWeight: 100, lighter: "100", bolder: "400" }, 23 { baseWeight: 349, lighter: "100", bolder: "400" }, 24 { baseWeight: 350, lighter: "100", bolder: "700" }, 25 { baseWeight: 549, lighter: "100", bolder: "700" }, 26 { baseWeight: 550, lighter: "400", bolder: "900" }, 27 { baseWeight: 749, lighter: "400", bolder: "900" }, 28 { baseWeight: 750, lighter: "700", bolder: "900" }, 29 { baseWeight: 899, lighter: "700", bolder: "900" }, 30 { baseWeight: 900, lighter: "700", bolder: "900" }, 31 { baseWeight: 901, lighter: "700", bolder: "901" }, 32 ]; 33 34 var testcases = document.getElementById("testcases"); 35 var testcase_template = testcases.firstElementChild; testcases.removeChild(testcase_template); 36 testRelativeWeights.forEach(function(element) { 37 38 var base = testcase_template.cloneNode(true); 39 base.children[2].textContent = element.baseWeight; 40 base.style.fontWeight = element.baseWeight; 41 testcases.appendChild(base); 42 43 test(() => { 44 var actualLighter = window.getComputedStyle(base.children[0]).fontWeight; 45 assert_equals(actualLighter, element.lighter, "Lighter value for " + element.baseWeight + " should match expected value."); 46 base.children[0].style.color = 'green'; 47 }, "Test lighter font-weight for base weight " + element.baseWeight); 48 49 test(() => { 50 var actualBolder = window.getComputedStyle(base.children[1]).fontWeight; 51 assert_equals(actualBolder, element.bolder, "Bolder value " + element.baseWeight + " should match expected value."); 52 base.children[1].style.color = 'green'; 53 }, "Test bolder font-weight for base weight " + element.baseWeight); 54 }); 55 56 </script> 57 </body> 58 </html>