| Nicolás Peña Moreno | cf8e881 | 2019-04-01 17:12:02 | [diff] [blame] | 1 | <!DOCTYPE HTML> |
| 2 | <meta charset=utf-8> |
| 3 | <title>Element Timing: image with rotation.</title> |
| 4 | <head> |
| 5 | <style> |
| 6 | body { |
| 7 | margin: 0px; |
| 8 | } |
| 9 | .my_div { |
| 10 | width: 100px; |
| 11 | height: 50px; |
| 12 | transform: rotate(45deg); |
| 13 | transform-origin: top left; |
| 14 | } |
| 15 | </style> |
| 16 | </head> |
| 17 | <body> |
| 18 | <script src="/resources/testharness.js"></script> |
| 19 | <script src="/resources/testharnessreport.js"></script> |
| 20 | <script src="resources/element-timing-helpers.js"></script> |
| 21 | <script> |
| 22 | const beforeRender = performance.now(); |
| 23 | async_test(function (t) { |
| 24 | const observer = new PerformanceObserver( |
| 25 | t.step_func_done(function(entryList) { |
| 26 | assert_equals(entryList.getEntries().length, 1); |
| 27 | const entry = entryList.getEntries()[0]; |
| 28 | const index = window.location.href.lastIndexOf('/'); |
| 29 | const pathname = window.location.href.substring(0, index - 14) + |
| 30 | 'images/black-rectangle.png'; |
| Nicolás Peña Moreno | 66bb6b4 | 2019-05-01 17:40:58 | [diff] [blame^] | 31 | checkElement(entry, pathname, 'rectangle', 'rect_id', beforeRender, |
| 32 | document.getElementById('rect_id')); |
| Nicolás Peña Moreno | cf8e881 | 2019-04-01 17:12:02 | [diff] [blame] | 33 | checkNaturalSize(entry, 100, 50); |
| 34 | const rect = entry.intersectionRect; |
| 35 | // The div rotates with respect to the origin, so part of it will be invisible. |
| 36 | // The width of the visible part will be 100 / sqrt(2) and the height will be |
| 37 | // 100 / sqrt(2) + 50 / sqrt(2). |
| 38 | assert_equals(rect.left, 0); |
| 39 | // Checking precision only to the nearest integer. |
| 40 | assert_equals(Math.round(rect.right), 71); |
| 41 | assert_equals(rect.top, 0); |
| 42 | assert_equals(Math.round(rect.bottom), 106); |
| 43 | }) |
| 44 | ); |
| 45 | observer.observe({entryTypes: ['element']}); |
| 46 | }, 'Image intersectionRect is affected by rotation, but not its intrinsic size.'); |
| 47 | </script> |
| Nicolás Peña Moreno | 15d2855 | 2019-04-01 19:03:08 | [diff] [blame] | 48 | <div class="my_div" id="div_id"> |
| 49 | <img src="/images/black-rectangle.png" elementtiming="rectangle" id="rect_id"/> |
| Nicolás Peña Moreno | cf8e881 | 2019-04-01 17:12:02 | [diff] [blame] | 50 | </div> |
| 51 | </body> |
