| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Descendant selectors</title> |
| <style> |
| div { padding: 1px; } |
| .test div { padding: 2px; } |
| .test2 div { padding: 3px; } |
| .test div div div { background: orange; } |
| .test div div div div { background: white; } |
| </style> |
| </head> |
| <body> |
| <script> |
| |
| var rootElement; |
| var totalHeight; |
| var DEFAULT_DEPTH = 1000; |
| |
| function setUp(opt_depth) { |
| var depth = opt_depth || DEFAULT_DEPTH; |
| rootElement = document.createElement('div'); |
| var parentElement = rootElement; |
| for (var i = 0; i < depth; i++) { |
| var element = document.createElement('div'); |
| element.appendChild(document.createTextNode(i)); |
| parentElement.appendChild(element); |
| parentElement = element; |
| } |
| document.body.appendChild(rootElement); |
| totalHeight = 0 |
| } |
| |
| function tearDown() { |
| rootElement.parentNode.removeChild(rootElement); |
| rootElement = null; |
| } |
| |
| function test(opt_depth) { |
| var depth = opt_depth || DEFAULT_DEPTH; |
| rootElement.className = rootElement.className == 'test' ? 'test2' : 'test'; |
| totalHeight += rootElement.offsetHeight; |
| } |
| </script> |
| <script src="../test.js"></script> |
| </body> |
| </html> |