sibling-function-media-query.tentative.html (1278B)
1 <!DOCTYPE html> 2 <title>CSS Values and Units Test: sibling-index() and sibling-count() invalid in media queries</title> 3 <link rel="help" href="https://drafts.csswg.org/css-values-5/#tree-counting"> 4 <link rel="help" href="https://drafts.csswg.org/mediaqueries-5/#width"> 5 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10982"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style id="test_sheet"> 9 #target { 10 background-color: green; 11 } 12 @media (width > CALC(0px * sibling-index())) { 13 #target { background-color: red; } 14 } 15 @media (width > CALC(0px * sibling-count())) { 16 #target { background-color: red; } 17 } 18 </style> 19 <div id="target"></div> 20 <script> 21 test(() => { 22 assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 128, 0)"); 23 }, "sibling-index() and sibling-count() are not valid in @media queries"); 24 25 test(() => { 26 let rules = test_sheet.sheet.cssRules; 27 assert_equals(rules.length, 3); 28 assert_equals(rules[1].media.mediaText, "(width > CALC(0px * sibling-index()))"); 29 assert_equals(rules[2].media.mediaText, "(width > CALC(0px * sibling-count()))"); 30 }, "@media queries with sibling-index() and sibling-count() as general-enclosed"); 31 32 </script>