pascal
/
lazarus.fresnel
mirror of https://gitlab.com/freepascal.org/lazarus/fresnel


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
							<!doctype html>
<html lang="en">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>Project1</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
  div {
    padding: 5px;
    border: 5px solid blue;
    margin: 4px;
  }
  #wing{
    width: 200px;
    height: 50px;
    overflow-x: scroll;
    overflow-y: visible;
    position: relative;
  }
  </style
</head>
<body>
  <script>
    console.log('AAA1');


    function Show(){
      var El = document.getElementById('wing');
      console.log('Client: l='+El.clientLeft+' t='+El.clientTop+' w='+El.clientWidth+' h='+El.clientHeight+' Scroll: Left='+El.scrollLeft+' Width='+El.scrollWidth+' Top='+El.scrollTop+' Height='+El.scrollHeight);
    }

    window.addEventListener("load", (event) => {

      var El = document.getElementById('feather');
      El.addEventListener('mousemove',function (e){
          console.log('Feather mousemove client='+e.clientX+','+e.clientY+' offset='+e.offsetX+','+e.offsetY);
        });
      El.addEventListener('mousedown',function(e){
          console.log('Feather mousedown client='+e.clientX+','+e.clientY+' offset='+e.offsetX+','+e.offsetY);
        });
      El.addEventListener('mouseup',function(e){
          console.log('Feather mouseup client='+e.clientX+','+e.clientY+' offset='+e.offsetX+','+e.offsetY);
        });
      El.addEventListener('pointerdown',function(e){
          console.log('Feather pointerdown client='+e.clientX+','+e.clientY+' offset='+e.offsetX+','+e.offsetY);
          El.setPointerCapture(e.pointerId);
        });
      El.addEventListener('pointerup',function(e){
          console.log('Feather pointerup client='+e.clientX+','+e.clientY+' offset='+e.offsetX+','+e.offsetY);
          El.releasePointerCapture(e.pointerId);
        });

      var Bird = document.getElementById('bird');
      Bird.addEventListener('mousemove',function(e){
          console.log('Bird mousemove client='+e.clientX+','+e.clientY+' offset='+e.offsetX+','+e.offsetY);
        });

      var Bear = document.getElementById('bear');
      Bear.addEventListener('mousemove',function(e){
          console.log('Bear mousemove client='+e.clientX+','+e.clientY+' offset='+e.offsetX+','+e.offsetY);
        });

    });
  </script>
  Very first line
  <div id="bear" style="width:500px;">
    Another good line
  </div>
  <div id="bird" style="width:500px;">
    revised <span id="beak">and annotated</span> with brand-new illustrations
    <div id="wing" onclick="Show()">
      <div id="feather" style="width:201px">
        revised and annotated with brand-new illustrations
      </div>
      one two three four five six seven eight nine ten eleven twelf
      <div style="width:20%">
        This property may also be set by using the overflow shorthand property
      </div>
      <div style="position: absolute; left: 0px; top: 0px; width: 100px; border-color: red;">
        Bird
      </div>
    </div>
  </div>
</body>
</html>