swat/apps/qooxdoo-examples/test/Clipping_1.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>qooxdoo &raquo; Demo</title>
   5   <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
   6   <!--[if IE]>
   7   <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
   8   <![endif]-->
   9   <script type="text/javascript" src="../../script/qx.js"></script>
  10 </head>
  11 <body>
  12   <script type="text/javascript" src="../../script/layout.js"></script>
  13
  14   <div id="demoDescription">
  15     <p>Tests for clipping implementation</p>
  16   </div>
  17
  18   <script type="text/javascript">
  19   qx.core.Init.getInstance().defineMain(function()
  20   {
  21     var d = qx.ui.core.ClientDocument.getInstance();
  22
  23     var t1 = new qx.ui.basic.Terminator;
  24
  25     t1.setBackgroundColor("red");
  26     t1.setLocation(20, 48);
  27     t1.setDimension(100, 100);
  28     t1.setBorder(2, "solid", "black");
  29     t1.setClipLocation(0, 0);
  30     t1.setClipDimension(50, 50);
  31
  32     d.add(t1);
  33
  34
  35
  36     var t2 = new qx.ui.basic.Terminator;
  37
  38     t2.setBackgroundColor("yellow");
  39     t2.setLocation(200, 48);
  40     t2.setDimension(100, 100);
  41     t2.setBorder(2, "solid", "black");
  42     t2.setClipLocation(25, 25);
  43     t2.setClipDimension(50, 50);
  44
  45     d.add(t2);
  46
  47
  48
  49     var t3 = new qx.ui.basic.Terminator;
  50
  51     t3.setBackgroundColor("blue");
  52     t3.setLocation(20, 248);
  53     t3.setDimension(100, 100);
  54     t3.setBorder(2, "solid", "black");
  55     t3.setClipLocation(50, 50);
  56     t3.setClipDimension(50, 50);
  57
  58     d.add(t3);
  59
  60
  61
  62
  63     var t4 = new qx.ui.basic.Terminator;
  64
  65     t4.setBackgroundColor("orange");
  66     t4.setLocation(200, 248);
  67     t4.setDimension(100, 100);
  68     t4.setBorder(2, "solid", "black");
  69     t4.setClip(25, 25, null, null);
  70
  71     d.add(t4);
  72
  73   });
  74   </script>
  75 </body>
  76 </html>