tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

3d-rendering-context-behavior.html (4142B)

      1 <!doctype HTML>
      2 <link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
      3 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/">
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 
      7 <style>
      8  div {
      9    width: 200px;
     10    height: 200px;
     11  }
     12 
     13  .rotate45 {
     14    transform: rotateY(45deg)
     15  }
     16  .rotateNeg45 {
     17    transform: rotateY(-45deg)
     18  }
     19 
     20  .parent {
     21    transform-style: preserve-3d;
     22  }
     23 
     24  .perspective {
     25    perspective: 200px;
     26  }
     27 </style>
     28 
     29 <div class="parent rotateNeg45">
     30  <div id=childOfPreserve3D class="child rotate45"></div>
     31 </div>
     32 
     33 <div class="parent rotateNeg45">
     34  <div id=absChildOfPreserve3D class="child rotate45" style="position: absolute"></div>
     35 </div>
     36 
     37 <div class="parent rotateNeg45">
     38  <div id=fixedChildOfPreserve3D class="child rotate45" style="position: fixed"></div>
     39 </div>
     40 
     41 <div class="parent rotateNeg45">
     42  <div>
     43    <div id=childWithIntermediate class="child rotate45"></div>
     44  </div>
     45 </div>
     46 
     47 <div class="parent rotateNeg45">
     48  <div>
     49    <div id=absWithIntermediate class="child rotate45" style="position: absolute"></div>
     50  </div>
     51 </div>
     52 
     53 <div class="parent rotateNeg45">
     54  <div>
     55    <div id=fixedWithIntermediate class="child rotate45" style="position: fixed"></div>
     56  </div>
     57 </div>
     58 
     59 <div class="perspective">
     60  <div id=childWithPerspectiveParent class="child rotate45"></div>
     61  <div id=absWithPerspectiveParent class="child rotate45" style="position: absolute"></div>
     62  <div id=fixedWithPerspectiveParent class="child rotate45" style="position: fixed"></div>
     63 </div>
     64 
     65 <div class="perspective">
     66  <div>
     67    <div id=childWithIntermediateAndPerspectiveParent class="child rotate45"></div>
     68    <div id=absWithIntermediateAndPerspectiveParent class="child rotate45" style="position: absolute"></div>
     69    <div id=fixedWithIntermediateAndPerspectiveParent class="child rotate45" style="position: fixed"></div>
     70  </div>
     71 </div>
     72 
     73 <script>
     74  test(function() {
     75    assert_equals(childOfPreserve3D.getBoundingClientRect().width, 200);
     76  }, "Direct DOM parent is root of rendering context (normal flow)");
     77  test(function() {
     78    assert_equals(absChildOfPreserve3D.getBoundingClientRect().width, 200);
     79  }, "Direct DOM parent is root of rendering context (absolute)");
     80  test(function() {
     81    assert_equals(fixedChildOfPreserve3D.getBoundingClientRect().width, 200);
     82  }, "Direct DOM parent is root of rendering context (fixed)");
     83 
     84  test(function() {
     85    assert_equals(childWithIntermediate.getBoundingClientRect().width, 100);
     86  }, "Intermediate DOM nodes cause rendering context to end (normal flow)");
     87  test(function() {
     88    assert_equals(absWithIntermediate.getBoundingClientRect().width, 100);
     89  }, "Intermediate DOM nodes cause rendering context to end (absolute)");
     90  test(function() {
     91    assert_equals(fixedWithIntermediate.getBoundingClientRect().width, 100);
     92  }, "Intermediate DOM nodes cause rendering context to end (fixed)");
     93 
     94  test(function() {
     95    assert_approx_equals(
     96        childWithPerspectiveParent.getBoundingClientRect().width, 161, 1);
     97  }, "Perspective applies to direct DOM normal-flow children");
     98 
     99  test(function() {
    100    assert_approx_equals(
    101        absWithPerspectiveParent.getBoundingClientRect().width, 161, 1);
    102  }, "Perspective applies to direct DOM abs-pos children");
    103 
    104  test(function() {
    105    assert_approx_equals(
    106        fixedWithPerspectiveParent.getBoundingClientRect().width, 161, 1);
    107  }, "Perspective applies to direct DOM fixed-pos children");
    108 
    109  test(function() {
    110    assert_approx_equals(
    111        childWithIntermediateAndPerspectiveParent.getBoundingClientRect().width,
    112        141, 1);
    113  }, "Perspective does not apply to DOM normal-flow grandchildren");
    114 
    115  test(function() {
    116    assert_approx_equals(
    117        absWithIntermediateAndPerspectiveParent.getBoundingClientRect().width,
    118        141, 1);
    119  }, "Perspective does not apply to DOM abs-pos grandchildren");
    120 
    121  test(function() {
    122    assert_approx_equals(
    123      fixedWithIntermediateAndPerspectiveParent.getBoundingClientRect().width,
    124      141, 1);
    125  }, "Perspective does not apply to DOM fixed-pos grandchildren");
    126 </script>