| <!DOCTYPE html> |
| <head> |
| <script src="../../../resources/js-test.js"></script> |
| <style id="s1">span { color: red}</style> |
| <style id="s2">span { color: red}</style> |
| |
| <style> |
| div { width: 100px } |
| .class { width: 200px } |
| </style> |
| </head> |
| <body> |
| <div id="target"> |
| <div id="other"> |
| </div> |
| |
| <script> |
| description("Test that adding a class then synchronously adding a style sheet produces correct styles. See also crbug.com/346873"); |
| |
| var target = document.getElementById("target"); |
| target.offsetHeight; |
| |
| // Set the class, which should schedule an async style recalc to change width to 200px. |
| target.className = 'class'; |
| |
| var styleElement = document.createElement("style"); |
| styleElement.textContent = '#useless {width: 300px}'; |
| // Insert before style sheet s2 in order to trigger style resolver reconstruction. |
| document.getElementById('s2').insertBefore(styleElement, null); |
| |
| shouldBe("getComputedStyle(target).width", '"200px"'); |
| |
| </script> |
