Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/svg/transforms/svg-css-transforms.xhtml 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Matrix testing</title>
  <style type="text/css" media="screen">
    div {
      -webkit-box-sizing: border-box;
    }
    
    .column {
      margin: 10px;
      display: inline-block;
      vertical-align: top;
    }
    .container {
      position: relative;
      height: 200px;
      width: 200px;
      margin: 10px;
      background-color: silver;
      border: 1px solid black;
    }
    
    .box {
      position: absolute;
      top: 0;
      left: 0;
      height: 60px;
      width: 60px;
      border: 1px dotted black;
      -webkit-transform-origin: top left; /* to match SVG */
    }

    #group1 {
      transform: translate(75px, 25px);
    }

    #group2 {
      transform: scale(2);
    }

    #group3 {
      transform: rotate(45deg);
    }

    #rect1 {
      transform: translate(75px, 25px) scale(2) rotate(45deg);
    }
    
    .final {
      border: 1px solid blue;
    }
  </style>
</head>

<body>

<div class="column">
  <h2>SVG nested</h2>
  <div class="container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"  
         viewBox="0 0 200 200" style="width:200px; height:200px;">
      <g id="group1" x="0" y="0" width="60" height="60">
        <rect x="0" y="0" width="60" height="60" stroke="black" stroke-width="1px" stroke-dasharray="1 1" fill="none" />
        <g id="group2" x="0" y="0" width="60" height="60" >
          <rect x="0" y="0" width="60" height="60" stroke="black" stroke-dasharray="1 1" stroke-width="1px" fill="none" />
          <rect id="group3" x="0" y="0" width="60" height="60" stroke="blue" fill="none" />
        </g>
      </g>
    </svg>
  </div>

  <h2>CSS nested</h2>
  <div class="container">
    <div id="box1" class="box" style="transform: translate(75px, 25px)">
      <div id="box2" class="box" style="transform: scale(2)">
        <div id="box3" class="final box" style="transform: rotate(45deg)">
        </div>
      </div>
    </div>
  </div>
</div>

<div class="column">
  <h2>SVG compound</h2>
  <div class="container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"  
         viewBox="0 0 200 200" style="width:200px; height:200px;">
      <rect id="rect1" x="0" y="0" width="60" height="60" stroke="blue" fill="none"/>
    </svg>
  </div>

  <h2>CSS compound</h2>
  <div class="container">
    <div class="final box" style="transform: translate(75px, 25px) scale(2) rotate(45deg)">
    </div>
  </div>
</div>
</body>
</html>