Blitz - WPT: overflow-perspective-001.html

wpt / css / css-transforms / overflow-perspective-001.html

/css/css-transforms/overflow-perspective-001.html

<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Test: Perspective with overflow: auto</title>
<link rel="author" title="Mozilla" href="https://mozilla.com">
<link rel="author" title="Yannis Juglaret" href="mailto:yjuglaret@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-property">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=2023621">
<link rel="match" href="overflow-perspective-ref.html">
<style>
#container {
  width: 300px;
  height: 300px;
  overflow: auto;
  perspective: 1000px;
}

#child {
  width: 60px;
  height: 60px;
  background: lime;
  transform: translateX(100px) translateY(140px) translateZ(550px);
  transform-origin: top left;
}
</style>
<div id="container">
  <div id="child"></div>
</div>

/css/css-transforms/overflow-perspective-ref.html

<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Test (Transforms): Perspective with overflow - reference</title>
<style>
#container {
  width: 300px;
  height: 300px;
  overflow: visible;
  perspective: 1000px;
}

#child {
  width: 60px;
  height: 60px;
  background: lime;
  transform: translateX(100px) translateY(140px) translateZ(550px);
  transform-origin: top left;
}
</style>
<div id="container">
  <div id="child"></div>
</div>