Gozala/servo.13842.html

## servo.13842.html
<!DOCTYPE html>
<html>

<head>
  <meta name="description" content="">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>transforms with in the transform renders incorrectly #13842</title>
  <style>
    .container {
      left: 0;
      top: 0;
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
      perspective: 800px;
      perspective-origin: 80% 10%;

      background: black;
    }


    .webviews {
      position: relative;
      box-sizing: content-box;

      height: 2836px;
      transform: translateZ(-1300px) rotateY(30deg);

      outline: 3px dashed blue;
      background: grey;
    }

    .webview {
      position: relative;
      margin: 0 0 40px;
      z-index: 2;
      box-sizing: border-box;
      overflow: hidden;

      outline: 3px dashed red;
    }


    .webpage {

      position: absolute;
      top: 0;
      height: 100%;
      margin: 0;
      margin-right: 40px;
      overflow: hidden;

      outline: 3px solid green;
    }


    .r1 {
      height: 669px;
      width: 6095px;
      transform: translateX(-4876px);
    }

    .r2 {
      height: 669px;
      width: 2438px;
      transform: translateX(-1219px);
    }

    .r3 {
      height: 669px;
      width: 1219px;
      transform: translateX(0px);
    }


    .r4 {
      height: 669px;
      width: 1219px;
      transform: translateX(0px);
    }


    .c1 {
      background-color: blue;
      width: 1179px;
      right: 0px;
    }

    .c2 {
      background-color: rgb(165, 42, 42);
      width: 1179px;
      right: 1219px;
    }

    .c3 {
      background-color: orange;
      width: 1179px;
      right: 2438px;
    }

    .c4 {
      background-color: white;
      width: 1179px;
      right: 3657px;
    }

    .c5 {
      background-color: rgb(255, 192, 203);
      width: 1179px;
      right: 4876px;
    }

    .r2 .c1 {
      background-color: pink;
    }

    .r2 .c2 {
      background-color: yellow;
    }


    .r3 .c1 {
      background-color: purple;
    }

    .r4 .c1 {
      background-color: cyan;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="webviews">
      <div class="webview r1">
        <div class="webpage c1"></div>
        <div class="webpage c2"></div>
        <div class="webpage c3"></div>
        <div class="webpage c4"></div>
        <div class="webpage c5"></div>
      </div>
      <div class="webview r2">
        <div class="webpage c1"></div>
        <div class="webpage c2"></div>
      </div>
      <div class="webview r3">
        <div class="webpage c1"></div>
      </div>
      <div class="webview r4">
        <div class="webpage c1"></div>
      </div>
    </div>
  </div>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta name="description" content="">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>transforms with in the transform renders incorrectly #13842</title>
	<style>
	.container {
	left: 0;
	top: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	perspective: 800px;
	perspective-origin: 80% 10%;

	background: black;
	}


	.webviews {
	position: relative;
	box-sizing: content-box;

	height: 2836px;
	transform: translateZ(-1300px) rotateY(30deg);

	outline: 3px dashed blue;
	background: grey;
	}

	.webview {
	position: relative;
	margin: 0 0 40px;
	z-index: 2;
	box-sizing: border-box;
	overflow: hidden;

	outline: 3px dashed red;
	}


	.webpage {

	position: absolute;
	top: 0;
	height: 100%;
	margin: 0;
	margin-right: 40px;
	overflow: hidden;

	outline: 3px solid green;
	}


	.r1 {
	height: 669px;
	width: 6095px;
	transform: translateX(-4876px);
	}

	.r2 {
	height: 669px;
	width: 2438px;
	transform: translateX(-1219px);
	}

	.r3 {
	height: 669px;
	width: 1219px;
	transform: translateX(0px);
	}


	.r4 {
	height: 669px;
	width: 1219px;
	transform: translateX(0px);
	}


	.c1 {
	background-color: blue;
	width: 1179px;
	right: 0px;
	}

	.c2 {
	background-color: rgb(165, 42, 42);
	width: 1179px;
	right: 1219px;
	}

	.c3 {
	background-color: orange;
	width: 1179px;
	right: 2438px;
	}

	.c4 {
	background-color: white;
	width: 1179px;
	right: 3657px;
	}

	.c5 {
	background-color: rgb(255, 192, 203);
	width: 1179px;
	right: 4876px;
	}

	.r2 .c1 {
	background-color: pink;
	}

	.r2 .c2 {
	background-color: yellow;
	}


	.r3 .c1 {
	background-color: purple;
	}

	.r4 .c1 {
	background-color: cyan;
	}
	</style>
	</head>

	<body>
	<div class="container">
	<div class="webviews">
	<div class="webview r1">
	<div class="webpage c1"></div>
	<div class="webpage c2"></div>
	<div class="webpage c3"></div>
	<div class="webpage c4"></div>
	<div class="webpage c5"></div>
	</div>
	<div class="webview r2">
	<div class="webpage c1"></div>
	<div class="webpage c2"></div>
	</div>
	<div class="webview r3">
	<div class="webpage c1"></div>
	</div>
	<div class="webview r4">
	<div class="webpage c1"></div>
	</div>
	</div>
	</div>
	</body>

	</html>