| <!DOCTYPE html> |
| <html> |
| <head> |
| <script type="text/javascript" charset="utf-8" src="resources/helper.js"></script> |
| <style> |
| body { margin: 10px; } |
| |
| #flow1 { |
| -webkit-flow-into: flow; |
| font: 20px/1 Ahem; |
| } |
| |
| #region1 { |
| -webkit-flow-from: flow; |
| border: 10px solid black; |
| width: 100px; |
| height: 50px; |
| position: absolute; |
| top: 150px; |
| left: 100px; |
| } |
| |
| #flow2 { |
| -webkit-flow-into: flow2; |
| font: 20px/1 Ahem; |
| } |
| |
| #region2 { |
| -webkit-flow-from: flow2; |
| border: 10px solid black; |
| width: 100px; |
| height: 50px; |
| position: absolute; |
| top: 250px; |
| left: 100px; |
| -webkit-transform: translate(10px, 10px); |
| } |
| |
| .finished #region1, .finished #region2, .finished #flow1, .finished #flow2 { |
| display: none; |
| } |
| </style> |
| </head> |
| <body> |
| <p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=117290">WebKit Bug 117290</a> [CSSRegions] getBoundingClientRect wrong for inline content nodes</p> |
| <p>On success you should see PASS below.</p> |
| |
| <span id="flow1">aaaaa</span> |
| <div id="region1"></div> |
| |
| <span id="flow2">aaaaa</span> |
| <div id="region2"></div> |
| |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| // [top, left, bottom, right, width, height] |
| var expectedBoundingRects = { |
| flow1: [160, 110, 180, 210, 100, 20], |
| flow2: [270, 120, 290, 220, 100, 20] |
| }; |
| |
| if (testBoundingRects(expectedBoundingRects)) |
| document.body.className = "finished"; |
| </script> |
| </body> |
| </html> |
| |
