dir-auto-display-none.html | Explore in Territory

<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<!-- Need a charset otherwise Firefox mangles the hebrew and fails the test -->
<meta charset="utf-8">
<div id="container" dir="auto" style="display: none">
  <div id="first-child"></div>
  <div id="second-child">שמש</div>
</div>
<script>
test(function() {
  let container = document.getElementById('container');
  let firstChild = document.getElementById('first-child');
  let secondChild = document.getElementById('second-child');

  // Everything should be rtl since the hebrew text is what influences the
  // dir=auto.
  assert_equals(getComputedStyle(container).direction, 'rtl',
      'container should start as rtl');
  assert_equals(getComputedStyle(firstChild).direction, 'rtl',
      'firstChild should start as rtl');
  assert_equals(getComputedStyle(secondChild).direction, 'rtl',
      'secondChild should start as rtl');

  // Change the text which changes the auto computed direction to be ltr.
  firstChild.textContent = 'Sun';
  assert_equals(getComputedStyle(container).direction, 'ltr',
    'container switch to ltr');
  assert_equals(getComputedStyle(firstChild).direction, 'ltr',
      'firstChild switch to ltr');
  assert_equals(getComputedStyle(secondChild).direction, 'ltr',
      'secondChild switch to ltr');

  // Remove the text to switch back to rtl.
  firstChild.textContent = '';
  assert_equals(getComputedStyle(container).direction, 'rtl',
      'container switch back to rtl');
  assert_equals(getComputedStyle(firstChild).direction, 'rtl',
      'firstChild switch back to rtl');
  assert_equals(getComputedStyle(secondChild).direction, 'rtl',
      'secondChild switch back to rtl');

},'Test that directionality of elements is recomputed for display none subtrees');
</script>
chromium/third_party/blink/web_tests/fast/dom/dir-auto-display-none.html
