layout/style/test/test_query_container_for.html

   1 <!doctype html>
   2 <title>Test for bug 1789191</title>
   3 <script src="/tests/SimpleTest/SimpleTest.js"></script>
   4 <link rel="stylesheet" href="/tests/SimpleTest/test.css"/>
   5 <style>
   6 @container (min-width: 0px) {
   7 }
   8
   9 @container name (min-width: 0px) {
  10 }
  11
  12 @container (min-height: 0px) {
  13 }
  14
  15 div {
  16   width: 100px;
  17   height: 100px;
  18   background-color: blue;
  19   margin: 10px;
  20 }
  21
  22 .container-height {
  23   container-type: size;
  24 }
  25
  26 .container-unnamed {
  27   container-type: inline-size;
  28 }
  29
  30 .container-named {
  31   container-type: inline-size;
  32   container-name: name;
  33 }
  34 </style>
  35
  36 <div id="child1"></div>
  37
  38 <div class="container-height" id="container1">
  39   <div class="container-named" id="container2">
  40     <div class="container-unnamed" id="container3">
  41       <div id="child2"></div>
  42     </div>
  43   </div>
  44 </div>
  45
  46 <script>
  47   let sheet = document.querySelector("style").sheet;
  48   let withoutFilter = SpecialPowers.wrap(sheet.cssRules[0]);
  49   let withFilter = SpecialPowers.wrap(sheet.cssRules[1]);
  50   let heightQuery = SpecialPowers.wrap(sheet.cssRules[2]);
  51
  52   // Container query selection requires up-to-date layout information.
  53   document.body.getBoundingClientRect();
  54
  55   is(withoutFilter.queryContainerFor(child1), null, "No filter, no container");
  56   is(withFilter.queryContainerFor(child1), null, "Filter, no container");
  57   is(heightQuery.queryContainerFor(child1), null, "Height, no container");
  58
  59   is(SpecialPowers.unwrap(withoutFilter.queryContainerFor(child2)), container3, "No filter, container");
  60   is(SpecialPowers.unwrap(withFilter.queryContainerFor(child2)), container2, "Filter");
  61   is(SpecialPowers.unwrap(heightQuery.queryContainerFor(child2)), container1, "Height");
  62 </script>