| <!doctype html> |
| <html> |
| <head> |
| |
| <style> |
| |
| body { |
| margin: 0; |
| } |
| #flow { |
| -webkit-flow-into: flow; |
| } |
| #container { |
| width: 400px; |
| height: 400px; |
| background-color: grey; |
| } |
| #inspectedElement { |
| width: 100%; |
| height: 1000px; |
| background-color: green; |
| } |
| .region { |
| margin: 5px; |
| border: solid 10px aqua; |
| padding: 15px; |
| width: 200px; |
| height: 200px; |
| background-color: blue; |
| float: left; |
| -webkit-flow-from: flow; |
| } |
| .small { |
| width: 100px; |
| } |
| .zero-height { |
| border: none; |
| height: 0px; |
| padding: 0; |
| } |
| .zero-size { |
| border: none; |
| width: 0px; |
| height: 0px; |
| padding: 0; |
| } |
| .hidden { |
| display: none; |
| } |
| #description { |
| clear: both; |
| } |
| |
| </style> |
| |
| <script src="../../http/tests/inspector/inspector-test.js"></script> |
| <script src="../../http/tests/inspector/elements-test.js"></script> |
| <script> |
| |
| function test() |
| { |
| function nodeSelected(node) |
| { |
| RuntimeAgent.evaluate("dumpInspectorHighlightedNode()", InspectorTest.completeTest); |
| } |
| |
| InspectorTest.selectNodeWithId("inspectedElement", nodeSelected); |
| } |
| |
| </script> |
| </head> |
| |
| <body onload="runTest()"> |
| |
| <div id="flow"> |
| <div id="inspectedElement"></div> |
| </div> |
| |
| <div class="region"></div> |
| <div class="region small"></div> |
| <div class="region zero-height"></div> |
| <div class="region zero-size"></div> |
| <div class="region hidden"></div> |
| <p id="description">This test verifies the position and size of the highlighted node inside CSS Regions.</p> |
| |
| </body> |
| </html> |
