Skip to content

GitLab

W
webkit2gtk
Commit a1197564 authored by Gustavo Noronha's avatar Gustavo Noronha
Browse files
Options

Initial commit

parents
Pipeline #1557 failed with stages
      Hide whitespace changes
      Inline Side-by-side
      Showing with 606 additions and 0 deletions
      96.jpg 0 → 100644
      View file @ a1197564
      96.jpg

      2.19 KB

      98.jpg 0 → 100644
      View file @ a1197564
      98.jpg

      2.38 KB

      ac-3d-rendering.html 0 → 100644
      View file @ a1197564
      <html>
      <head>
      <style>
      body {
      margin: 0;
      }
      #container {
      width: 400px;
      height: 400px;
      margin: 50px;
      border: 1px solid black;
      -webkit-perspective: 500px;
      }
      .box {
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: gray;
      opacity: 0.75;
      }
      #left {
      -webkit-transform: rotateY(-75deg);
      left: 20px;
      top: 100px;
      }
      #top {
      -webkit-transform: rotateX(75deg);
      top: 20px;
      left: 100px;
      }
      #right {
      -webkit-transform: rotateY(75deg);
      left: 180px;
      top: 100px;
      }
      #bottom {
      -webkit-transform: rotateX(-75deg);
      top: 180px;
      left: 100px;
      }
      .box:hover {
      background-color: orange;
      }
      </style>
      </head>
      <body>
      <div id="container">
      <div class="box" id="left"></div>
      <div class="box" id="top"></div>
      <div class="box" id="right"></div>
      <div class="box" id="bottom"></div>
      </div>
      <div id="results"></div>
      </body>
      </html>
      animation1.html 0 → 100644
      View file @ a1197564
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
      <html lang="en">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Test simultaneous starting of two animations</title>
      <style type="text/css" media="screen">
      .box {
      position: absolute;
      top: 40px;
      height: 100px;
      width: 100px;
      background-color: blue;
      -webkit-animation-duration: 10s;
      -webkit-animation-timing-function: linear;
      -webkit-animation-name: "anim";
      }
      @-webkit-keyframes "anim" {
      from { -webkit-transform: rotate(0deg); }
      to { -webkit-transform: rotate(360deg); }
      }
      #box1 {
      left: 40px;
      background-color: blue;
      }
      #box2 {
      left: 160px;
      background-color: red;
      }
      </style>
      </head>
      <body>
      <div id="box1" class="box">
      </div>
      <div id="box2" class="box">
      </div>
      </div>
      </body>
      </html>
      animation2.html 0 → 100644
      View file @ a1197564
      <!DOCTYPE html>
      <html>
      <head>
      <style type="text/css" media="screen">
      .box {
      position: relative;
      margin: 10px;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: blue;
      -webkit-animation-duration: 2s;
      -webkit-animation-timing-function: linear;
      }
      #box1 {
      -webkit-animation-name: move;
      }
      @-webkit-keyframes move {
      from {
      left: 0px;
      }
      50% {
      opacity: 0;
      }
      to {
      left: 400px;
      }
      }
      #box2 {
      -webkit-animation-name: move2;
      }
      @-webkit-keyframes move2 {
      from {
      -webkit-transform: translateX(0);
      }
      50% {
      opacity: 0;
      }
      to {
      -webkit-transform: translateX(400px);
      }
      }
      </style>
      </head>
      <body>
      <div id="box1" class="box"></div>
      <div id="box2" class="box"></div>
      </div>
      </body>
      </html>
      drag.html 0 → 100644
      View file @ a1197564
      <!DOCTYPE html>
      <html>
      <head>
      <title>Drag and drop test page</title>
      <style>
      * { margin: 0px; padding: 0px; box-sizing: border-box; }
      body {
      margin: 20px; }
      #draggables li, #dropped li {
      list-style: none; }
      .draggable {
      float: left; position: relative; width: 100px; height: 100px; margin: 14px;
      border: 2px solid rgba(255,255,255,.25); }
      #draggable-1 {
      background: url(96.jpg) no-repeat; }
      #draggable-2 {
      background: url(98.jpg) -1px -1px no-repeat; }
      .draggable strong {
      position: absolute; bottom: 0; width: 100%; height: 25%; font-size: 110%;
      font-weight: bold; background: rgba(32,0,0,.5); color: white; text-align: center; }
      .tooltip {
      font-weight: bold; font-size: 110%; width:8em; margin: 0 auto 12px;
      display:block; position:relative; padding:5px 15px;
      color:#fff; border:2px solid rgba(34,34,34,0.75); background:rgba(32,0,0,0.75);
      text-align:center; border-radius:3px; box-shadow:0px 0px 3px rgba(0, 0, 0, 0.3); }
      .tooltip:before, .tooltip:after{
      content:''; position:absolute; bottom:-13px; left:50%; margin-left:-9px;
      width:0; height:0; border-left:10px solid transparent;
      border-right:10px solid transparent; border-top:10px solid rgba(0,0,0,0.1); }
      .tooltip:after{
      bottom:-12px; margin-left:-10px; border-top:10px solid rgba(32,0,0,0.75); }
      #dropzone {
      width: 260px; clear: both; margin-bottom: 10px; }
      #dropped {
      min-height: 134px; border: 2px solid rgba(34,34,34,0.75); background:rgba(32,0,0,0.75); border-radius:3px; }
      #dropped:after {
      content: ''; clear: both; }
      #dropped:after { content: ""; display: table; }
      #dropped:after { clear: both; }
      #output li {
      list-style: none; border-bottom: 1px solid #FF6; padding: 0.33em; font-size: 12px; height: 2em; width: 22em; }
      #output li.dragstart {
      background: #66F;}
      #output li.dragenter {
      background: #6F6;}
      #output li.dragover {
      background: #F66; padding: 2px; font-size: 6px; width: 44em; }
      #output li.drop {
      background: #FF6;}
      #recurse {
      position: absolute; left: 400px; top: 100px; width: 500px; height: 600px; border: 1px solid black; margin: -1px; }
      #filler { font-size: 12px; height: 300px; width: 22em; background: #669; color: #223; padding: 20px; }
      </style>
      <script>
      function registerevent(e) {
      var output = document.getElementById("output");
      var contents = event.type;
      if (event.type == "dragover")
      contents += " " + event.x + "x" + event.y;
      else if (event.type == "drop")
      contents += " " + e.dataTransfer.types;
      output.innerHTML += "<li class='" + event.type + "'>" + contents + "</li>";
      return false;
      }
      var internalDNDType = 'text/x-dnd-test';
      function ondragstart(e) {
      registerevent(e);
      if (e.target instanceof HTMLLIElement) {
      e.dataTransfer.setData(internalDNDType, e.target.id);
      e.effectAllowed = 'move'; // only allow moves
      } else {
      e.preventDefault(); // don't allow selection to be dragged
      }
      }
      function ondragenter(e) {
      registerevent(e);
      // block the event if the drag contains data of our type
      if (e.dataTransfer.types && e.dataTransfer.types.indexOf(internalDNDType) > 0)
      e.preventDefault();
      }
      function ondragover(e) {
      registerevent(e);
      e.dataTransfer.dropEffect = 'move';
      e.preventDefault();
      }
      function ondrop(e) {
      registerevent(e);
      // drop the data
      var data = e.dataTransfer.getData(internalDNDType);
      if (data) {
      var el = document.getElementById(data).cloneNode(false);
      el.removeAttribute("draggable");
      document.getElementById("dropped").appendChild(el);
      }
      }
      function startup() {
      var el = document.getElementById("draggables");
      el.addEventListener("dragstart", ondragstart, false);
      el = document.getElementById("dropped");
      el.addEventListener("dragenter", ondragenter, false);
      el.addEventListener("dragover", ondragover, false);
      el.addEventListener("drop", ondrop, false);
      }
      </script>
      </head>
      <body onload="startup()">
      <h1>Drag and drop test</h1>
      <ul id="draggables">
      <li id="draggable-1" class="draggable" draggable="true">
      <strong>Drag me!</strong>
      </li>
      <li id="draggable-2" class="draggable" draggable="true">
      <strong>Drag me!</strong>
      </li>
      </ul>
      <div id="dropzone">
      <h2 class="tooltip">Drop here</h2>
      <ul id="dropped"></ul>
      </div>
      <img alt="I'm usually draggable but you should not be able to drag me with gestures enabled" src="150.jpg"/>
      <ul id="output"></ul>
      <iframe id="recurse" src="drag.html"></iframe>
      <div id="filler">
      <p>This space intentionally left blank</p>
      </div>
      </body>
      </html>
      scroll-composited.html 0 → 100644
      View file @ a1197564
      <!DOCTYPE html>
      <html>
      <head>
      <title>Test scrolling with composited content</title>
      <style>
      body {
      width: 600px;
      }
      div {
      -webkit-transform: translateZ(0);
      width: 1000px;
      height: 800px;
      }
      </style>
      </head>
      <body>
      <p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=52720">Bug 52720 - REGRESSION
      (r75987): Assertion failure in WebView::scrollBackingStore when scrolling page with composited
      content</a>. The test passes if it doesn't assert in Debug builds.</p>
      <div></div>
      <script>
      window.scrollBy(300, 0);
      </script>
      </body>
      </html>
      scroll.html 0 → 100644
      View file @ a1197564
      <!DOCTYPE html>
      <html>
      <head>
      <title>Scroll test</title>
      <style>
      * { box-sizing: border-box }
      h1 { background: #669; display: block; width: 110%; border-bottom: 2px solid #006; }
      h1 a { color: white; }
      h1 a:hover { text-shadow: 1px 1px 2px black, 0 0 1em gray, 0 0 0.2em gray; }
      h1 a:active { text-shadow: 1px 1px 2px red, 0 0 1em red, 0 0 0.2em red; }
      #container { width: 350px; height: 200px; overflow: auto; }
      iframe { width: 350px; height: 350px; }
      input[type=text] { width: 350px; }
      #filler { box-model: border-box; height: 70px; width: 350px; background: #669; color: #223; padding: 20px; }
      #mouse-unscrollable { box-model: border-box; width: 350px; background: #966; padding: 20px; }
      #touch-unscrollable { box-model: border-box; width: 350px; background: #696; padding: 20px; }
      #clickables { box-model: border-box; width: 350px; background: #666; padding: 20px; }
      </style>
      <script>
      function startup() {
      var el = document.getElementById("touch-unscrollable");
      el.addEventListener("touchstart", function(e) { if (e.touches.length == 1) { e.preventDefault(); } }, false);
      el = document.getElementById("mouse-unscrollable");
      el.addEventListener("mousedown", function(e) { e.preventDefault(); }, false);
      el = document.getElementById("touch-clickable");
      el.addEventListener("touchstart", function(e) { e.preventDefault(); }, false);
      el = document.getElementById("mouse-clickable");
      el.addEventListener("mousedown", function(e) { e.preventDefault(); }, false);
      el = document.getElementById("unclickable");
      el.addEventListener("click", function(e) { e.preventDefault(); }, false);
      setTimeout(function() { document.getElementById("filler").style.height = "300px"; }, 1000);
      }
      </script>
      </head>
      <body onload="startup()">
      <h1>Scroll test (or go to <a href="http://planet.collabora.com">Planet Collabora</a>)</h1>
      <div id="container">
      <div id="containee">
      <img src="placeholder.png"/>
      </div>
      </div>
      <div>
      <input type="text" placeholder="Try to focus me!" />
      </div>
      <iframe src="scroll.html"></iframe>
      <div id="filler">
      <p>This space intentionally left blank</p>
      </div>
      <div id="touch-unscrollable">Touch scroll drags here should not start</div>
      <div id="mouse-unscrollable">Mouse scroll drags here should not start</div>
      <div id="clickables">
      Some clickable links:
      <ul>
      <li><a id="touch-clickable" href="http://www.collabora.com">Preventing touchstart</a></li>
      <li><a id="mouse-clickable" href="http://www.collabora.com">Preventing mousedown</a></li>
      <li><a id="unclickable" href="http://www.collabora.com">Preventing click</a></li>
      </ul>
      </div>
      <footer>
      Go to <a href="http://www.collabora.com">Collabora website</a> or
      <a href="http://planet.collabora.com">Planet Collabora</a> for a very long page.
      </footer>
      </body>
      </html>
      touchevents.html 0 → 100644
      View file @ a1197564
      <!-- Based on https://developer.mozilla.org/samples/domref/touchevents.html -->
      <!doctype html>
      <html>
      <head>
      <title>Touch/Mouse Event Example</title>
      <style type="text/css">
      h1 { font-size: 16px; }
      canvas {
      border:solid black 1px;
      }
      </style>
      <script>
      var ongoingTouches = new Array;
      var oldMouseEvt = null;
      var colors = new Array();
      colors[0] = "red";
      colors[1] = "blue";
      colors[2] = "green";
      colors[3] = "yellow";
      colors[4] = "purple";
      colors[5] = "orange";
      var lineWidth = 4;
      var lineOffset = lineWidth / 2;
      function colorForTouch(touch) {
      return colors[touch.identifier % colors.length];
      }
      function ongoingTouchIndexById(idToFind) {
      for (var i=0; i<ongoingTouches.length; i++) {
      var id = ongoingTouches[i].identifier;
      if (id == idToFind) {
      return i;
      }
      }
      return -1; // not found
      }
      function coordsPageToRelative(el, pageX, pageY)
      {
      var offsetX = 0, offsetY = 0;
      var offsetParent;
      while (el.offsetParent) {
      offsetX += el.offsetLeft;
      offsetY += el.offsetTop;
      el = el.offsetParent;
      }
      return { x: pageX-offsetX, y: pageY-offsetY };
      }
      function handleStart(evt) {
      evt.preventDefault();
      var el = document.getElementById("touch-canvas");
      var ctx = el.getContext("2d");
      var touches = evt.changedTouches;
      for (var i=0; i<touches.length; i++) {
      console.log("Adding " + touches[i].identifier);
      ongoingTouches.push(touches[i]);
      var color = colorForTouch(touches[i]);
      ctx.fillStyle = color;
      var coords = coordsPageToRelative(el, touches[i].pageX, touches[i].pageY);
      console.log("=============== rel:"+coords.x+","+coords.y+" page:"+touches[i].pageX+","+touches[i].pageY);
      ctx.beginPath();
      ctx.arc(coords.x - lineOffset, coords.y - lineOffset, lineOffset, 0, Math.PI * 2, true);
      ctx.closePath();
      ctx.fill();
      }
      console.log("TOUCHES: " + ongoingTouches.length);
      }
      function handleMove(evt) {
      evt.preventDefault();
      var el = document.getElementById("touch-canvas");
      var ctx = el.getContext("2d");
      var touches = evt.changedTouches;
      ctx.lineWidth = lineWidth;
      console.log("TOUCHES: " + ongoingTouches.length);
      for (var i=0; i<touches.length; i++) {
      var color = colorForTouch(touches[i]);
      var idx = ongoingTouchIndexById(touches[i].identifier);
      var oldCoords = coordsPageToRelative(el, ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
      var coords = coordsPageToRelative(el, touches[i].pageX, touches[i].pageY);
      ctx.strokeStyle = color;
      ctx.beginPath();
      ctx.moveTo(oldCoords.x - lineOffset, oldCoords.y - lineOffset);
      ctx.lineTo(coords.x - lineOffset, coords.y - lineOffset);
      ctx.closePath();
      ctx.stroke();
      ongoingTouches.splice(idx, 1, touches[i]); // swap in the new touch record
      }
      }
      function handleEnd(evt) {
      evt.preventDefault();
      var el = document.getElementById("touch-canvas");
      var ctx = el.getContext("2d");
      var touches = evt.changedTouches;
      ctx.lineWidth = lineWidth;
      for (var i=0; i<touches.length; i++) {
      var color = colorForTouch(touches[i]);
      var idx = ongoingTouchIndexById(touches[i].identifier);
      var oldCoords = coordsPageToRelative(el, ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
      var coords = coordsPageToRelative(el, touches[i].pageX, touches[i].pageY);
      ctx.strokeStyle = color;
      ctx.beginPath();
      ctx.moveTo(oldCoords.x - lineOffset, oldCoords.y - lineOffset);
      ctx.lineTo(coords.x - lineOffset, coords.y - lineOffset);
      console.log("Removing " + ongoingTouches[idx].identifier);
      ongoingTouches.splice(idx, 1); // remove it; we're done
      }
      console.log("TOUCHES: " + ongoingTouches.length);
      }
      function handleCancel(evt) {
      evt.preventDefault();
      var touches = evt.changedTouches;
      for (var i=0; i<touches.length; i++) {
      var idx = ongoingTouchIndexById(touches[i].identifier);
      console.log("Removing " + touches[i].identifier);
      ongoingTouches.splice(idx, 1); // remove it; we're done
      }
      }
      function handleMouseDown(evt) {
      evt.preventDefault();
      oldMouseEvt = evt;
      }
      function handleMouseMove(evt) {
      if (!oldMouseEvt)
      return;
      evt.preventDefault();
      var el = document.getElementById("mouse-canvas");
      var ctx = el.getContext("2d");
      var oldCoords = coordsPageToRelative(el, oldMouseEvt.pageX, oldMouseEvt.pageY);
      var coords = coordsPageToRelative(el, evt.pageX, evt.pageY);
      ctx.lineWidth = lineWidth;
      var color = "black";
      ctx.strokeStyle = color;
      ctx.beginPath();
      ctx.moveTo(oldCoords.x - lineOffset, oldCoords.y - lineOffset);
      ctx.lineTo(coords.x - lineOffset, coords.y - lineOffset);
      ctx.closePath();
      ctx.stroke();
      oldMouseEvt = evt;
      }
      function handleMouseUp(evt) {
      if (!oldMouseEvt)
      return;
      evt.preventDefault();
      var el = document.getElementById("mouse-canvas");
      var ctx = el.getContext("2d");
      var oldCoords = coordsPageToRelative(el, oldMouseEvt.pageX, oldMouseEvt.pageY);
      var coords = coordsPageToRelative(el, evt.pageX, evt.pageY);
      var color = "black";
      if (oldMouseEvt.type == "mousedown" && Math.abs(oldMouseEvt.timeStamp - evt.timeStamp) < 10) {
      // ignore clicks emulated by tap gesture
      oldMouseEvt = null;
      return;
      }
      ctx.beginPath();
      ctx.arc(coords.x - lineOffset, coords.y - lineOffset, lineOffset, 0, Math.PI * 2, true);
      ctx.closePath();
      ctx.fill();
      oldMouseEvt = null;
      }
      function startup() {
      var el = document.getElementById("touch-canvas");
      el.addEventListener("touchstart", handleStart, false);
      el.addEventListener("touchend", handleEnd, false);
      el.addEventListener("touchcancel", handleCancel, false);
      el.addEventListener("touchleave", handleEnd, false);
      el.addEventListener("touchmove", handleMove, false);
      el = document.getElementById("mouse-canvas");
      el.addEventListener("mousedown", handleMouseDown, false);
      el.addEventListener("mouseup", handleMouseUp, false);
      el.addEventListener("mousemove", handleMouseMove, false);
      }
      </script>
      </head>
      <body onload="startup()">
      <br/>
      <br/>
      <br/>
      <br/>
      <h1>Touch canvas</h1>
      <canvas id="touch-canvas" width="600" height="600">
      You really badly need to use a different browser.
      </canvas>
      <h1>Mouse canvas</h1>
      <canvas id="mouse-canvas" width="600" height="600">
      No, seriously.
      </canvas>
      </body>
      </html>
      Markdown is supported
      0% or .
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment