mirror of
				https://bitbucket.org/chromiumembedded/cef
				synced 2025-06-05 21:39:12 +02:00 
			
		
		
		
	The client is responsible for rendering both as no default implementation is currently available for OSR.
		
			
				
	
	
		
			201 lines
		
	
	
		
			6.3 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			201 lines
		
	
	
		
			6.3 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <html>
 | |
|   <head><title>OSR Test</title></head>
 | |
|   <style>
 | |
|   .red_hover:hover {color:red;}
 | |
|   #li { width: 530px; }
 | |
|   body {background:rgba(255, 0, 0, 0.5); }
 | |
|   input {-webkit-appearance: none; }
 | |
|   #LI11select {width: 75px;}
 | |
|   #LI11select option { background-color: cyan; }
 | |
|   .dropdiv {
 | |
|     width:50px;
 | |
|     height:50px;
 | |
|     border:1px solid #aaaaaa;
 | |
|     float: left;
 | |
|   }
 | |
|   #dragdiv {
 | |
|     width: 30px;
 | |
|     height: 30px;
 | |
|     background-color: green;
 | |
|     margin: 10px;
 | |
|   }
 | |
|   #draghere {
 | |
|     position: relative;
 | |
|     z-index: -1;
 | |
|     top: 7px;
 | |
|     left: 7px;
 | |
|     opacity: 0.4;
 | |
|   }
 | |
|   #touchdiv, #pointerdiv {
 | |
|     width: 100px;
 | |
|     height: 50px;
 | |
|     background-color: red;
 | |
|     float: left;
 | |
|     margin-left: 10px;
 | |
|   }
 | |
|   </style>
 | |
|   <script>
 | |
|   function getElement(id) { return document.getElementById(id); }
 | |
|   function makeH1Red() { getElement('LI00').style.color='red'; }
 | |
|   function makeH1Black() { getElement('LI00').style.color='black'; }
 | |
|   function navigate() { location.href='?k='+getElement('editbox').value; }
 | |
|   function load() {
 | |
|     var elems = [];
 | |
|     var param = { type: 'ElementBounds', elems: elems };
 | |
| 
 | |
|     elems.push(getElementBounds('LI00'));
 | |
|     elems.push(getElementBounds('LI01'));
 | |
|     elems.push(getElementBounds('LI02'));
 | |
|     elems.push(getElementBounds('LI03'));
 | |
|     elems.push(getElementBounds('LI04'));
 | |
|     elems.push(getElementBounds('LI05'));
 | |
|     elems.push(getElementBounds('LI06'));
 | |
|     elems.push(getElementBounds('LI07'));
 | |
|     elems.push(getElementBounds('LI08'));
 | |
|     elems.push(getElementBounds('LI09'));
 | |
|     elems.push(getElementBounds('LI10'));
 | |
|     elems.push(getElementBounds('LI11'));
 | |
|     elems.push(getElementBounds('LI11select'));
 | |
|     elems.push(getElementBounds('email'));
 | |
|     elems.push(getElementBounds('quickmenu'));
 | |
|     elems.push(getElementBounds('editbox'));
 | |
|     elems.push(getElementBounds('btnnavigate'));
 | |
|     elems.push(getElementBounds('dropdiv'));
 | |
|     elems.push(getElementBounds('dragdiv'));
 | |
|     elems.push(getElementBounds('touchdiv'));
 | |
|     elems.push(getElementBounds('pointerdiv'));
 | |
| 
 | |
|     if (window.testQuery)
 | |
|       window.testQuery({request: JSON.stringify(param)});
 | |
| 
 | |
|     fillDropDown();
 | |
|   }
 | |
| 
 | |
|   function fillDropDown() {
 | |
|     var select = document.getElementById('LI11select');
 | |
|     for (var i = 1; i < 21; i++)
 | |
|       select.options.add(new Option('Option ' + i, i));
 | |
|   }
 | |
| 
 | |
|   function getElementBounds(id) {
 | |
|     var element = document.getElementById(id);
 | |
|     var bounds = element.getBoundingClientRect();
 | |
|     return {
 | |
|       id: id,
 | |
|       x: Math.floor(bounds.x),
 | |
|       y: Math.floor(bounds.y),
 | |
|       width: Math.floor(bounds.width),
 | |
|       height: Math.floor(bounds.height)
 | |
|     };
 | |
|   }
 | |
| 
 | |
|   function onEventTest(event) {
 | |
|     var param = 'osr' + event.type;
 | |
| 
 | |
|     if (event.type == "click")
 | |
|       param += event.button;
 | |
| 
 | |
|     // Results in a call to the OnQuery method in os_rendering_unittest.cc.
 | |
|     if (window.testQuery)
 | |
|       window.testQuery({request: param});
 | |
|   }
 | |
| 
 | |
|   function allowDrop(ev) {
 | |
|     ev.preventDefault();
 | |
|   }
 | |
| 
 | |
|   function drag(ev) {
 | |
|     ev.dataTransfer.setData("Text",ev.target.id);
 | |
|   }
 | |
| 
 | |
|   function drop(ev) {
 | |
|     var data=ev.dataTransfer.getData("Text");
 | |
|     ev.target.innerHTML = '';
 | |
|     var dragged = document.getElementById(data);
 | |
|     dragged.setAttribute('draggable', 'false');
 | |
|     ev.target.appendChild(dragged);
 | |
|     if (window.testQuery)
 | |
|       window.testQuery({request: "osrdrop"});
 | |
|   }
 | |
| 
 | |
|   function selectText(ev) {
 | |
|     var element = ev.target;
 | |
|     var selection = window.getSelection();
 | |
|     var range = document.createRange();
 | |
|     range.selectNodeContents(element);
 | |
|     selection.removeAllRanges();
 | |
|     selection.addRange(range);
 | |
|   }
 | |
| 
 | |
|   function onTouchEvent(ev) {
 | |
|     var param = 'osr' + ev.type;
 | |
|     // For Touch start also include touch points.
 | |
|     if (event.type == "touchstart")
 | |
|       param += ev.touches.length;
 | |
|     // For Touch Move include the touches that changed.
 | |
|     if (event.type == "touchmove")
 | |
|       param += ev.changedTouches.length;
 | |
| 
 | |
|     // Results in a call to the OnQuery method in os_rendering_unittest.cc.
 | |
|     if (window.testQuery)
 | |
|       window.testQuery({request: param});
 | |
|   }
 | |
| 
 | |
|   function onPointerEvent(ev) {
 | |
|     var param = 'osr' +  ev.type + ' ' + ev.pointerType;
 | |
|     if (window.testQuery)
 | |
|       window.testQuery({request: param});
 | |
|   }
 | |
| 
 | |
|   </script>
 | |
|   <body onfocus='onEventTest(event)' onblur='onEventTest(event)' onload='load();'>
 | |
|   <h1 id='LI00' onclick="onEventTest(event)">
 | |
|     OSR Testing h1 - Focus and blur
 | |
|     <select id='LI11select'>
 | |
|       <option value='0'>Default</option>
 | |
|     </select>
 | |
|     this page and will get this red black
 | |
|   </h1>
 | |
|   <ol>
 | |
|   <li id='LI01'>OnPaint should be called each time a page loads</li>
 | |
|   <li id='LI02' style='cursor:pointer;'><span>Move mouse
 | |
|       to require an OnCursorChange call</span></li>
 | |
|   <li id='LI03' onmousemove="onEventTest(event)"><span>Hover will color this with
 | |
|       red. Will trigger OnPaint once on enter and once on leave</span></li>
 | |
|   <li id='LI04'>Right clicking will show contextual menu and will request
 | |
|       GetScreenPoint</li>
 | |
|   <li id='LI05'>IsWindowRenderingDisabled should be true</li>
 | |
|   <li id='LI06'>WasResized should trigger full repaint if size changes.
 | |
|       </li>
 | |
|   <li id='LI07'>Invalidate should trigger OnPaint once</li>
 | |
|   <li id='LI08'>Click and write here with SendKeyEvent to trigger repaints:
 | |
|       <input id='editbox' type='text' value='' size="5"></li>
 | |
|   <li id='LI09'>Click here with SendMouseClickEvent to navigate:
 | |
|       <input id='btnnavigate' type='button' onclick='navigate()'
 | |
|       value='Click here to navigate' /></li>
 | |
|   <li id='LI10' title='EXPECTED_TOOLTIP'>Mouse over this element will
 | |
|       trigger show a tooltip</li>
 | |
|   <li id='LI11' onclick='selectText(event)'>SELECTED_TEXT_RANGE</li>
 | |
|   <li><input id='email' type='text' size=10 inputmode='email'></li>
 | |
|   <li id="quickmenu">Long touch press should trigger quick menu</li>
 | |
|   </ol>
 | |
| 
 | |
|   <div class="dropdiv" id="dropdiv" ondrop="drop(event)" ondragover="allowDrop(event)">
 | |
|     <span id="draghere">Drag here</span>
 | |
|   </div>
 | |
|   <div class="dropdiv">
 | |
|     <div id="dragdiv" draggable="true" ondragstart="drag(event)"></div>
 | |
|   </div>
 | |
|   <div id="touchdiv" ontouchstart="onTouchEvent(event)" ontouchend="onTouchEvent(event)" ontouchmove="onTouchEvent(event)" ontouchcancel="onTouchEvent(event)">
 | |
|   </div>
 | |
|   <div id="pointerdiv" onpointerdown="onPointerEvent(event)" onpointerup="onPointerEvent(event)" onpointermove="onPointerEvent(event)" onpointercancel="onPointerEvent(event)">
 | |
|   </div>
 | |
|   <br />
 | |
|   <br />
 | |
|   <br />
 | |
|   <br />
 | |
|   <br />
 | |
|   <br />
 | |
|   </body>
 | |
| </html>
 |