PageRenderTime 50ms CodeModel.GetById 30ms RepoModel.GetById 0ms app.codeStats 0ms

/third_party/WebKit/LayoutTests/imported/csswg-test/css-writing-modes-3/orthogonal-parent-shrink-to-fit-001j.html

https://gitlab.com/0072016/Facebook-SDK-
HTML | 88 lines | 87 code | 1 blank | 0 comment | 0 complexity | a9bda89bae9fd894507b6bbcbb91b3b0 MD5 | raw file
  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <title>CSS Writing Modes Test: Shrink-to-fit float with a child of orthogonal inline</title>
  4. <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" title="7.3. Orthogonal Flows">
  5. <meta name="assert" content="Shrink-to-fit float with a child of orthogonal inline">
  6. <meta name="flags" content="ahem dom">
  7. <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
  8. <link rel="reviewer" title="GĂ©rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-12-23 -->
  9. <script src="../../../resources/testharness.js"></script>
  10. <script src="../../../resources/testharnessreport.js"></script>
  11. <link rel="stylesheet" href="../../../resources/testharness.css">
  12. <style>
  13. .test {
  14. border:thin solid;
  15. font:20px/1 Ahem;
  16. }
  17. .target {
  18. color:blue;
  19. height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
  20. not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
  21. writing-mode:vertical-rl;
  22. }
  23. .border {
  24. border-right:blue solid .5em;
  25. }
  26. .next {
  27. color:orange;
  28. }
  29. .inline-block {
  30. display:inline-block;
  31. }
  32. .float {
  33. float:left;
  34. }
  35. h3 {
  36. clear:both;
  37. }
  38. h3.fail {
  39. color:red;
  40. }
  41. table {
  42. border-spacing:0px;
  43. }
  44. td {
  45. padding:0px;
  46. }
  47. </style>
  48. <div id="log"></div>
  49. <div id="container">
  50. <p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
  51. <p>If script is enabled, there should be one or more PASS and no FAIL.
  52. <h3>10: Shrink-to-fit float with a child of orthogonal inline</h3>
  53. <div class="test">
  54. <div class="float"><span class="target">HH</span></div><span class="next">ZZ</span>
  55. </div>
  56. </div>
  57. <script>
  58. if (window.location.search == "?wait") {
  59. console.log("Sleeping 5 secs for debug");
  60. setup({explicit_done:true});
  61. window.setTimeout(run, 5000);
  62. } else {
  63. run();
  64. }
  65. function run() {
  66. Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
  67. var title = node.previousElementSibling.textContent;
  68. test(function () {
  69. try {
  70. var targetNode = node.querySelector(".target");
  71. var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
  72. var targetBounds = targetNode.getBoundingClientRect();
  73. assert_less_than_equal(targetBounds.width, fontSize * 2.01, "writing-mode is vertical")
  74. var nextNode = node.querySelector(".next");
  75. var nextBounds = nextNode.getBoundingClientRect();
  76. assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
  77. } catch (e) {
  78. node.previousElementSibling.classList.add("fail");
  79. throw e;
  80. }
  81. }, title);
  82. });
  83. if (window.testRunner)
  84. container.style.display = "none";
  85. done();
  86. }
  87. </script>