wpt / css / css-transforms / transform3d-sorting-006.html

Status: FAIL | Duration: 9ms | Subtests: 0/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi

TestRefTest SourceRef Source

/css/css-transforms/transform3d-sorting-006.html

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Test (Transforms): Sorting With Intersection</title>
    <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name">
    <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-style-property">
    <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering">
    <meta name="assert" content="This tests that when two boxes intersect in a
    simple fashion, they're rendered according to Newell's algorithm.">
    <link rel="match" href="transform3d-sorting-006-ref.html">
    <meta name=fuzzy content="0-179;0-920">
  </head>
  <body>
    <div style="transform-style: preserve-3d">
      <div style="height: 100px; width: 100px; background: red;
        transform: rotateX(-45deg) rotateY(-45deg)"></div>
      <div style="height: 100px; width: 100px; background: green;
        transform: translateY(-100px) rotateX(-45deg) rotateY(45deg)"></div>
    </div>
  </body>
</html>

/css/css-transforms/transform3d-sorting-006-ref.html

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Reftest Reference</title>
    <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name">
    <!--
    In a correct implementation, the bottom borders here will be invisible, because
    the later divs get painted on top.  This is to catch an incorrect pass in
    Safari on Windows, which draws the test file and the ref with the same error
    (painting the back halves on top) and so passes if the back halves are solid
    red and green.
    -->
  </head>
  <body>
    <div style="height: 70px; width: 50px; background: red;
      border-bottom: 30px solid black;
      transform: rotateX(45deg) rotateY(45deg);
      transform-origin: right"></div>
    <div style="height: 70px; width: 50px; background: green;
      border-bottom: 30px solid black;
      transform: translate(50px, -100px) rotateX(45deg) rotateY(-45deg);
      transform-origin: left"></div>
    <div style="height: 100px; width: 50px; background: red;
      transform: translate(50px, -200px) rotateX(45deg) rotateY(45deg);
      transform-origin: left"></div>
    <div style="height: 100px; width: 50px; background: green;
      transform: translateY(-300px) rotateX(45deg) rotateY(-45deg);
      transform-origin: right"></div>
  </body>
</html>