LayoutTests/fast/backgrounds/background-leakage-transforms.html - WebKit - Git at Google

 <html>
    <head>
       <style type="text/css">
         .grouping {
           margin: 10px;
           padding: 2px;
           display: inline-block;
         }

         .box {
           display: inline-block;
           margin: 10px;
           height: 100px;
           width: 110px;
           background-color: black;
           border: 20px solid white;
           border-radius: 50px;
           -moz-box-sizing: border-box;
           box-sizing: border-box;
         }

         .translucent {
           background-color: gray;
         }
         .translucent > .box {
           background-color: white;
           border-color: rgba(0, 0, 255, 0.5);
         }

         .scaled {
           -webkit-transform: scale(1, 0.33);
           -webkit-transform-origin: top left;
         }

         .vertical {
           -webkit-writing-mode: vertical-lr;
         }
       </style>
    </head>
    <body>
      <div>
         <div class="grouping">
          <div class="box"></div>
          <div class="box" style="border-style: double; border-color: groove;"></div>
        </div>
        <div class="translucent grouping">
          <div class="box"></div>
          <div class="box" style="border-style: double; border-color: groove;"></div>
        </div>
      </div>

      <div class="scaled">
         <div class="grouping">
          <div class="box"></div>
          <div class="box" style="border-style: double; border-color: groove;"></div>
        </div>
        <div class="translucent grouping">
          <div class="box"></div>
          <div class="box" style="border-style: double; border-color: groove;"></div>
        </div>
      </div>

      <div class="scaled vertical">
         <div class="grouping">
          <div class="box"></div>
          <div class="box" style="border-style: double; border-color: groove;"></div>
        </div>
        <div class="translucent grouping">
          <div class="box"></div>
          <div class="box" style="border-style: double; border-color: groove;"></div>
        </div>
      </div>
    </body>
 </html>
	<html>
	<head>
	<style type="text/css">
	.grouping {
	margin: 10px;
	padding: 2px;
	display: inline-block;
	}

	.box {
	display: inline-block;
	margin: 10px;
	height: 100px;
	width: 110px;
	background-color: black;
	border: 20px solid white;
	border-radius: 50px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

	.translucent {
	background-color: gray;
	}
	.translucent > .box {
	background-color: white;
	border-color: rgba(0, 0, 255, 0.5);
	}

	.scaled {
	-webkit-transform: scale(1, 0.33);
	-webkit-transform-origin: top left;
	}

	.vertical {
	-webkit-writing-mode: vertical-lr;
	}
	</style>
	</head>
	<body>
	<div>
	<div class="grouping">
	<div class="box"></div>
	<div class="box" style="border-style: double; border-color: groove;"></div>
	</div>
	<div class="translucent grouping">
	<div class="box"></div>
	<div class="box" style="border-style: double; border-color: groove;"></div>
	</div>
	</div>

	<div class="scaled">
	<div class="grouping">
	<div class="box"></div>
	<div class="box" style="border-style: double; border-color: groove;"></div>
	</div>
	<div class="translucent grouping">
	<div class="box"></div>
	<div class="box" style="border-style: double; border-color: groove;"></div>
	</div>
	</div>

	<div class="scaled vertical">
	<div class="grouping">
	<div class="box"></div>
	<div class="box" style="border-style: double; border-color: groove;"></div>
	</div>
	<div class="translucent grouping">
	<div class="box"></div>
	<div class="box" style="border-style: double; border-color: groove;"></div>
	</div>
	</div>
	</body>
	</html>