1<html> 2 <head><title>OSR Test</title></head> 3 <style> 4 .red_hover:hover {color:red;} 5 #li { width: 530px; } 6 body {background:rgba(255, 0, 0, 0.5); } 7 input {-webkit-appearance: none; } 8 #LI11select {width: 75px;} 9 #LI11select option { background-color: cyan; } 10 .dropdiv { 11 width:50px; 12 height:50px; 13 border:1px solid #aaaaaa; 14 float: left; 15 } 16 #dragdiv { 17 width: 30px; 18 height: 30px; 19 background-color: green; 20 margin: 10px; 21 } 22 #draghere { 23 position: relative; 24 z-index: -1; 25 top: 7px; 26 left: 7px; 27 opacity: 0.4; 28 } 29 #touchdiv, #pointerdiv { 30 width: 100px; 31 height: 50px; 32 background-color: red; 33 float: left; 34 margin-left: 10px; 35 } 36 </style> 37 <script> 38 function getElement(id) { return document.getElementById(id); } 39 function makeH1Red() { getElement('LI00').style.color='red'; } 40 function makeH1Black() { getElement('LI00').style.color='black'; } 41 function navigate() { location.href='?k='+getElement('editbox').value; } 42 function load() { 43 var elems = []; 44 var param = { type: 'ElementBounds', elems: elems }; 45 46 elems.push(getElementBounds('LI00')); 47 elems.push(getElementBounds('LI01')); 48 elems.push(getElementBounds('LI02')); 49 elems.push(getElementBounds('LI03')); 50 elems.push(getElementBounds('LI04')); 51 elems.push(getElementBounds('LI05')); 52 elems.push(getElementBounds('LI06')); 53 elems.push(getElementBounds('LI07')); 54 elems.push(getElementBounds('LI08')); 55 elems.push(getElementBounds('LI09')); 56 elems.push(getElementBounds('LI10')); 57 elems.push(getElementBounds('LI11')); 58 elems.push(getElementBounds('LI11select')); 59 elems.push(getElementBounds('email')); 60 elems.push(getElementBounds('editbox')); 61 elems.push(getElementBounds('btnnavigate')); 62 elems.push(getElementBounds('dropdiv')); 63 elems.push(getElementBounds('dragdiv')); 64 elems.push(getElementBounds('touchdiv')); 65 elems.push(getElementBounds('pointerdiv')); 66 67 if (window.testQuery) 68 window.testQuery({request: JSON.stringify(param)}); 69 70 fillDropDown(); 71 } 72 73 function fillDropDown() { 74 var select = document.getElementById('LI11select'); 75 for (var i = 1; i < 21; i++) 76 select.options.add(new Option('Option ' + i, i)); 77 } 78 79 function getElementBounds(id) { 80 var element = document.getElementById(id); 81 var bounds = element.getBoundingClientRect(); 82 return { 83 id: id, 84 x: Math.floor(bounds.x), 85 y: Math.floor(bounds.y), 86 width: Math.floor(bounds.width), 87 height: Math.floor(bounds.height) 88 }; 89 } 90 91 function onEventTest(event) { 92 var param = 'osr' + event.type; 93 94 if (event.type == "click") 95 param += event.button; 96 97 // Results in a call to the OnQuery method in os_rendering_unittest.cc. 98 if (window.testQuery) 99 window.testQuery({request: param}); 100 } 101 102 function allowDrop(ev) { 103 ev.preventDefault(); 104 } 105 106 function drag(ev) { 107 ev.dataTransfer.setData("Text",ev.target.id); 108 } 109 110 function drop(ev) { 111 var data=ev.dataTransfer.getData("Text"); 112 ev.target.innerHTML = ''; 113 var dragged = document.getElementById(data); 114 dragged.setAttribute('draggable', 'false'); 115 ev.target.appendChild(dragged); 116 if (window.testQuery) 117 window.testQuery({request: "osrdrop"}); 118 } 119 120 function selectText(ev) { 121 var element = ev.target; 122 var selection = window.getSelection(); 123 var range = document.createRange(); 124 range.selectNodeContents(element); 125 selection.removeAllRanges(); 126 selection.addRange(range); 127 } 128 129 function onTouchEvent(ev) { 130 var param = 'osr' + ev.type; 131 // For Touch start also include touch points. 132 if (event.type == "touchstart") 133 param += ev.touches.length; 134 // For Touch Move include the touches that changed. 135 if (event.type == "touchmove") 136 param += ev.changedTouches.length; 137 138 // Results in a call to the OnQuery method in os_rendering_unittest.cc. 139 if (window.testQuery) 140 window.testQuery({request: param}); 141 } 142 143 function onPointerEvent(ev) { 144 var param = 'osr' + ev.type + ' ' + ev.pointerType; 145 if (window.testQuery) 146 window.testQuery({request: param}); 147 } 148 149 </script> 150 <body onfocus='onEventTest(event)' onblur='onEventTest(event)' onload='load();'> 151 <h1 id='LI00' onclick="onEventTest(event)"> 152 OSR Testing h1 - Focus and blur 153 <select id='LI11select'> 154 <option value='0'>Default</option> 155 </select> 156 this page and will get this red black 157 </h1> 158 <ol> 159 <li id='LI01'>OnPaint should be called each time a page loads</li> 160 <li id='LI02' style='cursor:pointer;'><span>Move mouse 161 to require an OnCursorChange call</span></li> 162 <li id='LI03' onmousemove="onEventTest(event)"><span>Hover will color this with 163 red. Will trigger OnPaint once on enter and once on leave</span></li> 164 <li id='LI04'>Right clicking will show contextual menu and will request 165 GetScreenPoint</li> 166 <li id='LI05'>IsWindowRenderingDisabled should be true</li> 167 <li id='LI06'>WasResized should trigger full repaint if size changes. 168 </li> 169 <li id='LI07'>Invalidate should trigger OnPaint once</li> 170 <li id='LI08'>Click and write here with SendKeyEvent to trigger repaints: 171 <input id='editbox' type='text' value='' size="5"></li> 172 <li id='LI09'>Click here with SendMouseClickEvent to navigate: 173 <input id='btnnavigate' type='button' onclick='navigate()' 174 value='Click here to navigate' /></li> 175 <li id='LI10' title='EXPECTED_TOOLTIP'>Mouse over this element will 176 trigger show a tooltip</li> 177 <li id='LI11' onclick='selectText(event)'>SELECTED_TEXT_RANGE</li> 178 <li><input id='email' type='text' size=10 inputmode='email'></li> 179 </ol> 180 181 <div class="dropdiv" id="dropdiv" ondrop="drop(event)" ondragover="allowDrop(event)"> 182 <span id="draghere">Drag here</span> 183 </div> 184 <div class="dropdiv"> 185 <div id="dragdiv" draggable="true" ondragstart="drag(event)"></div> 186 </div> 187 <div id="touchdiv" ontouchstart="onTouchEvent(event)" ontouchend="onTouchEvent(event)" ontouchmove="onTouchEvent(event)" ontouchcancel="onTouchEvent(event)"> 188 </div> 189 <div id="pointerdiv" onpointerdown="onPointerEvent(event)" onpointerup="onPointerEvent(event)" onpointermove="onPointerEvent(event)" onpointercancel="onPointerEvent(event)"> 190 </div> 191 <br /> 192 <br /> 193 <br /> 194 <br /> 195 <br /> 196 <br /> 197 </body> 198</html> 199