| <html> | 
 | <head> | 
 | <style> | 
 | #bolder { font-weight: bolder; } | 
 | #lighter { font-weight: lighter; } | 
 | </style> | 
 | <script src="../resources/js-test.js"></script> | 
 | </head> | 
 | <body> | 
 | <div id="outer"> | 
 |     <div id="bolder"></div> | 
 |     <div id="lighter"></div> | 
 | </div> | 
 | <div id="console"></div> | 
 | <script> | 
 | description('Test that font-weight: bolder and font-weight: lighter behave according to spec.'); | 
 |  | 
 | table = [ | 
 | ["100"   , "100"   , "400", "100"], | 
 | ["200"   , "200"   , "400", "100"], | 
 | ["300"   , "300"   , "400", "100"], | 
 | ["400"   , "400", "700"  , "100"], | 
 | ["normal", "400", "700"  , "100"], | 
 | ["500"   , "500"   , "700"  , "100"], | 
 | ["600"   , "600"   , "900"   , "400"], | 
 | ["700"   , "700"  , "900"   , "400"], | 
 | ["bold"  , "700"  , "900"   , "400"], | 
 | ["800"   , "800"   , "900"   , "700"], | 
 | ["900"   , "900"   , "900"   , "700"], | 
 | ]; | 
 |  | 
 | var outer = document.getElementById("outer"); | 
 | var bolder = document.getElementById("bolder"); | 
 | var lighter = document.getElementById("lighter"); | 
 | for(var i=0; i<table.length; i++) { | 
 |     outer.style.fontWeight = table[i][0]; | 
 |     shouldBeEqualToString('getComputedStyle(outer).fontWeight', table[i][1]); | 
 |     shouldBeEqualToString('getComputedStyle(bolder).fontWeight', table[i][2]); | 
 |     shouldBeEqualToString('getComputedStyle(lighter).fontWeight', table[i][3]); | 
 | } | 
 | </script> | 
 | </body> | 
 | </html> |