at-supports-named-feature-001.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 2 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-conditional/at-supports-named-feature-001.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>CSS Conditional Test: @supports font-tech()</title>

<link rel="author" title="L. David Baron" href="https://dbaron.org/">

<link rel="author" title="Google" href="http://www.google.com/">

<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#support-definition-named-features">

<script src=/resources/testharness.js></script>

<script src=/resources/testharnessreport.js></script>

<style>

#target {

  position: relative; /* so z-index works */

</style>

<style id="s"></style>

<div id="target"></div>

<script>

let gGlobalCounter = 0;

function test_supports_condition(condition, expected) {

  test(() => {

    ++gGlobalCounter;

    document.getElementById("s").textContent = `

      @supports ${condition} {

        #target {

          z-index: ${gGlobalCounter};

`;

    assert_equals(getComputedStyle(document.getElementById("target")).zIndex,

                  expected ? "" + gGlobalCounter : "auto");

  }, `@supports ${condition} should be ${Boolean.prototype.toString(expected)}`);

let is_align_content_on_display_block_supported;

test(() => {

  let outer = document.createElement("div");

  outer.style = "height: 200px; border: thin solid; position:relative; align-content: center";

  let inner = document.createElement("div");

  outer.append(inner);

  document.body.append(outer);

  let expected;

  if (inner.offsetTop == 0) {

    is_align_content_on_display_block_supported = false;

    expected = true;

  } else if (inner.offsetTop == 100) {

    is_align_content_on_display_block_supported = true;

    expected = true;

  } else {

    expected = false;

  outer.remove();

  assert_true(expected);

}, "can detect whether align-content is supported on display:block");

test_supports_condition("named-feature(align-content-on-display-block)", is_align_content_on_display_block_supported);

test_supports_condition("named-feature( align-content-on-display-block )", is_align_content_on_display_block_supported);

test_supports_condition("named-feature(unknown-feature)", false);

test_supports_condition("named-feature(named-feature)", false);

test_supports_condition("named-feature(color)", false);

</script>