khronosschoty
/
palemoon-dev


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
							<!DOCTYPE html>
<!--
     Any copyright is dedicated to the Public Domain.
     http://creativecommons.org/publicdomain/zero/1.0/
-->
<html class="reftest-wait" lang="en-US">
  <head>
  <title>CSS Test: CSS display:contents; in Shadow DOM</title>
  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
  <link rel="help" href="http://dev.w3.org/csswg/css-display">
<style>
html,body {
    color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
.before::before {content: "a ";}
.after::after {content: " c";}
div.before::before {content: "X ";}
div.after::after {content: " Y";}
.b,.c { display:contents; }
</style>
  </head>
  <body>
    <div id="host1" class="before"></div>
    <span id="host2"></span>
    <div id="host3" class="after"></div>
    <div id="host4" class="before after"></div>
    <div id="host5" class="after"></div>
    <div id="host6" class="before"></div>
    <div id="host7"></div>
    <div id="host8" class="after"></div>
    <div id="host9" class="before after"></div>
    <div id="hostA" class="after"></div>
    <div id="hostB"></div>
    <div id="hostC"></div>
    <div id="hostD"></div>
    <div id="hostE"></div>
    <div id="hostF" class="before"></div>
    <div id="hostG"></div>
    <span id="hostH"></span>
    <div id="hostI"></div>
    <div id="hostJ"></div>
    <span id="hostK"></span>
    <div id="hostL"></div>
    <div id="hostM"><i>Two</i><b>One</b></div>
    <div id="hostN"><i class="c">Two</i><b>One</b></div>
    <div id="hostO"><i>Two</i><b class="c">One</b></div>
    <div id="hostP"><i class="c">Two</i><b class="c">One</b></div>
    <div id="hostQ" class="c" style="color:blue"><i class="c">Two</i><b class="c">One</b></div>Three
    <span id="hostR"><style scoped>:scope{color:green}</style></span>
    <div id="hostS" class="c"><span class="c">S</span></div>
    <div id="hostT" class="c">T</div>
    <div id="hostU"><span class="c">U</span></div>
    <div id="hostV" class="c" style="color:red"><b class="c" style="color:inherit">V</b></div>
    <!-- TODO(bug 1021572?) <div id="hostY" class="c" style="color:red"><b>Y</b></div> -->

   <script>
      function shadow(id) {
        return document.getElementById(id).createShadowRoot();
      }
      function span(s) {
        var e = document.createElement("span");
        var t = document.createTextNode(s);
        e.appendChild(t);
        return e;
      }
      function text(s) {
        return document.createTextNode(s);
      }
      function contents(n) {
        var e = document.createElement("z");
        e.style.display = "contents";
        e.style.color = "blue"; 
        if (n) e.appendChild(n);
        return e;
      }

      function run() {
        document.body.offsetHeight;

        shadow("host1").innerHTML = '<content></content> c';
        shadow("host2").innerHTML = 'a <content style="display:contents"></content> c';
        shadow("host3").innerHTML = 'a <content style="display:contents"></content>';
        shadow("host4").innerHTML = '<content style="display:contents"></content>';
        shadow("host5").innerHTML = 'a <content style="display:contents"></content>';
        shadow("host6").innerHTML = '<z style="color:blue; display:contents"><content></content></z> c';
        shadow("host7").innerHTML = 'a <content style="display:contents"></content> c';
        shadow("host8").innerHTML = 'a <z style="color:blue; display:contents"><content style="display:contents"></z></content>';
        shadow("host9").innerHTML = '<content style="display:contents"></content>';
        shadow("hostA").innerHTML = 'a <content style="display:contents"></content>';
        shadow("hostB").innerHTML = 'a <content select=".c"></content> <content select=".b"></content> B';
        shadow("hostC").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B';
        shadow("hostD").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B <content select=".b"></content>';
        shadow("hostE").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B';
        shadow("hostF").innerHTML = '<content select=".c"></content> <content select=".b"></content> B';
        shadow("hostG").innerHTML = '<content select=".b"></content>';
        shadow("hostH").innerHTML = '<content select=".b"></content>';
        shadow("hostI").innerHTML = 'A<content select=".b"></content>';
        shadow("hostJ").innerHTML = 'A<content select=".b"></content>';
        shadow("hostK").innerHTML = '<content select=".b"></content>';
        shadow("hostL").innerHTML = '<content select=".b"></content>';
        shadow("hostM").innerHTML = '<content select="b"></content><content select="i"></content>';
        shadow("hostN").innerHTML = '<content select="b"></content><content select="i"></content>';
        shadow("hostO").innerHTML = '<content select="b"></content><content select="i"></content>';
        shadow("hostP").innerHTML = '<content select="b"></content><content select="i"></content>';
        shadow("hostQ").innerHTML = '<content select="b"></content><content select="i"></content>';
        shadow("hostR").innerHTML = '<content select="span"></content>';
        shadow("hostW").innerHTML = '<z style="color:red"><content select="b"></content></z>';
        shadow("hostX").innerHTML = '<z style="color:red"><content select="b"></content></z>';
        // TODO(bug 1021572?) shadow("hostY").innerHTML = '<content select="b"><style scoped>:scope{color:green}</style></content>';
      }

      function tweak() {
        document.body.offsetHeight;

        host1.appendChild(span("1"));
        host2.appendChild(text("2"));
        host3.appendChild(span("3"));
        host4.appendChild(text("4"));

        var e = span("5");
        e.style.display = "contents";
        host5.appendChild(e);

        host6.appendChild(span("6"));
        host7.appendChild(contents(text("7")));
        host8.appendChild(contents(span("8")));
        host9.appendChild(contents(text("9")));

        var e = contents(span("A"));
        e.style.display = "contents";
        hostA.appendChild(e);

        var e = contents(text("2"));
        e.className = "b";
        hostB.appendChild(e);
        var e = contents(text("1"));
        e.className = "c";
        hostB.appendChild(e);

        var e = contents(text("2"));
        e.className = "b after";
        hostC.appendChild(e);
        var e = contents(text("1"));
        e.className = "c  before";
        hostC.appendChild(e);

        var e = contents(text("2"));
        e.className = "b before after";
        hostD.appendChild(e);
        var e = contents(text(" 3"));
        e.className = "b before after";
        hostD.appendChild(e);
        var e = contents(text("1"));
        e.className = "c  before";
        hostD.appendChild(e);

        var e = contents(contents(text("2")));
        e.className = "before b after";
        hostE.appendChild(e);
        var e2 = contents(text("1"));
        e2.className = "c  before after";
        hostE.insertBefore(e2, e);

        var e = contents(text("2"));
        e.className = "before b after";
        hostF.appendChild(e);
        var e2 = contents(text("1"));
        e2.className = "c  before after";
        hostF.insertBefore(e2, e);

        var e = contents(contents(text("1")));
        e.className = "b";
        hostG.appendChild(e);
        var e = contents(text("2"));
        e.className = "b  before after";
        hostG.appendChild(e);

        var e = contents(contents(text("2")));
        e.className = "b";
        hostH.appendChild(e);
        var e2 = contents(text("1"));
        e2.className = "b  before after";
        hostH.insertBefore(e2, e);

        var e = contents(text("b"));
        e.className = "b";
        hostI.appendChild(e);
        var e = span("c");
        e.className = "b";
        hostI.appendChild(e);

        var e = contents(contents(text("b")));
        e.className = "b";
        hostJ.appendChild(e);
        var e = span("c");
        e.className = "b";
        hostJ.appendChild(e);

        var inner = span("b");
        inner.className = "after";
        var e = contents(contents(inner));
        e.className = "b";
        hostK.appendChild(e);
        var e = span("d");
        e.className = "b";
        hostK.appendChild(e);

        var inner = contents(null);
        inner.className = "before";
        var e = contents(inner);
        e.className = "b";
        hostL.appendChild(e);
        var e = span("b");
        e.className = "b";
        hostL.appendChild(e);

        hostR.appendChild(span("R"));

        document.body.offsetHeight;
        setTimeout(function() {
            shadow("hostS");
            shadow("hostT");
            shadow("hostU");
            shadow("hostV").innerHTML = '<z style="color:green"><content select="b"></content></z>';

            document.body.offsetHeight;
            document.documentElement.removeAttribute("class");
          },0);
      }

      if (document.body.createShadowRoot) {
        run();
        window.addEventListener("MozReftestInvalidate", tweak, false);
      } else {
        document.documentElement.removeAttribute("class");
      }
    </script>
  </body>
</html>