Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/external/wpt/html/editing/the-hidden-attribute/hidden-ua-stylesheet.html 

<!DOCTYPE html>
<link rel=author href="mailto:[email protected]">
<link rel=help href="https://html.spec.whatwg.org/multipage/rendering.html#hiddenCSS">
<link rel=help href="https://github.com/whatwg/html/pull/7475#issuecomment-1069313217">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<div id=div>hello world</div>
<table id=table>
  <colgroup id=colgroup>
    <col id=col></col>
  </colgroup>
</table>

<script>
function testDisplayNone(description) {
  test(() => {
    assert_equals(getComputedStyle(div).display, 'none',
        `${description} should make the div display:none.`);
    assert_equals(getComputedStyle(div).contentVisibility, 'visible',
        `${description} should not affect the div's content-visibility property.`);
  }, description);
}

function testCVHidden(description) {
  test(() => {
    assert_equals(getComputedStyle(div).display, 'block',
        `${description} should not affect the div's display property.`);
    assert_equals(getComputedStyle(div).contentVisibility, 'hidden',
        `${description} should make the div content-visibility:hidden.`);
  }, description);
}

function testNormal(description) {
  test(() => {
    assert_equals(getComputedStyle(div).display, 'block',
        `${description} should not affect the div's display property.`);
    assert_equals(getComputedStyle(div).contentVisibility, 'visible',
        `${description} should not affect the div's content-visibility property.`);
  }, description);
}

test(() => {
  div.removeAttribute('hidden');
  testNormal(`div.removeAttribute('hidden')`);

  div.setAttribute('hidden', '');
  testDisplayNone(`div.setAttribute('hidden', '')`);

  div.setAttribute('hidden', 'asdf');
  testDisplayNone(`div.setAttribute('hidden', 'asdf')`);

  div.setAttribute('hidden', 'until-found');
  testCVHidden(`div.setAttribute('hidden', 'until-found')`);

  div.setAttribute('hidden', 'UNTIL-FOUND');
  testCVHidden(`div.setAttribute('hidden', 'UNTIL-FOUND')`);

  div.setAttribute('hidden', 'UnTiL-FoUnD');
  testCVHidden(`div.setAttribute('hidden', 'UnTiL-FoUnD')`);

  div.setAttribute('hidden', '0');
  testDisplayNone(`div.setAttribute('hidden', '0')`);
});
</script>