resize-iframe-3d-transform.tentative.html (3368B)
1 <!DOCTYPE HTML> 2 <title>Test of resizing interaction</title> 3 <link rel="author" title="L. David Baron" href="https://dbaron.org/"> 4 <link rel="author" title="Google" href="http://www.google.com/"> 5 <link rel="help" href="https://www.w3.org/TR/css-ui-4/#resize"> 6 <link rel="help" href="https://issues.chromium.org/issues/40697767"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <script src="/resources/testdriver-vendor.js"></script> 12 13 <!-- 14 This test uses .tentative. because it depends on unspecified user 15 interface characteristics (the position of the resizer UI and how it 16 works), although those user interface characteristics are likely common 17 across implementations. 18 --> 19 20 <style> 21 22 html, body, iframe { margin: 0; padding: 0; } 23 24 /** 25 * The top left corner of the iframe is translated by 300px left and 26 * 300px towards the user. This is inside a 60deg rotation around the 27 * left edge of the page, which means that that rotation moves the left 28 * edge of the iframe back into the viewport. The iframe's width is 29 * squashed in half, so it's visually 150x150 content box with 2px 30 * top/bottom borders and 1px left/right borders. 31 * 32 * This test is using 3D transforms to test correct use of project 33 * versus map for the event handling. 34 */ 35 36 #outer { 37 transform: rotateY(60deg); 38 transform-origin: top left; 39 transform-style: preserve-3d; 40 } 41 42 #middle { 43 transform: translateZ(300px); 44 transform-style: preserve-3d; 45 } 46 47 #inner { 48 transform: translateX(-304px); 49 resize: both; 50 border: 2px solid; 51 } 52 53 </style> 54 55 <div id="outer"> 56 <div id="middle"> 57 <iframe id="inner" srcdoc="hello world"></iframe> 58 </div> 59 </div> 60 61 <script> 62 63 promise_test(async t => { 64 let e = document.getElementById("inner"); 65 66 let w = e.getBoundingClientRect().width; 67 let h = e.getBoundingClientRect().height; 68 69 assert_equals(w, 152, "iframe width"); 70 assert_equals(h, 154, "iframe height"); 71 72 let x = e.getBoundingClientRect().right - 2; /* everything squashed in half */ 73 let y = e.getBoundingClientRect().bottom - 4; 74 75 assert_approx_equals(x, Math.sin(Math.PI/3) * 300 - 2, 0.1, "iframe right"); 76 assert_equals(y, 150, "iframe bottom"); 77 78 x = Math.round(x); // Actions expects integers 79 80 let move1 = new test_driver.Actions() 81 .pointerMove(x, y) 82 .pointerDown() 83 .pointerMove(x-2, y-3); 84 await move1.send(); 85 86 assert_equals(e.getBoundingClientRect().width, w - 2, "width after move 1"); 87 assert_equals(e.getBoundingClientRect().height, h - 3, "height after move 1"); 88 assert_equals(e.style.width, "296px", "width style after move 1"); 89 assert_equals(e.style.height, "147px", "height style after move 1"); 90 91 // It's odd that we have to send pointerMove and pointerDown again here. 92 let move2 = new test_driver.Actions() 93 .pointerMove(x-2, y-3) 94 .pointerDown() 95 .pointerMove(x-9, y-1) 96 .pointerUp(); 97 await move2.send(); 98 99 assert_equals(e.getBoundingClientRect().width, w - 9, "width after move 2"); 100 assert_equals(e.getBoundingClientRect().height, h - 1, "height after move 2"); 101 assert_equals(e.style.width, "282px", "width style after move 2"); 102 assert_equals(e.style.height, "149px", "height style after move 2"); 103 }, "resizing of iframe in 3D transform"); 104 105 </script>