Uploaded image for project: 'JDK'
  1. JDK
  2. JDK-8257664

HTMLEditorKit: Wrong CSS relative font sizes

    XMLWordPrintable

Details

    • b06
    • x86_64
    • windows_10

    Description

      ADDITIONAL SYSTEM INFORMATION :
      java version "15.0.1" 2020-10-20
      Java(TM) SE Runtime Environment (build 15.0.1+9-18)
      Java HotSpot(TM) 64-Bit Server VM (build 15.0.1+9-18, mixed mode, sharing)


      A DESCRIPTION OF THE PROBLEM :
      CSS relative font sizes such as "font-size: 120%" produce wrong results when specified on HTML block-level elements:

      <style>
        h3, .h3 { font-size: 120% }
      </style>

      <h3>120%</h3><!-- The displayed font-size ends up: 1.2 * 1.2 -->

      <div class="h3">120%</div><!-- The displayed font-size ends up: 1.2 * 1.2 * 1.2 -->

      <h3 style="font-size: 100%"><span class="h3">120%</span></h3><!-- Produces expected result -->


      STEPS TO FOLLOW TO REPRODUCE THE PROBLEM :
      Run the executable test case and observe the editor's content.

      EXPECTED VERSUS ACTUAL BEHAVIOR :
      EXPECTED -
      All, except for the non-standard (purple) workaround "xxx%" text tokens should have same matching size.
      ACTUAL -
      Red "xxx%" text tokens are displayed with wildly different sizes.

      ---------- BEGIN SOURCE ----------
      package net.example.swing;

      import java.awt.BorderLayout;
      import java.awt.Color;
      import java.awt.Container;
      import java.awt.event.ActionEvent;
      import java.awt.event.KeyEvent;
      import java.io.IOException;
      import javax.swing.AbstractAction;
      import javax.swing.JEditorPane;
      import javax.swing.JFrame;
      import javax.swing.JScrollPane;
      import javax.swing.KeyStroke;
      import javax.swing.SwingUtilities;
      import javax.swing.text.Document;

      @SuppressWarnings("serial")
      public class RelativeFontSizeTest extends JFrame {

          private JEditorPane editor;

          public RelativeFontSizeTest() {
              super("Relative Font Size Test");

              Container contentPane = super.getContentPane();
              editor = new JEditorPane();
              editor.setEditable(false);
              editor.putClientProperty(JEditorPane.HONOR_DISPLAY_PROPERTIES, true);
              editor.putClientProperty(JEditorPane.W3C_LENGTH_UNITS, false);
              contentPane.add(new JScrollPane(editor), BorderLayout.CENTER);

              editor.getActionMap().put("Reload-Page", new AbstractAction("Reload-Page") {
                  @Override public void actionPerformed(ActionEvent evt) { loadPage(); }
              });
              editor.getActionMap().put("Debug-Page", new AbstractAction("Debug-Page") {
                  @Override public void actionPerformed(ActionEvent evt) { debugPage(); }
              });

              KeyStroke ctrlR = KeyStroke.getKeyStroke(KeyEvent.VK_R, KeyEvent.CTRL_DOWN_MASK);
              editor.getInputMap().put(ctrlR, "Reload-Page");

              KeyStroke ctrlShiftD = KeyStroke
                      .getKeyStroke(KeyEvent.VK_D, KeyEvent.CTRL_DOWN_MASK | KeyEvent.SHIFT_DOWN_MASK);
              editor.getInputMap().put(ctrlShiftD, "Debug-Page");

              loadPage();
          }

          void loadPage() {
              try {
                  editor.setContentType("text/html");
                  editor.getDocument().putProperty(Document.StreamDescriptionProperty, null); // Reload
                  editor.setPage(RelativeFontSizeTest.class.getResource("relative-font-size-test.html"));
              } catch (IOException e) {
                  editor.setContentType("text/plain");
                  editor.setText(e.toString());
                  editor.setForeground(Color.red);
              }
          }

          void debugPage() {
              System.out.println(editor.getDocument().getDefaultRootElement());
              System.out.println(editor.getUI().getRootView(editor));
          }

          public static void main(String[] args) throws Exception {
              SwingUtilities.invokeLater(() -> {
                  RelativeFontSizeTest frame = new RelativeFontSizeTest();
                  frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                  frame.setSize(500, 800);
                  frame.setLocation(0, 0);
                  frame.setVisible(true);
              });
          }

      }

      --"relative-font-size-test.html"
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Relative Font-size Test</title>
        <style>
          body { font-size: 12px; font-size: 12;
                 line-height: 1.3; font-family: sans-serif;
                 margin-left: 7; margin-right: 7 }
          .inherit { font-size: 100% }
          h1, .h1, h1.h0 span { font-size: 160% }
          h2, .h2, h2.h0 span { font-size: 140% }
          h3, .h3, h3.h0 span { font-size: 120% }
          h4, .h4, h4.h0 span { font-size: 100% }
          p, .h0 { font-size: 100% }
          h1, h2, h3, h4, ol, ul, p,
          .h1, .h2, .h3, .h4 { font-weight: bold;
                               margin-top: 0;
                               margin-bottom: 0;
                               /*border: 1px dashed silver*/ }
          .bug { color: red }
          .workaround { color: #1E90FF }
          .workaround-2 { color: purple }
          .ok { color: black }
          hr { margin-top: 10px; margin-bottom: 10px;
               margin-top: 10; margin-bottom: 10 }
        </style>
      </head>
      <body>

      <ul>
      <li class="bug">Bug</li>
      <li class="workaround">Workaround</li>
      <li class="workaround-2">Workaround (non-standard)</li>
      <li>Reference / <span class="ok">Correct</span></li>
      </ul>

      <hr width="60%" size="1" noshade style="margin: 10">

      <div>
        <span class="h4">100%</span>
        <span class="h3">120%</span>
        <span class="h2">140%</span>
        <span class="h1">160%</span>
      </div>

      <h4>100%</h4>
      <h3 class="bug">120%</h3>
      <h2 class="bug">140%</h2>
      <h1 class="bug">160%</h1>

      <!-- base-size(12) * x, Use absolute size -->
      <h4 style="font-size: 12" class="workaround">100%</h4>
      <h3 style="font-size: 14" class="workaround">120%</h3>
      <h2 style="font-size: 17" class="workaround">140%</h2>
      <h1 style="font-size: 19" class="workaround">160%</h1>

      <!-- Error: base-size(12) * x * x, Use sqrt(x)-->
      <h4 style="font-size: 100%">100%</h4>
      <h3 style="font-size: 109.54%" class="workaround-2">120%</h3>
      <h2 style="font-size: 118.32%" class="workaround-2">140%</h2>
      <h1 style="font-size: 126.49%" class="workaround-2">160%</h1>

      <h4><span class="inherit">100%</span></h4>
      <h3 class="workaround"><span class="inherit">120%</span></h3>
      <h2 class="workaround"><span class="inherit">140%</span></h2>
      <h1 class="workaround"><span class="inherit">160%</span></h1>

      <h4 class="h0"><span>100%</span></h4>
      <h3 class="h0"><span>120%</span></h3>
      <h2 class="h0"><span>140%</span></h2>
      <h1 class="h0"><span>160%</span></h1>

      <hr width="60%" size="1" noshade style="margin: 10">

      <div>
        <span class="h4">100%</span>
        <span class="h3">120%</span>
        <span class="h2">140%</span>
        <span class="h1">160%</span>
      </div>

      <div ><div class="h4">100%</div></div>
      <div class="bug"><div class="h3">120%</div></div>
      <div class="bug"><div class="h2">140%</div></div>
      <div class="bug"><div class="h1">160%</div></div>

      <!-- Error: base-size(12) * 1.6 * 1.6 * 1.6, Use cuberoot(x) -->
      <div style="font-size: 100%; font-weight: bold" >100%</div>
      <div style="font-size: 106.266%; font-weight: bold" class="workaround-2">120%</div>
      <div style="font-size: 111.869%; font-weight: bold" class="workaround-2">140%</div>
      <div style="font-size: 116.96%; font-weight: bold" class="workaround-2">160%</div>

      <div ><div class="h4"><span class="inherit">100%</span></div></div>
      <div class="bug"><div class="h3"><span class="inherit">120%</span></div></div>
      <div class="bug"><div class="h2"><span class="inherit">140%</span></div></div>
      <div class="bug"><div class="h1"><span class="inherit">160%</span></div></div>

      <div ><div class="h4"><div class="inherit">100%</div></div></div>
      <div class="workaround"><div class="h3"><div class="inherit">120%</div></div></div>
      <div class="workaround"><div class="h2"><div class="inherit">140%</div></div></div>
      <div class="workaround"><div class="h1"><div class="inherit">160%</div></div></div>

      <hr width="60%" size="1" noshade style="margin: 10">

      <div>
        <span class="h4">100%</span>
        <span class="h3">120%</span>
        <span class="h2">140%</span>
        <span class="h1">160%</span>
      </div>

      <ol class="bug">
      <li class="h4"><span class="ok">100%</span></li>
      <li class="h3">120%</li>
      <li class="h2">140%</li>
      <li class="h1">160%</li>
      </ol>

      <ol class="bug">
      <li class="h4"><span class="inherit"><span class="ok">100%</span></span></li>
      <li class="h3"><span class="inherit">120%</span></li>
      <li class="h2"><span class="inherit">140%</span></li>
      <li class="h1"><span class="inherit">160%</span></li>
      </ol>

      <ol class="h4" ><li >100%</li></ol>
      <ol class="h3" start="2"><li class="bug">120%</li></ol>
      <ol class="h2" start="3"><li class="bug">140%</li></ol>
      <ol class="h1" start="4"><li class="bug">160%</li></ol>

      <div class="workaround">
      <ol class="h4" ><li class="inherit"><span class="ok">100%</span></li></ol>
      <ol class="h3" start="2"><li class="inherit">120%</li></ol>
      <ol class="h2" start="3"><li class="inherit">140%</li></ol>
      <ol class="h1" start="4"><li class="inherit">160%</li></ol>
      </div>

      <hr width="60%" size="1" noshade style="margin: 10">

      <div>
        <span class="h4">100%</span>
        <span class="h3">120%</span>
        <span class="h2">140%</span>
        <span class="h1">160%</span>
      </div>

      <div class="h4">
        <ol><li>100%</li></ol>
      </div>
      <div class="h3">
        <ol start="2" class="bug"><li>120%</li></ol>
      </div>
      <div class="h2">
        <ol start="3" class="bug"><li>140%</li></ol>
      </div>
      <div class="h1">
        <ol start="4" class="bug"><li>160%</li></ol>
      </div>

      <div class="h4">
        <ol class="inherit"><li>100%</li></ol>
      </div>
      <div class="h3">
        <ol start="2" class="inherit"><li class="workaround">120%</li></ol>
      </div>
      <div class="h2">
        <ol start="3" class="inherit"><li class="workaround">140%</li></ol>
      </div>
      <div class="h1">
        <ol start="4" class="inherit"><li class="workaround">160%</li></ol>
      </div>

      <div class="h4">
        <ol><li class="inherit">100%</li></ol>
      </div>
      <div class="h3">
        <ol start="2" class="bug"><li class="inherit">120%</li></ol>
      </div>
      <div class="h2">
        <ol start="3" class="bug"><li class="inherit">140%</li></ol>
      </div>
      <div class="h1">
        <ol start="4" class="bug"><li class="inherit">160%</li></ol>
      </div>

      </body>
      </html>

      ---------- END SOURCE ----------

      FREQUENCY : always


      Attachments

        Issue Links

          relates to

          Bug - A problem which impairs or prevents the functions of the product. JDK-8260687 Inherited font size is smaller than expected when using StyleSheet to add styles

          • P3 - Major loss of function.
          • Resolved
          links to

          Commit Commit openjdk/jdk/70b5b311

          Review Review openjdk/jdk/1759

          Activity

            People

              psadhukhan Prasanta Sadhukhan
              webbuggrp Webbug Group
              Votes:
              0 Vote for this issue
              Watchers:
              6 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved: