| <html> |
| <head> |
| <style> |
| #outer > div { font-weight: bolder; } |
| #outer > div#bolder { font-weight: bolder; } |
| #outer > div#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 are not cumulative when multiple selectors apply.'); |
| |
| table = [ |
| ["100" , "100" , "normal", "100"], |
| ["200" , "200" , "normal", "100"], |
| ["300" , "300" , "normal", "100"], |
| ["400" , "normal", "bold" , "100"], |
| ["normal", "normal", "bold" , "100"], |
| ["500" , "500" , "bold" , "100"], |
| ["600" , "600" , "900" , "normal"], |
| ["700" , "bold" , "900" , "normal"], |
| ["bold" , "bold" , "900" , "normal"], |
| ["800" , "800" , "900" , "bold"], |
| ["900" , "900" , "900" , "bold"], |
| ]; |
| |
| 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> |
