content-property-quote-types.html | Explore in Territory

<!DOCTYPE html>
<meta charset="utf-8">
<style>
#simple_quotes:before {
  content: open-quote "quoted A" close-quote;
}

#simple_custom_quotes:before {
  quotes: "«" "»" "‹" "›" "A" "B";
  content: open-quote "quoted A" close-quote;
}

#complex_quotes:before {
  content: open-quote "quoted A" open-quote "quoted B" no-close-quote close-quote;
}

#complex_custom_quotes:before {
  quotes: "«" "»" "‹" "›";
  content: open-quote "quoted A" open-quote "quoted B" no-close-quote close-quote;
}

#both_sides_custom_quotes:before {
  quotes: "«" "»" "‹" "›";
  content: open-quote "quoted A" open-quote "quoted B" no-close-quote close-quote;
}

#both_sides_custom_quotes:after {
  quotes: "(" ")" "[" "]";
  content: open-quote "quoted C" no-open-quote "quoted D" close-quote no-close-quote;
}
</style>

<div id="simple_quotes"></div>
<div id="simple_custom_quotes"></div>
<div id="complex_quotes"></div>
<div id="complex_custom_quotes"></div>
<div id="both_sides_custom_quotes"></div>

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
test(function () {
  assert_equals(getComputedStyle(simple_quotes).content, 'normal');
  assert_equals(getComputedStyle(simple_quotes, 'before').content, 'open-quote "quoted A" close-quote');

  assert_equals(getComputedStyle(simple_custom_quotes).content, 'normal');
  assert_equals(getComputedStyle(simple_custom_quotes, 'before').content, 'open-quote "quoted A" close-quote');
}, "Check that the content attribute includes quote keywords when quotes are used");

test(function () {
  assert_equals(getComputedStyle(complex_quotes).content, 'normal');
  assert_equals(getComputedStyle(complex_quotes, 'before').content, 'open-quote "quoted A" open-quote "quoted B" no-close-quote close-quote');

  assert_equals(getComputedStyle(complex_custom_quotes).content, 'normal');
  assert_equals(getComputedStyle(complex_custom_quotes, 'before').content, 'open-quote "quoted A" open-quote "quoted B" no-close-quote close-quote');
}, "Check that the content attribute includes quote keywords when nested quotes are used");

test(function () {
  assert_equals(getComputedStyle(both_sides_custom_quotes).content, 'normal');
  assert_equals(getComputedStyle(both_sides_custom_quotes, 'before').content, 'open-quote "quoted A" open-quote "quoted B" no-close-quote close-quote');
  assert_equals(getComputedStyle(both_sides_custom_quotes, 'after').content, 'open-quote "quoted C" no-open-quote "quoted D" close-quote no-close-quote');
}, "Check that the content attribute includes quote keywords when quotes are used both :before and :after");
</script>
chromium/third_party/blink/web_tests/fast/css/content-property-quote-types.html
